Painting with fat lines

Showcase
1

Painting with fat lines

Hi Three.js followers,

I would like Someone suggests a right way to convert mouse position !!!
This workaround (with iframe) is not a good project.
I would like to get correct mouse position calculation and have resize option !!!

the new link:
https://jrlazz.eu5.org/anim/paintfatA1.html

the old link:
https://jrlazz.eu5.org/anim/paintfatA.html

Again, Thanks for the great Three.js Team!

Jose Roberto Lazzareschi

paintfat
paintfat1340×590 6.81 KB

4 Likes
2

In Suica I get the position like this:

findPosition( domEvent )
{
	var canvas = domEvent.target;

	// get pixel position withing the Suica canvas
	var rect = canvas.getBoundingClientRect(),
		pixelX = Math.floor( domEvent.clientX - rect.left ),
		pixelY = Math.floor( domEvent.clientY - rect.top );

	// get relative pixel position (ie. [-1,+1])
	this.raycastPointer.x =  2*pixelX/canvas.clientWidth - 1;
	this.raycastPointer.y = -2*pixelY/canvas.clientHeight + 1;
	
	return [pixelX-canvas.clientWidth/2, -pixelY+canvas.clientHeight/2, 0];
}

Off-topics:

  • The color selection can be made with <input type="color"> as shown here
  • Negative width produces interesting result (no lines, just dots):
    image
    image1534×704 15.7 KB
1 Like
3

Hi Pavel,
Thank You very much for the attention.
I will try it and see it working. :wink:

4

This is new version, with a better mouse position calculation!

And the color choose way as You suggested!

http://jrlazz.eu5.org/anim/paintfatA1.html

1 Like