Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ryzulla

Move content on canvas background following mouse over

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

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 :D ) 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. :shock: :o

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.

  • Like 2

Share this post


Link to post
Share on other sites

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. :D

  • Like 1

Share this post


Link to post
Share on other sites

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

 

  • Like 3

Share this post


Link to post
Share on other sites

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

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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

 

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

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Check out this thread for some canvas tips.

 

  • Like 3

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites
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

 

  • Like 2

Share this post


Link to post
Share on other sites

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. :D

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

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.

 

LoaeKIe.jpg

 

 

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.

 

d0c36oP.jpg

 

 

Related post...

 

 

 

  • Like 7

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

 

  • Like 1

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

  • Like 2

Share this post


Link to post
Share on other sites
Posted (edited)
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 by odell
add example link

Share this post


Link to post
Share on other sites
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.

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×