Jump to content


Velocity Particle Animation

Moderator Tag

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

Hey everyone,

I am Annika and I am working on a project for university. I want to make an animation with particles (png: https://greensock.com/forums/forum/11-gsap/?do=add#) like this video. https://greensock.com/forums/forum/11-gsap/?do=add#

We want to use Velocity for this, to move the particles random and with a wraparound on the Canvas, but we don't know how to use it with a loop.

Thank you very much for you help





For now, this ist my code in javascript:


window.onload = onReady;
var canvas;
var ctx;

function onReady(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  // loading picture
  img = new Image();
  img.src = 'particle.png';


function draw(){

var more=1;
  for(var i=0; i<100; i++){
  ctx.drawImage(img, 20+more, 200);



Link to comment
Share on other sites

It is good idea to post partial demo even if it isn't working so we have something to work with.


I don't know why are you using pngs for your particles, from the gif you posted, it doesn't seem necessary. Anyway, I don't have ready demo to post. Following is a tutorial about bouncing particles I came across recently, you can go through it.




To wrap particles around canvas you just need to change bouncing calculation to wrapping. You can do that as follows,


if(particle.left - particle.width/2 > canvasWidth){
	particle.left = 0 - particle.width/2;


Note: The above snippet I have written is just to explain, I haven't gone through demos from tutorial I posted, but this should give you idea.


You can also search codepen for demos or google for simpler tutorials. If you want to learn about physics based animations then you can get this book http://lamberta.github.io/html5-animation/


  • Like 4
  • Thanks 1
Link to comment
Share on other sites

I just came across a video, coincidentally it turned out to be about processing js. Few years ago I had bookmarked processing js page but never really went through it. So just out of curiosity I visited processing js page and realized now that has become p5js.




Anyway, I was going through their examples page and came across this flocking demo that wraps particles around the canvas. I removed all the flocking code, here is basic wrapping demo. But wrapping isn't big deal, following snippet from demo is for wrapping.


Boid.prototype.borders = function() {
  if (this.position.x < -this.r) this.position.x = width + this.r;
  if (this.position.y < -this.r) this.position.y = height + this.r;
  if (this.position.x > width + this.r) this.position.x = -this.r;
  if (this.position.y > height + this.r) this.position.y = -this.r;


There might be more unnecessary code that you can clean up step by step.


See the Pen PRRxMP?editors=0010 by Sahil89 (@Sahil89) on CodePen



  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Using a png is better for performance, but you need to wait until the image loads before you can start using it. So using window.onload is kind of pointless unless your images are in the DOM, which is how I load them sometimes.


<aside style="display:none">
  <img id="img" src="some-image.png" />


And you don't use beginPath() and fill() with drawImage(). Just draw the image.



var img = document.querySelector("#img");

window.addEventListener("load", onAssetsLoaded);

function onAssetsLoaded() {
  // initialize stuff 

function draw() {
  context.drawImage(img, 0, 0);




Coding Math is an excellent resource. Keith Peters is the original author of the book that Sahil linked to. Here's a video on edge handling.





@Sahil Processing.js is more like a binding to the processing language. P5.js is a little different in that it doesn't use the processing language, and is written in JavaScript.


But processing is really cool. My 2 favorite books are the one that you linked to, and "The Nature of Code". It uses the processing language, but it looks a lot like JavaScript, so it's not too hard to understand. I bought the actual book, but you can view it for free.



The genetic algorithms are really cool. There's a section in there about making smart rockets that evolve, and get smarter over time. Here's a video of it using p5.js.




  • Like 3
  • Thanks 1
Link to comment
Share on other sites


@Sahil Processing.js is more like a binding to the processing language. P5.js is a little different in that it doesn't use the processing language, and is written in JavaScript.


Ya, I thought they dropped whole processing.js idea and started focusing on JavaScript library only. As the processingjs.org hasn't changed over the years and all examples are old as well.


Thanks for the book. I was watching the coding train video. :D

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thank you, perfect! I got it:)


  • Like 1
Link to comment
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.