Downloaded 14 times
![function simulate() {
var now = new Date(),
interval = (now - lastSim) / 1000;
// loop over every particle in the scene
for(var i=0; i < scene.length; i++) {
scene[i].advanceSimulationBy(interval);
}
lastSim = now;
};](https://image.slidesharecdn.com/bcs-101127113005-phpapp01/75/An-Impromptu-Introduction-to-HTML5-Canvas-18-2048.jpg)
![scene[i].advanceSimulationBy(interval);
• translates each particle according to its x/y velocity
• updates the x/y velocity to simulate gravity
• tests for collisions with the canvas edge
(bouncy bouncy)](https://image.slidesharecdn.com/bcs-101127113005-phpapp01/75/An-Impromptu-Introduction-to-HTML5-Canvas-19-2048.jpg)
Uploaded byBen Hodgson
An Impromptu Introduction to HTML5 Canvas
This document summarizes an impromptu presentation about using the HTML5 <canvas> element to create particle simulations in JavaScript. Key points: - The <canvas> element allows 2D drawing directly in the browser using JavaScript. - Code examples are provided to draw a red rectangle on a canvas, clear the canvas, and define a Particle object with properties like position, velocity, and color. - A particle simulation works by updating each particle's position and velocity over time using JavaScript functions, drawing the scene on each loop.
More Related Content
Similar to An Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 Canvas
- 1. An impromptu Barcamp presentation thathas something to do with HTML5’s <canvas> element Ben Hodgson @blahpro
- 2.
- 3.
- 8. Disclaimer: I don’treally know what I’m talking about
- 10. <canvas> • browser–based 2Ddrawing • JavaScript API
- 12.
- 13. var canvas = document.getElementById('canvas_ftw'); varctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(30, 30, 50, 50);
- 14. ctx.clearRect(0, 0, width,height);
- 16. function Particle() { this.radius= 2; this.fill = "#000"; this.x = originX; this.y = originY; this.dx = 0; // px/sec this.dy = 0; // px/sec };
- 17.
- 18. function simulate() { varnow = new Date(), interval = (now - lastSim) / 1000; // loop over every particle in the scene for(var i=0; i < scene.length; i++) { scene[i].advanceSimulationBy(interval); } lastSim = now; };
- 19. scene[i].advanceSimulationBy(interval); • translates eachparticle according to its x/y velocity • updates the x/y velocity to simulate gravity • tests for collisions with the canvas edge (bouncy bouncy)
- 20. Particle.prototype.draw = function(ctx){ ctx.beginPath(); ctx.fillStyle = this.fill; ctx.arc(this.x, this.y, this.radius, 0, TWO_PI, true); ctx.closePath(); ctx.fill(); };
- 21. (function spawn() { //Make a new particle var p = new Particle(); p.fill = cycleColour(); p.radius = cycleSize(); p.dx = (Math.random() - 0.5) * initialVelocity; p.dy = (Math.random() + 1.0) * initialVelocity / -2; // Add it to the scene scene.push(p); // Do it again in 100ms setTimeout(spawn, 100); // Limit the scene size if(scene.length > maxParticles) { scene.shift(); } })();
- 22.