Ryzulla

Move content on canvas background following mouse over

Recommended Posts

Hi everyone, I just learned to make animation website and join in greensock. I'm trying to learn to create a website using the exact same background effect as the one implemented on this website, http://thegigi.it/ in this website using a plus sign in the background and follow the direction of the mouse, I've asked in some forums and finally found the answer using tweenmax. Please guide me how can i achieve the same background effect? thankyou.

Untitled.thumb.png.7ee1dfdfaf561f95ee9e821aa84e855f.png

Share this post


Link to post
Share on other sites

Welcome to the GreenSock forums.

 

It appears the link to the site you are referencing is broken. Please try again.

Share this post


Link to post
Share on other sites
4 hours ago, Carl said:

Welcome to the GreenSock forums.

 

It appears the link to the site you are referencing is broken. Please try again.

thanks for your attention. i've fixed it.
do you have a solution?

Share this post


Link to post
Share on other sites

Here is how you can do it. I have left some comments in the code but most of the math is self explanatory, you can learn these kind of animations using this book: http://lamberta.github.io/html5-animation

 

For better performance you can use opaque canvas.

 

 

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

thankyou so much...

Share this post


Link to post
Share on other sites

Wow. That's awesome, Sahil.

 

Perhaps this could be used in your next video.

 

Also, those examples from the HTML Animation are awesome. It's like the first year of @OSUblake School in one place and you can save thousands off admission!

  • Like 2
  • Thanks 1
  • Haha 1

Share this post


Link to post
Share on other sites
34 minutes ago, Carl said:

Wow. That's awesome, Sahil.

 

Perhaps this could be used in your next video.

 

Also, those examples from the HTML Animation are awesome. It's like the first year of @OSUblake School in one place and you can save thousands off admission!

Yups so amazing.... Thanks a lot @Sahil... You are the best...

@Carl Nice idea!

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
Quote

Wow. That's awesome, Sahil.

 

Perhaps this could be used in your next video.

 

Ya I was thinking the same while making that demo but it is big demo so decided to split it in two parts.

 

@Ryzulla Here is the first part of the video, in first part I am just explaining all the basic math behind effect, in second part I will explain how you can implement all that in grid.

 

 

@Stagnax I am yet to finish part two of this video, I will probably make video tomorrow if I finish part two quickly otherwise I will try to upload on Thursday.

But I believe this video will be helpful for you as well. It explains some of the basics of canvas. You will find it helpful.

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Nice job, Sahil.  Very clear description of what the code is doing.

Really glad you made this.

 

Looking forward to part 2

  • Like 1

Share this post


Link to post
Share on other sites

Indeed, thanks for taking the time to share your knowledge in video form, @Sahil

  • Like 1

Share this post


Link to post
Share on other sites

Nice work @Sahil!!!

 

On 3/2/2018 at 8:40 AM, Carl said:

Also, those examples from the HTML Animation are awesome. It's like the first year of @OSUblake School in one place and you can save thousands off admission!

 

I've been using that book since 2012, so that's where a lot my animation know-how comes from. The book was originally written by Keith Peters, who also does the Coding Math series on YouTube.

https://www.youtube.com/user/codingmath/videos

 

  • Like 3

Share this post


Link to post
Share on other sites

Just a little tip about paths in canvas. The only way to end a path is by calling .beginPath(). Calling .closePath() simply connects the end of the path to it's start, or last moveTo call. It's the same thing as the "z" command in an SVG path, or like how the last point in an SVG polygon will automatically connect to the first point.

 

  • Like 2

Share this post


Link to post
Share on other sites

@Sahil Thank you. I've been looking into some canvas animations as you said and this one helps a lot.

Share this post


Link to post
Share on other sites

Here is the part 2, I should have just maybe made it into week long series rather than trying to finish it in 2 parts. After about 45 minutes in both parts, I could only finish the basic effect. Not sure if I should make part 3. I might just switch to making smaller videos rather than something longer like this but will see how it goes.

 

As for making videos, it gets overwhelming at times but I am enjoying it and think it will only benefit me.

 

 

  • Like 6

Share this post


Link to post
Share on other sites

Your videos will be helpful to somebody. Even if you don't get any feedback, that doesn't mean it wasn't helpful to somebody. 

  • Like 1

Share this post


Link to post
Share on other sites

:D Thanks Blake, I will continue then.

 

About the beginPath and closePath, that is interesting. What if we draw to canvas without calling either method? Does that just create super long path throughout the execution? Because I noticed browser freezing if I don't use those methods.

 

BTW just accidentally landed on android forum and realized whatever we learn to do with canvas can be ported to any platform without too many changes, which is really cool.

Share this post


Link to post
Share on other sites
10 hours ago, Sahil said:

About the beginPath and closePath, that is interesting. What if we draw to canvas without calling either method? Does that just create super long path throughout the execution? Because I noticed browser freezing if I don't use those methods.

 

 

I really haven't tried to do stuff without calling beginPath, but whenever I have forgotten to call it, I can't say that I've ever seen it lockup the browser. Mostly just stuff rendering incorrectly. What kind of stuff were you doing?

 

But I think there's always a path. Like I said, the only way to end a path is to call beginPath. You of course won't see a path unless you stroke or fill it. And some commands will automatically create a new path like rect, strokeRect, and fillRect.

 

A path is really just a collection of vectors, like an array of points, but that doesn't mean that all those vectors are connected to eachother. You could draw thousands of different shapes on the same path by using the moveTo command.

 

If you want to know the rules that canvas uses, you should check out the specs. It explains everything. I would normally never recommend checking out a spec to my worst enemy as some might consider that torture, but I actually like going through the canvas one every couple of months. I seem to always find neat little tricks and algorithms every time I got through it. 

 

https://html.spec.whatwg.org/multipage/canvas.html

 

 

cont....

 

  • Like 1

Share this post


Link to post
Share on other sites

Well nothing particular, just was working with particles and forgot to begin and end path so was just curious if we don't begin and end path for context then if it creates really long path until page is open. I will have a lot of questions in near future about canvas once I sort out things. One quick question for now, is it possible to save path we are drawing to canvas by using all moveTo, lineTo etc methods? or it makes more sense to define path first and reference it to draw on canvas?

 

Ya I used to hate specs and would think, 'who can even read this stuff?'. But recently I have found that some of things are easy and in depth to understand there.

 

Edit: that was silly question from me, obviously path will get really long with each frame. Sometimes I get fooled by per frame execution. :D

Share this post


Link to post
Share on other sites

I was going to post something else, but I'll do that later.

 

Do you have a demo of what you were working on? I'm curious as to what you were doing. 

 

And you really don't have to worry about ending a path as that happens automatically whenever you begin a new path. When to start a new path will depend on what you're doing. For stuff that is logically separate, like particles, they probably shouldn't share a path so they can move independently of each other. If you're making something like a grid, then using the same path shouldn't be problem as the grid could be considered a single unit.

  • Like 1

Share this post


Link to post
Share on other sites
Quote

Do you have a demo of what you were working on? I'm curious as to what you were doing. 

 

Nothing specific, plus my question was silly. I will get back to you when I have more specific question.

Share this post


Link to post
Share on other sites
23 minutes ago, Sahil said:

my question was silly

 

dWwPEYf.jpg

  • Haha 4

Share this post


Link to post
Share on other sites

@OSUblake I was going through the article about optimizing canvas performance and was moving my context state calls and path calls out of the loop because I was just using same stroke color. While doing that I removed beginPath method and noticed heavy lag. So I thought to ask you but later it didn't make sense to not use beginPath in any conditions. But as you are curious so here is the demo of what I was doing.

 

I did few tests and when you remove beginPath your frames will drop completely(at least on my PC) and ram usage will spike, which makes sense as it will just create some super long path.

 

 

About saving path, when I landed in android forum I noticed an object something like new Path but I was almost sure that HTML canvas doesn't offer anything like that. From what I searched, it is true that there is no such method to create path object. So I was just wondering if moveTo, lineTo calls can be used to construct path but using library would make more sense here or custom API that we can use to construct/save path.

 

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.

  • Like 3

Share this post


Link to post
Share on other sites
On 3/10/2018 at 2:10 AM, Sahil said:

BTW just accidentally landed on android forum and realized whatever we learn to do with canvas can be ported to any platform without too many changes, which is really cool.

 

You figured that out by looking at an Android forum? There's not a lot of people that would be able to make that connection

 

👏👏👏

 

wEMvcxs.gif

 

 

2D canvas/graphics libraries are used everywhere, and I do mean everywhere. In fact, everything you're looking at is being generated by one of those libraries. To render the page, all the HTML, CSS, and SVG in the DOM gets reduced down to a bunch of canvas draw calls.

 

What's really interesting, and what you just discovered, is that the HTML5 canvas uses very similar API. For fun, I made a Skia Fiddle to compare code with. Skia is the graphics engine used in Chrome, Firefox, and a bunch of other stuff like Sublime Text.

 

 

Skia

https://fiddle.skia.org/c/edce0208cfe8e7b4d0bf1ba0ac4d6af9

 

void draw(SkCanvas *canvas) {

  canvas->clear(SK_ColorBLACK);

  const int centerX = 400;
  const int centerY = 400;

  SkPath rocket;
  SkParsePath::FromSVGString("M2.35,24.5...", &rocket);

  SkPaint fillPaint, strokePaint;
  fillPaint.setAntiAlias(true);
  strokePaint.setAntiAlias(true);
  strokePaint.setStrokeWidth(2);
  strokePaint.setStyle(SkPaint::kStroke_Style);

  SkColor colors[][2] = {
    {0x8888ff00, 0xff88ff00},
    {0x880088bb, 0xff0088bb}
  };

  SkScalar rotation = 0;

  for (auto color: colors) {

    fillPaint.setColor(color[0]);
    strokePaint.setColor(color[1]);

    canvas->save();
    canvas->translate(centerX, centerY);
    canvas->rotate(rotation);
    canvas->scale(3, 3);
    canvas->drawPath(rocket, fillPaint);
    canvas->drawPath(rocket, strokePaint);
    canvas->restore();

    rotation -= 90;
  }
}

 

 

 

HTML5 Canvas

https://codepen.io/osublake/pen/gebqVK

 

function draw(context) {
  
  const centerX = 400;
  const centerY = 400;
    
  const rocket = new Path2D("M2.35,24.5...");
  
  // 32-bit RRGGBBAA color
  const colors = [
    ["#88ff0088", "#88ff00ff"],
    ["#0088bb88", "#0088bbff"]
  ];
  
  let rotation = 0;
  context.lineWidth = 2;
  
  for (let color of colors) {
    
    context.fillStyle = color[0];
    context.strokeStyle = color[1];
    
    context.save();
    context.translate(centerX, centerY);
    context.rotate(rotation);
    context.scale(3, 3);
    context.fill(rocket);
    context.stroke(rocket);
    context.restore();
    
    rotation -= Math.PI / 2;
  }
}

 

 

Skia uses C++, so there's obviously going to be some syntax differences. Outside of that, the only difference is that Skia uses paint objects to hold style related stuff, like color. That's really nice because you don't have to keep changing the context. I've seen talks about adding paint objects to the HTML5 canvas, but I don't know if it's still being considered.

 

I'll be back later, but check out Path2D. It will let you save a path. See how I'm using it in that demo for the rocket path.

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

 

 

  • Like 4

Share this post


Link to post
Share on other sites

How is @Sahil learning everything so quickly? His knowledge seems to be growing exponentially.

 

Do we have verification that he's real and not a new AI that @OSUblake created in the Matrix?

 

I'm really starting to feel like a slacker. 

  • Haha 4

Share this post


Link to post
Share on other sites

Thanks Blake, those examples are identical. I looked up skia and it is interesting too for something advanced. I also read about paint objects though not sure if I read it somewhere else or through one of your posts. :D

 

And thanks for intense clap. :D

 

Quote

Do we have verification that he's real and not a new AI that @OSUblake created in the Matrix?

 

 

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.

  • Like 2

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

  • Recently Browsing   0 members

    No registered users viewing this page.