Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions js-experiments/3-animation/script.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
var canvas = document.getElementById("canvas");
let canvas = document.getElementById("canvas");
canvas.style.background = "#043a4a";
var ctx = canvas.getContext("2d");
var phase = 0;
var speed = 0.00001;
var frameCount= 0;
var maxCircleSize = 10;
var numRows =11;
var numCols =15;
let ctx = canvas.getContext("2d");
let phase = 0;
let speed = 0.00001;
let frameCount= 0;
let maxCircleSize = 10;
let numRows =11;
let numCols =15;
function drawBall(){
ctx.clearRect(0,0,canvas.width,canvas.height);
phase = frameCount * speed;
for(var i =0; i<2;i++){
if(i==0){var strandPhase = phase;}
else{var strandPhase = phase +Math.PI};
for(let i =0; i<2;i++){
if(i==0){let strandPhase = phase;}
else{let strandPhase = phase +Math.PI};

for(var col=0; col<numCols; col++){
var colOffset = (col*Math.PI*2)/numCols;
var x = canvas.width-(20*col)-100;
for(var row = 0; row <numRows;row++){
for(let col=0; col<numCols; col++){
let colOffset = (col*Math.PI*2)/numCols;
let x = canvas.width-(20*col)-100;
for(let row = 0; row <numRows;row++){
ctx.beginPath();
var y = canvas.height/2+row*10+ Math.sin(strandPhase+colOffset)*50;
let y = canvas.height/2+row*10+ Math.sin(strandPhase+colOffset)*50;
frameCount++;
var sizeOffset = (Math.cos(strandPhase-(row/numRows)+colOffset)+1)*0.5;
var circleSize = sizeOffset * maxCircleSize;
let sizeOffset = (Math.cos(strandPhase-(row/numRows)+colOffset)+1)*0.5;
let circleSize = sizeOffset * maxCircleSize;
ctx.arc(x,y, circleSize, 0, Math.PI*2, false);
ctx.fillStyle = "#f59190";
ctx.fill();
Expand All @@ -36,4 +36,4 @@ function drawBall(){
}
drawBall();

setInterval (drawBall,1);
setInterval (drawBall,1);