Member Avatar for Pravinrasal

I want to make following type of animation of balls how can I create
I didn't have more knowledge in JavaScript but i want this very urgently

this is link please click on play button in movie and wait for 10-15 sec.
thank u

  • 4 Contributors
  • 3 Replies
  • 211 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fobos

Dani AI

Generated

For : a practical, modern route is HTML5 Canvas + requestAnimationFrame. Canvas gives much better throughput than animating lots of DOM elements (jQuery) and will reproduce the smoothness of the original Flash piece that mentioned. 's jQuery approach is fine for a handful of elements; for dozens of moving balls use Canvas (or WebGL) or a physics library for collisions.

Minimal, copy‑paste skeleton (boundary bounces only):

// put a <canvas id="c"></canvas> in the page or let this create one
const canvas = document.getElementById('c') || (() => {
  const el = document.createElement('canvas'); el.id = 'c'; document.body.appendChild(el); return el;
})();
const ctx = canvas.getContext('2d');
const DPR = Math.max(1, window.devicePixelRatio || 1);

function resize() {
  const w = Math.min(window.innerWidth, 900), h = 400;
  canvas.style.width = w + 'px'; canvas.style.height = h + 'px';
  canvas.width = Math.floor(w * DPR); canvas.height = Math.floor(h * DPR);
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
}
window.addEventListener('resize', resize); resize();

class Ball {
  constructor(x,y,r,vx,vy,color){ Object.assign(this,{x,y,r,vx,vy,color}); }
  update(dt,W,H){ this.x += this.vx*dt; this.y += this.vy*dt;
    if(this.x-this.r<0){ this.x=this.r; this.vx*=-1; }
    if(this.x+this.r>W){ this.x=W-this.r; this.vx*=-1; }
    if(this.y-this.r<0){ this.y=this.r; this.vy*=-1; }
    if(this.y+this.r>H){ this.y=H-this.r; this.vy*=-1; }
  }
  draw(){ ctx.beginPath(); ctx.arc(this.x,this.y,this.r,0,Math.PI*2); ctx.fillStyle=this.color; ctx.fill(); }
}

const balls = Array.from({length:20}, () => {
  const W = canvas.width/DPR, H = canvas.height/DPR, r = 6 + Math.random()*18;
  return new Ball(Math.random()*(W-2*r)+r, Math.random()*(H-2*r)+r, r,
                  (Math.random()-0.5)*300, (Math.random()-0.5)*300,
                  `hsl(${Math.random()*360},70%,60%)`);
});

let last = performance.now();
function loop(now){
  const dt = (now-last)/1000; last = now;
  const W = canvas.width/DPR, H = canvas.height/DPR;
  ctx.clearRect(0,0,W,H);
  for(const b of balls){ b.update(dt,W,H); b.draw(); }
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Notes and next steps: add pairwise circle collision (O(n^2)) or use a spatial grid/quadtree for many balls; use a physics engine (e.g., Matter.js) if you need realistic restitution/rotation. For crisp rendering on high‑DPR screens scale the canvas (shown above). If delivery is urgent, use a small physics library or a tweening engine (faster to integrate than hand‑rolling collision math). pointed to JS demo pages — those are useful for patterns and optimization ideas.

Recommended Answers

All 3 Replies

Member Avatar for Member #905211

jQuery and the animate method can do this.

Member Avatar for Airshow

Difficult however you do it.

The original was made with Adobe Flash. A javascript solution would not be so smooth.

If you want it in a hurry then find a Flash expert.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.