Develop Reference

Why I'm getting only one rectangle?

let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];
const init = () => {
canvas.width = W = innerWidth;
canvas.height = H = innerHeight;
canvas.style.background = '#dedfda';
for (let i = 0; i <= 5; i++) {
let r = (i + 1) * 20;
objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
objArr[0].draw();
}
animate();
}
const random = (min = 0, max = 1) => Math.random() * (max - min) + min;
class Rectangle {
constructor(posX, posY, w, h, color, cx, cy, r) {
this.posX = posX;
this.posY = posY;
this.w = w;
this.h = h;
this.color = color;
this.cx = cx;
this.cy = cy;
this.r = r;
this.angle = 0;
}
draw() {
ctx.clearRect(0, 0, innerWidth, innerHeight);
ctx.fillStyle = this.color;
ctx.fillRect(this.posX, this.posY, this.w, this.h);
}
update() {
this.angle += 0.1;
this.posX = this.cx + this.r * Math.cos(this.angle);
this.posY = this.cy + this.r * Math.sin(this.angle);
this.draw();
}
}
const animate = () => {
objArr.forEach(e => {
e.update();
})
requestAnimationFrame(animate);
}
window.onload = init;
In this code, I'm expecting an output having 5 rectangles revolving around the center point of the window in different radius like the planets revolving around the Sun in solar system.
But I am getting only one rectangle and it's not even revolving.
Stucked and not getting why it's not working.

Your draw function is clearing every time and you are only referencing the first element of the array. Adjusting for both shows 6 objects revolving. Your loop runs from 0 to 5. If you want 5 objects, you'll need to set the upper bound to 4 instead.
let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];
const init = () => {
canvas.width = W = innerWidth;
canvas.height = H = innerHeight;
canvas.style.background = '#dedfda';
// adjusted range
for (let i = 0; i <= 4; i++) {
let r = (i + 1) * 20;
objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
objArr[i].draw();
}
animate();
}
const random = (min = 0, max = 1) => Math.random() * (max - min) + min;
class Rectangle {
constructor(posX, posY, w, h, color, cx, cy, r) {
this.posX = posX;
this.posY = posY;
this.w = w;
this.h = h;
this.color = color;
this.cx = cx;
this.cy = cy;
this.r = r;
this.angle = 0;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.posX, this.posY, this.w, this.h);
}
update() {
this.angle += 0.1;
this.posX = this.cx + this.r * Math.cos(this.angle);
this.posY = this.cy + this.r * Math.sin(this.angle);
this.draw();
}
}
const animate = () => {
// moved clear here to happen just once on each animate
ctx.clearRect(0, 0, innerWidth, innerHeight);
objArr.forEach(e => {
e.update();
})
requestAnimationFrame(animate);
}
window.onload = init;

You are just drawing one rectangle. Pay attention to
objArr[0].draw()
Which should be
objArr[i].draw()
Also, I think everytime an Rectange object's draw method is called the whole canvas is cleared in this line
ctx.clearRect(0, 0, innerWidth, innerHeight);
Hence, only one rectangle appears at all times.
A solution would be to move the calls to clearRect and update from Rectangle to the animate function. This way it fits better with the program logic. A Rectangle being an object should only know how to draw itself not clearing the canvas and updating its position on the canvas.
Below is my solution.
let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];
const init = () => {
canvas.width = W = innerWidth;
canvas.height = H = innerHeight;
canvas.style.background = '#dedfda';
for (let i = 0; i <= 5; i++) {
let r = (i + 1) * 20;
objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
objArr[i].draw();
}
animate();
}
const random = (min = 0, max = 1) => Math.random() * (max - min) + min;
class Rectangle {
constructor(posX, posY, w, h, color, cx, cy, r) {
this.posX = posX;
this.posY = posY;
this.w = w;
this.h = h;
this.color = color;
this.cx = cx;
this.cy = cy;
this.r = r;
this.angle = 0;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.posX, this.posY, this.w, this.h);
}
// Should be moved outside of this class.
update() {
this.angle += 0.1;
this.posX = this.cx + this.r * Math.cos(this.angle);
this.posY = this.cy + this.r * Math.sin(this.angle);
ctx.fillRect(this.posX, this.posY, this.w, this.h)
}
}
const animate = () => {
ctx.clearRect(0, 0, innerWidth, innerHeight);
objArr.forEach(e => {
e.update();
})
requestAnimationFrame(animate);
}
window.onload = init;

removing the js script from html page

<!DOCTYPE html5>
<html>
<head>
<title>disturbed</title>
<script>
window.onload = function() {
// create the canvas
var canvas = document.createElement("canvas"),
c = canvas.getContext("2d");
var particles = {};
var particleIndex = 0;
var particleNum = 15;
// set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// add canvas to body
document.body.appendChild(canvas);
// style the canvas
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
function Particle() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = 0.3;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.life = 0;
this.maxLife = Math.random() * 30 + 60;
this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
}
Particle.prototype.draw = function() {
this.x += this.vx;
this.y += this.vy;
if (Math.random() < 0.1) {
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
}
this.life++;
if (this.life >= this.maxLife) {
delete particles[this.id];
}
c.fillStyle = this.color;
//c.fillRect(this.x, this.y, 5, 10);
c.beginPath();
c.arc(this.x, this.y, 2.5, 0, 2 * Math.PI);
c.fill();
};
setInterval(function() {
//normal setting before drawing over canvas w/ black background
c.globalCompositeOperation = "source-over";
c.fillStyle = "rgba(0,0,0,0.5)";
c.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++) {
new Particle();
}
// c.globalCompositeOperation = "darken";
for (var i in particles) {
particles[i].draw();
}
}, 30);
};
</script>
</head>
<body>
</body>
</html>
The code below is all correct but its just two densed i want to make it easier and not to populated . what i want to do is make the script that i have into a separate file like "anything.js" so that i can load it into my html main file by just calling out the main functions like particle() in ,window.onload = function() which will be on the main page .
The reason is because i want to add this script to many html pages and i dont want to copy all of the lengthy script in to my code again and again .
Please answer this , it would be really helful.

HTML :
<!DOCTYPE html5>
<html>
<head>
<title>disturbed</title>
</head>
<body>
<script src="toto.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
Particle();
};
</script>
</body>
</html>
toto.js :
//create the canvas
var canvas = document.createElement("canvas"),
c = canvas.getContext("2d");
var particles = {};
var particleIndex = 0;
var particleNum = 15;
// set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// add canvas to body
document.body.appendChild(canvas);
// style the canvas
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
function Particle() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = 0.3;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.life = 0;
this.maxLife = Math.random() * 30 + 60;
this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
}
Particle.prototype.draw = function() {
this.x += this.vx;
this.y += this.vy;
if (Math.random() < 0.1) {
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
}
this.life++;
if (this.life >= this.maxLife) {
delete particles[this.id];
}
c.fillStyle = this.color;
//c.fillRect(this.x, this.y, 5, 10);
c.beginPath();
c.arc(this.x, this.y, 2.5, 0, 2 * Math.PI);
c.fill();
};
setInterval(function() {
//normal setting before drawing over canvas w/ black background
c.globalCompositeOperation = "source-over";
c.fillStyle = "rgba(0,0,0,0.5)";
c.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++) {
new Particle();
}
// c.globalCompositeOperation = "darken";
for (var i in particles) {
particles[i].draw();
}
}, 30);

I see you have a scope issue.
Variables are passed from script to script. However, in your case, you declare Particle inside window.onload so it only gets defined inside it and you can't use it elsewhere.
The right way to export your script into a separate file would be to declare Particle in the scope of the whole script, as in:
// anything.js
function Particle() {
...
}
Note that you'd need a bit of rewriting, since I can see that you use variables like canvas (which are only defined in the scope of window.onload) inside Particle's code.

Constructor, loops and arrays practice in vanilla JS

I'm trying to make an animation where particles flow from one side the other like a flock of birds. You can see a live version on my semi-finished portfolio here: https://benjamingibbsportfolio.000webhostapp.com/
I'm in the process of learning constructor functions, so I've decided to redo the above project using that type of programming.
I've managed to basically complete it, apart from the fact it only displays one particle/flake - it should show 100?
for(var i = 0; i < 100; i++)
{
flakes[i] = new Flake();
}
Where have I gone wrong?
Are all the particles simply being drawn at the same place?
I've uploaded the code here: https://jsfiddle.net/q7ja8qxv/

A single flake is drawn with this function:
this.display = function() {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = "#ffff00";
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
ctx.fill();
}
The source of the problem is the first line of the function:
ctx.clearRect(0, 0, w, h);
This clears the whole canvas...
This means that every flake "erases" the previous flake(s).
As a fix you have to remove the ctx.clearRect() call from Flake.display() and instead call it in a place where it is only executed once, before you start drawing the flakes. For example in drawFlakes() right before the loop:
function drawFlakes() {
ctx.clearRect(0, 0, w, h);
for (i = 0; i < flakes.length; i++) {
flakes[i].display();
flakes[i].move();
flakes[i].update();
}
angle += 0.01;
}
Complete example:
var canvas = document.getElementById('stars');
var ctx = canvas.getContext('2d')
var w = window.innerWidth;
var h = window.innerHeight;
var flakes = [];
var angle = 0;
canvas.width = w;
canvas.height = h;
for (var i = 0; i < 20; i++) {
flakes[i] = new Flake();
}
function drawFlakes() {
ctx.clearRect(0, 0, w, h);
for (i = 0; i < flakes.length; i++) {
flakes[i].display();
flakes[i].move();
flakes[i].update();
}
angle += 0.01;
}
function Flake() {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.r = Math.random() * 5 + 2;
this.d = Math.random() * 1;
this.display = function() {
ctx.fillStyle = "#ffff00";
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
ctx.fill();
}
this.move = function() {
this.y += Math.pow(this.d, 2) + 1;
this.x += Math.sin(angle) * 60;
};
this.update = function() {
if (this.y > h) {
this.x = Math.random() * w;
this.y = 0;
this.r = this.r;
this.d = this.d;
}
};
}
setInterval(drawFlakes, 25);
body {
background: black;
overflow: hidden;
}
<canvas id="stars"></canvas>

Unreveal animation canvas

Can anyone help me how to do the reverse the animation of this?
var $ = function(id) { return document.getElementById(id); }
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var cvs = $('cvs');
var ctx = cvs.getContext('2d');
var x = 0, y = 0, r = 0, count = 0;
x = cvs.width / 2;
y = cvs.height / 2;
time = Math.sqrt( Math.pow(cvs.width, 2) +
Math.pow(cvs.height, 2) ) / 2;
ctx.fillStyle = 'red';
ctx.rect(0, 0, cvs.width, cvs.height);
ctx.fill();
ctx.globalCompositeOperation = "destination-out";
(function animate() {
if( count >= time ) {
return false;
}else {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
r++;
count++;
window.requestAnimFrame(animate, 0);
}
})();
http://jsfiddle.net/j57msxr5/10/
I can't find a way to make the circle shrink. From big to small/dot/gone.

I recommend taking a different approach. I'd start with objects that represent what's going to be drawn on canvas, and maintain the state within those objects. Then to stop the animation you can check if the radius is more than zero:
var $ = document.getElementById.bind(document);
var cvs = $('cvs');
var ctx = cvs.getContext('2d');
var circle = {
x: cvs.height/2,
y: cvs.width/2,
radius: cvs.width/2,
color: 'white',
animate: function() {
if (this.radius > 0) {
this.radius--;
}
return this;
},
draw: function(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false);
ctx.fillStyle = this.color;
ctx.fill();
return this;
}
};
var bg = {
x: 0,
y: 0,
w: cvs.width,
h: cvs.height,
color: 'red',
draw: function(ctx) {
ctx.fillStyle = this.color;
ctx.rect(this.x, this.y, this.w, this.h);
ctx.fill();
}
};
(function frame() {
// If you draw your objects in order
// you don't need to set globalCompositeOperation
bg.draw(ctx);
circle.draw(ctx).animate();
requestAnimationFrame(frame);
}());
DEMO: http://jsfiddle.net/9uLrL6d6/

html canvas - drawing circle with animation & number

i'm totally new in javascript and css3. What I would like to achieve is to have an animation of drawing circle (in fact four of them). Everything should work like that:
1. animation of circle #1 and after animation put number 78 inside
2. animation of circle #2 and after animation put number 460 inside
3. the same but with number 20 inside
4. same but with 15 inside.
I've find a piece of code here:
http://jsfiddle.net/uhVj6/100/
// requestAnimationFrame Shim
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 101;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
function animate(current) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.stroke();
curPerc++;
if (curPerc < endPercent) {
requestAnimationFrame(function () {
animate(curPerc / 100)
});
}
}
animate();
and I added few lines. But being honest I have to idea how to load four of them (one by one with animation) and then show those numbers inside (usually numbers puted in show under the circle.
Any ideas? thank you!

Here's how I'd do it :
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
}());
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var circles = [];
createCircle(100,100,'78', function() {
createCircle(270,100,'460', function() {
createCircle(440,100,'20', function() {
createCircle(610,100,'15', null);
});
});
});
function createCircle(x,y,text,callback) {
var radius = 75;
var endPercent = 101;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
function doText(context,x,y,text) {
context.lineWidth = 1;
context.fillStyle = "#ad2323";
context.lineStyle = "#ad2323";
context.font = "28px sans-serif";
context.fillText(text, x-15, y+5);
}
function animate(current) {
context.lineWidth = 10;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.stroke();
curPerc++;
if (circles.length) {
for (var i=0; i<circles.length; i++) {
context.lineWidth = 10;
context.beginPath();
context.arc(circles[i].x, circles[i].y, radius, -(quart), ((circ) * circles[i].curr) - quart, false);
context.stroke();
doText(context,circles[i].x,circles[i].y,circles[i].text);
}
}
if (curPerc < endPercent) {
requestAnimationFrame(function () {
animate(curPerc / 100)
});
}else{
var circle = {x:x,y:y,curr:current,text:text};
circles.push(circle);
doText(context,x,y,text);
if (callback) callback.call();
}
}
animate();
}
FIDDLE