Skip to content
GitLab
Commit 4df677d4 authored by Oskar Gabrielsen's avatar Oskar Gabrielsen
Browse files

Created the remaining 3 animations.

parent 840c1467
Hide whitespace changes
Inline Side-by-side
public/animation3.html 0 → 100644
View file @ 4df677d4
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="600" style="border:1px solid #000000;">
</canvas>
<script>
function draw(timeStamp){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (i = 0; i< circles.length; i++){
ctx.beginPath();
var yPos = 0-circleRadius*2 + ((circles[i][0] *timeStamp)%(canvas.height+circleRadius*2));
var alpha = 1-((yPos+circleRadius*2)/(canvas.height+circleRadius*2));
ctx.globalAlpha=Math.sqrt(alpha)/1.2;
ctx.fillStyle = circles[i][1];
ctx.arc(circles[i][2], yPos, circleRadius, 0, 2 * Math.PI);
ctx.fill();
}
requestAnimationFrame(draw);
}
function createCircles(amount){
for(i=0;i<amount;i++){
var color = "#"+Math.floor(Math.random()*16777215).toString(16);
var speed = (50 + Math.floor(Math.random() * 75))/100;
var xPos = Math.floor(Math.random() * canvas.width);
var newCircle = [speed, color, xPos];
circles.push(newCircle);
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var circlesAmount = 180;
var circleRadius = 15;
var circles = [];
createCircles(circlesAmount);
draw();
</script>
</body>
public/animation4.html 0 → 100644
View file @ 4df677d4
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="600" style="border:1px solid #000000;">
</canvas>
<script>
function draw(timeStamp){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 0.5;
if (typeof timeStampOld !== "undefined"){
var timeDelta = Math.floor(timeStamp-timeStampOld);
xPos = xPos + (timeDelta*xVelocity);
yPos = yPos + (timeDelta*yVelocity);
if (xPos+circleRadius>canvas.width || xPos-circleRadius<0){
xVelocity = xVelocity *(-1.03);
color = "#ff0000";
}
if (yPos+circleRadius>canvas.height || yPos-circleRadius<0){
yVelocity = yVelocity * (-1.03);
color = "#0000ff";
}
}
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(xPos, yPos, circleRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
timeStampOld = timeStamp;
if((xPos < (canvas.width+100)) && (xPos > (0-200)) && (yPos > (0-200)) && (yPos < (canvas.height+200))){
requestAnimationFrame(draw);
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var xPos = canvas.width/2;
var yPos = canvas.height/2;
var xVelocity = 0.45;
var yVelocity = 0.65;
var circleRadius = 40;
var color = "#000000";
var timeStampOld;
draw();
</script>
</body>
public/animation5.html 0 → 100644
View file @ 4df677d4
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="600" style="border:1px solid #000000;">
</canvas>
<script>
function draw(timeStamp){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 0.5;
var cHeight = canvas.height + (circleRadius*2);
for(i = 0; i < amountOfCircles; i++){
var yPos = (((timeStamp*0.05) + ((i/amountOfCircles)*cHeight))%cHeight)-circleRadius;
var xPos = Math.sin(yPos*0.05) *200 + 250;
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.arc(xPos, yPos, circleRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
requestAnimationFrame(draw);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var amountOfCircles = 50;
var circleRadius = 20;
draw();
</script>
</body>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment