Drawing lines based on points contact and velocity

[airinterface]

Hi folks!

Sorry earlier, I accidentally posted to the job, but this is more about requesting suggestions. So I’m re-positing here.

I like to create the line draw based on 3D location of control point P ( in the attached image).
contact to the paper will be calculated based on the
contact of the thread & P’s direction and velocity. Thinkness of the line will be based on how long the contact is made to the paper at the same pixel point.

Can anyone guide me to the good example or algorithm that I should take a look at?

Thank you!

[seanwasere]

Perhaps the THREE.ArrowHelper

Try it out : An arrow Helper example

Another example : Gerstner Water

[manthrax]

Like a sumi paintbrush?

[airinterface]

Thanks you. This sounds like the starting point to think about the algorithm.
I’m not the math person, so this view really helps.
I think from here I like to calculate the length that are at the contact to the ground.
Next step is to calculate the weight depends on the vector and velocity.
if direction and velocity changes, weight changes too. ( I might not explaining it mathmatically )

[airinterface]

Yes!
I’m working on calculating how to map each curve based on the touch points on the plane and how long it remains in contact. My goal is to minimize the path of each individual brush hair as it moves across the plane. The last touchpoint will have the most paint density since that’s where the paint will accumulate.

[manthrax]

You could model the brush as a chain of spherical particles, where the size of them tapers down to a point…
these could be a child of a root node which can be moved around/oriented… the position of the spheres is computed… then collided against the ground plane and pushed up where they collide… then the resulting points/radius are drawn onto a canvas with a blurry additive brush texture.

[seanwasere]

Here is an example almost like your video. Not Threejs though. Its Paper.js

Paint brush : SBEDIT : Online Code Editor

[manthrax]

https://deciduous-flint-ambulance.glitch.me

edit: went a bit overboard:

here’s the code link in glitch: Glitch :･ﾟ✧

[airinterface]

@ manthrax, @ seanwasere Thank you.

This is exactly what I’m looking for! Beautiful corner draw here.
Just so that I understand is there any good reference I can learn what

  this.update = (cursor) => {
    segs[0].position.copy(cursor.position);
    let prv;
    segs.forEach((c, i) => {
      c.isPainting = false;
      if (prv) {
        v0.copy(prv.position);
        c.velocity.y -= 0.01;
        c.position.add(c.velocity);
        if (c.position.y <= c.radius) {
          c.position.y = c.radius;
          c.velocity.multiplyScalar(0.95);
          c.isPainting = true;
        }
        c.position
          .sub(v0)
          .setLength(c.radius + prv.radius)
          .add(v0);
        let n = v1.copy(c.position).sub(prv.position).normalize();

        c.velocity.add(n.multiplyScalar(-c.velocity.dot(n)));
        c.velocity.multiplyScalar(0.95);
      }
      prv = c;
    });
  };

Also, I’ll look into how can I bring P5.js’s smoothness when there is an acceleration.
But thank you all so much!

[manthrax]

I commented all the code in my glitch, in an attempt to explain what’s going on. Hope it helps…
Sorry I don’t have more official resources on the techniques… I learned all this from reading other peoples code and watching youtube videos etc.
but it’s the same kind of stuff people do in p5 in 2d, just with an extra coordinate :D.

Keywords might be “point to point constraint”, “point plane constraint”

Also I’ve been writing 3d stuff for ~40 years.

So don’t worry if you can’t understand it all… feel free to just use it / adapt it / experiment with it.

[airinterface]

Wow. Thank you so much for the insight. And so impressive that you self thought and learned from youtube. Thanks for pointing out hte keywords.

[manthrax]

Well… I didn’t learn everything from youtube… I’ve been obsessed since I was a teenager, and I’ve worked for a lot of graphics/simulation/games companies… It’s been a long process. I don’t want to mislead anyone reading by understating how long I’ve been self studying/learning on the job. Started with foley van dam in the late 80s… worked on renderman shaders in the 90s… worked on games/consoles throughout early 2k, and have been doing threejs pretty much exclusively since 2010 or so. There are folks on here that have been at it way less time, and are lightyears ahead of me. To be really good at this kind of stuff is really a mix of art, math, organization, design, knowledge, and persistence. but you can sorta get away with just a few of those… which is where I’m at.