Move content on canvas background following mouse over

[OSUblake]

 

On 3/13/2018 at 4:45 AM, Sahil said:

About the particles, I visited three js page and spent 5-6 hours going through every example. (maybe more ) So I was wondering if these libraries use some kind of particle engine or it is just magic of webGL or something else. Because I see great difference in three js examples and 2d canvas performance. But I wanted to go through it first before asking you too many crazy questions.

 

Three.js isn't fast due to some creative way of coding things. It's because of WebGL rendering. The speed comes from using the GPU instead of the CPU. For a good explanation of why the GPU is so fast, read this introduction to shaders. A GPU has 1000s of threads that can do trig and matrix operations at the speed of light!!! That's how fast electricity can go.

https://thebookofshaders.com/01/

 

WebGL uses the <canvas> element, but its API is completely different. It's based on OpenGL. Just look at how much code is required to draw a white square on the screen.  

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context

 

When people say they know WebGL, there's a good chance that they might be stretching the truth. What they mean is that they know a WebGL library like three.js or PixiJS. It's hard to find somebody that can do WebGL programming without a library.

 

I'll show how to speed up a 2d canvas in another post.

[Sahil]

Ya shader is something that I was planning to look into but wanted to start with 2d canvas before jumping to advanced stuff.

 

Quote

I'll show how to speed up a 2d canvas in another post.

I have been through following article about optimizing canvas but it feels like more can be done, so looking forward to your post.

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

 

Quote

 

Actually I am below average and I think every regular member is a lot smarter than me. Except one I guess, though I can't name anybody.

 

Oh BTW, I was just kidding. I wanted every regular member to think I am talking about them.

[OSUblake]

Yep, I figured you were looking at that page. Long story short, drawing a path is what makes SVG so slow. PixiJS and Three.js are fast because they generally don't use dynamically generated content like a path. 

 

Draw your path on a separate canvas element, and then draw that canvas on your main canvas using the .drawImage() method.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

[OSUblake]

You can draw a canvas on another canvas. You can even draw a canvas on itself. 

 

See the Pen 4594e9d126267200e6e8bc38407b64a3?editors=0010 by osublake (@osublake) on CodePen.

 

[OSUblake]

And on the topic of paths. I always see people claim that canvas doesn't use vectors. This is simply false. All you have to do is scale up a path to see that canvas uses vectors.

 

See the Pen WzbKLQ by osublake (@osublake) on CodePen.

 

 

 

[OSUblake]

And how does SVG receive mouse events on a path or stroke? Through some canvas methods. 

 

See the Pen LdEMaP by osublake (@osublake) on CodePen.

 

 

[OSUblake]

Check out this thread for some canvas tips.

 

[Sahil]

Quote

And how does SVG receive mouse events on a path or stroke? Through some canvas methods. 

 

Oh I saw that demo on codepen, it is really impressive. I was wondering if it can be used to perform hit tests on objects with odd shapes but yet to go through the code.

[OSUblake]

11 hours ago, Sahil said:

 

Oh I saw that demo on codepen, it is really impressive. I was wondering if it can be used to perform hit tests on objects with odd shapes but yet to go through the code.

 

It could be used for shapes by converting the shape to a polygon, but if you're going that route you can just do polygon hit testing, which would be faster. I have some code if you want to see how that's done.

 

For games I use this PhysicsEditor to generate the hit polygons. You normally don't need pixel perfect hit detection. Just close enough.

https://www.codeandweb.com/physicseditor

 

[Sahil]

When I was creating demo for this thread, I asked myself few times 'should I spend so much time creating this demo?'. Glad I did, it turned out to be worth a lot more than what I was expecting. Thanks Blake.

[OSUblake]

Here's your demo using an offscreen canvas. It probably won't help with performance as the paths you are drawing are relatively simple. The slowest part of your demo is the trig. Math functions like cos, sin, and sqrt can be slow, and there's not a lot you can do about that.

 

See the Pen mxOXQQ by osublake (@osublake) on CodePen.

 

 

Anti-aliasing can be difficult in both canvas and SVG as an odd width stroke will straddle a pixel.

 

 

 

Sometimes you can make it sharper by moving the stroke over half a pixel. Scale will of course need to be taken into consideration for when this will work.

 

 

 

Related post...

 

 

 

[bdrtsky]

@Sahil amazing example, amazing video, amazing book! I am shockingly amazed! 

[odell]

This is literally a life saver lol. Question, if possible could you point me in the direction on how I can go about connecting, in no particular way, html elements to canvas shapes or elements etc. Similar to using the data attribute to connect JavaScript properties i.e. linking an array of positioned html images to an animation in JavaScript.

[OSUblake]

1 hour ago, odell said:

could you point me in the direction on how I can go about connecting, in no particular way, html elements to canvas shapes or elements etc.

 

I'm really not sure what you mean by connect. Can you elaborate?

 

1 hour ago, odell said:

Similar to using the data attribute to connect JavaScript properties i.e. linking an array of positioned html images to an animation in JavaScript.

 

 Are you talking about selecting elements like this?

gsap.to("[data-foo]", {
  x: 500
});

 

With canvas, there are no elements. You create your objects, and then render the changes.

 

See the Pen efe90119dba497a4c5ead616c7d40fc3 by osublake (@osublake) on CodePen.

 

 

[odell]

Yeah general idea I was curios about was, is there a way I can link, attach, bind, whatever html  images to canvas and animate alongside canvas objects using canvas animations. Looked into a bit since the question, and from what I understand its "technically" possible  if  placed inline SVG but from what you lose, and the security factors, there's not much to experiment with. But if you know different, I would love to be told I'm incorrect and there's a way lol.

[OSUblake]

1 hour ago, odell said:

from what I understand its "technically" possible  if  placed inline SVG

 

That would essentially be like doing a screen grab. It's good for some stuff. I think @ZachSaucier did this something like that here, but he used a conversion library instead of SVG.

 

See the Pen WyJqdL by ZachSaucier (@ZachSaucier) on CodePen.

 

If you want to animate images with canvas, then just use images directly. You can even load them via html like this.

 

See the Pen dfe247389fe365c54b06a06ce6cd328e by osublake (@osublake) on CodePen.

 

 

And can someone tell if my animation is choppy in chrome. Not sure if it's the resolution of my monitor.

 

[alexandrosb]

 

4 hours ago, OSUblake said:

And can someone tell if my animation is choppy in chrome. Not sure if it's the resolution of my monitor.

 

it's choppy for me too, especially when reaching the right

[OSUblake]

Strange. I've never seen a choppy animation like that in Chrome. Must be some type of Chrome bug as it appears smooth in Firefox.

[ZachSaucier]

7 hours ago, OSUblake said:

That would essentially be like doing a screen grab. It's good for some stuff. I think @ZachSaucier did this something like that here, but he used a conversion library instead of SVG.

Here's the link to the full DOM -> Canvas for particle effects project if it's of interest to you @alexandrosb https://github.com/ZachSaucier/Disintegrate

[OSUblake]

2 hours ago, OSUblake said:

Strange. I've never seen a choppy animation like that in Chrome. Must be some type of Chrome bug as it appears smooth in Firefox.

 

Some type of bug. Chrome is 12x slower than Firefox.

https://bugs.chromium.org/p/chromium/issues/detail?id=1045733&q=canvas drawImage&can=1

 

 

[odell]

10 hours ago, OSUblake said:

That would essentially be like doing a screen grab. It's good for some stuff. I think @ZachSaucier did this something like that here, but he used a conversion library instead of SVG.

 

Quote

 

I'm curious about how to achieve an effect similar to this: https://www.davidwilliambaum.com/

 

I know they used the canvas element. And I found forum threads/codepens where parts of the effect are achieved without canvas.

Seems Im not the only one curious about this. Even gave a potential real world example. Figured I'd direct this here.

Edited March 6, 2020 by odell
add example link

[OSUblake]

4 hours ago, odell said:

Seems Im not the only one curious about this. Even gave a potential real world example. Figured I'd direct this here.

 

That site is just doing an interpolation technique, kind of like of I'm doing here to do panning.

 

See the Pen 98e718541df0e1f16f960233b05ecb7d by osublake (@osublake) on CodePen.

 

Another example of using interpolation.

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen.

 

But I did the calculation manually in that quick setter demo.

 

// this is the same as...
pos.x += (mouse.x - pos.x) * speed;
pos.y += (mouse.y - pos.y) * speed;
  
// ...as this
pos.x = gsap.utils.interpolate(pos.x, mouse.x, speed);
pos.y = gsap.utils.interpolate(pos.y, mouse.y, speed);

 

A parallax effect can be done by using that technique, but using different speed values for different items.

 

 

[Benanna19]

I just joined and I am loving all that Green Sock has to offer. 

 

Out of curiosity, does anyone know how to do this in React using hooks? I would like to include an effect along these lines in an app I am working on. 

 

Thanks! 

[ZachSaucier]

Hey @Benanna19 and welcome to the GreenSock forums.

 

Most everything is the same when using React hooks. The setup is slightly different because you initialize things in a useEffect hook but I don't think there are particularly tricky parts to doing this sort of thing with hooks. If you have a specific question please make a minimal demo that shows the issue clearly and we'll be happy to help.

[Benanna19]

Thanks @ZachSaucier! I will start messing around with it and post something if needed. Loving the new ScrollTrigger. Im at a very basic level with everything but its a lot of fun