Removed clearSkyDay animation

Signed-off-by: Pranshul <pranshul.devmain@gmail.com>
This commit is contained in:
Pranshul authored and GitHub committed 2024-10-10 19:49:04 +05:30
1 parent 2f52768d76
commit d07c5f8e52
1 file changed
+1 -121
+1 -121
View File
@@ -1,126 +1,6 @@
function createClearSkyDay(){
var canvas = document.querySelector('canvas');
// setting window sizes in vars
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// setting canvas params
canvas.width = windowWidth;
canvas.height = windowHeight;
// settings for canvas sizes stored here for later
canvasWidth = windowWidth;
canvasHeight = windowHeight;
// start drawing
var paintbrush = canvas.getContext('2d');
// function to get a random number between 2 digits
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
// js object to provide circles
function Circle(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.draw = function() {
// draw circle
paintbrush.beginPath();
paintbrush.arc(this.x,this.y,this.radius,0,Math.PI*2, false);
paintbrush.strokeStyle = 'blue';
paintbrush.stroke();
}
this.update = function() {
// if meets edge of canvas
if (this.x + this.radius > canvasWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > canvasHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
// get moving in first place
this.x += this.dx;
this.y += this.dy;
// draw called each time it updates, so it reappears
this.draw();
}
}
// array of circle items
var circleArray = [];
for (var i = 0; i < 12; i++) {
// get randomised numbers
var radius = 40;
// start point (randomised), also to not get circle caught at 0
var x = Math.random() * (canvasWidth - radius * 2) + radius;
var y = Math.random() * (canvasHeight - radius * 2) + radius;
// x velocity (randomised)
var randVelocity = Math.floor(getRandom(3, 6));
var dx = (Math.random() - 0.5) * randVelocity;
var dy = (Math.random() - 0.5) * randVelocity;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
// animation loop, keeps on goin and goin
function animate() {
requestAnimationFrame(animate);
// clear canvas after every frame
paintbrush.clearRect(0,0,canvasWidth,canvasHeight);
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
animate();
// old useful basics
// shapes
// --rectangle
// paintbrush.fillStyle = 'purple';
// paintbrush.fillRect(100,60,400,200);
// --lines
// paintbrush.beginPath();
// paintbrush.moveTo(200, 50);
// paintbrush.lineTo(300, 120);
// paintbrush.lineTo(500, 350);
// paintbrush.strokeStyle = 'green';
// paintbrush.stroke();
// --arc/circle
// paintbrush.beginPath();
// paintbrush.arc(400,400,50,0,Math.PI*2, false);
// paintbrush.strokeStyle = 'blue';
// paintbrush.stroke();
// multiple things
// for (var i = 0; i < 10; i++) {
// var xRand = Math.random() * windowWidth;
// var yRand = Math.random() * windowHeight;
// var colourEach = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
// paintbrush.beginPath();
// paintbrush.arc(xRand,yRand,50,0,Math.PI*2, false);
// paintbrush.strokeStyle = colourEach;
// paintbrush.stroke();
// }
}