@@ -0,0 +1,170 @@ | ||
window.onload = init(); | ||
|
||
function init() { | ||
andyfry01
|
||
canvas = document.getElementById("canvas"); | ||
context = canvas.getContext("2d"); | ||
canvas.height = window.innerHeight; | ||
canvas.width = window.innerWidth; | ||
mouse = { x: 0, y: 0 }; | ||
colors = [ | ||
andyfry01
|
||
"#af0", | ||
"#7CD14E", | ||
"#1CDCFF", | ||
"#FFFF00", | ||
"#FF0000", | ||
"#aee137", | ||
"#bef202", | ||
"#00b2ff", | ||
"#7fff24", | ||
"#13cd4b", | ||
"#c0fa38", | ||
"#f0a", | ||
"#a0f", | ||
"#0af", | ||
"#000000", | ||
]; | ||
canvas.addEventListener("mousemove", MouseMove, false); | ||
canvas.addEventListener("mousedown", MouseDown, false); | ||
canvas.addEventListener("mouseup", MouseUp, false); | ||
window.addEventListener("resize", canvasResize, false); | ||
dotsHolder = []; | ||
mouseMove = false; | ||
mouseDown = false; | ||
for (i = 0; i < 1000; i++) { | ||
dotsHolder.push(new dots()); | ||
} | ||
Comment on lines
+3
to
+34
andyfry01
|
||
|
||
/*REQUEST ANIMATION FRAME*/ | ||
(function () { | ||
var lastTime = 0; | ||
var vendors = ["ms", "moz", "webkit", "o"]; | ||
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { | ||
window.requestAnimationFrame = | ||
window[vendors[x] + "RequestAnimationFrame"]; | ||
window.cancelAnimationFrame = | ||
window[vendors[x] + "CancelAnimationFrame"] || | ||
window[vendors[x] + "CancelRequestAnimationFrame"]; | ||
} | ||
|
||
if (!window.requestAnimationFrame) | ||
window.requestAnimationFrame = function (callback, element) { | ||
var currTime = new Date().getTime(); | ||
var timeToCall = Math.max(0, 16 - (currTime - lastTime)); | ||
var id = window.setTimeout(function () { | ||
callback(currTime + timeToCall); | ||
}, timeToCall); | ||
lastTime = currTime + timeToCall; | ||
return id; | ||
}; | ||
|
||
if (!window.cancelAnimationFrame) | ||
window.cancelAnimationFrame = function (id) { | ||
clearTimeout(id); | ||
}; | ||
})(); | ||
} | ||
Comment on lines
+36
to
+64
andyfry01
|
||
function canvasResize(event) { | ||
canvas.height = window.innerHeight; | ||
canvas.width = window.innerWidth; | ||
cancelAnimationFrame(animate); | ||
} | ||
function MouseUp(event) { | ||
if (mouseMove) { | ||
mouseMove = false; | ||
} | ||
if (mouseDown) { | ||
mouseDown = false; | ||
} | ||
} | ||
function MouseDown(event) { | ||
mouseDown = true; | ||
} | ||
function MouseMove(event) { | ||
mouse.x = event.pageX - canvas.offsetLeft; | ||
mouse.y = event.pageY - canvas.offsetTop; | ||
if (mouseMove) { | ||
context.lineTo(mouseX, mouseY); | ||
context.stroke(); | ||
} | ||
Comment on lines
+83
to
+87
andyfry01
|
||
} | ||
Comment on lines
+65
to
+88
andyfry01
|
||
function dots() { | ||
this.xPos = Math.random() * canvas.width; | ||
this.yPos = Math.random() * canvas.height; | ||
this.color = colors[Math.floor(Math.random() * colors.length)]; | ||
this.radius = Math.random() * 10; | ||
this.vx = Math.cos(this.radius); | ||
this.vy = Math.sin(this.radius); | ||
this.stepSize = Math.random() / 10; | ||
andyfry01
|
||
this.step = 0; | ||
this.friction = 7; | ||
this.speedX = this.vx; | ||
this.speedY = this.vy; | ||
} | ||
Comment on lines
+89
to
+101
andyfry01
|
||
|
||
dots.draw = function () { | ||
andyfry01
|
||
context.clearRect(0, 0, canvas.width, canvas.height); | ||
for (var c = 0; c < dotsHolder.length; c++) { | ||
andyfry01
|
||
dot = dotsHolder[c]; | ||
context.beginPath(); | ||
distanceX = dot.xPos - mouse.x; | ||
distanceY = dot.yPos - mouse.y; | ||
var particleDistance = Math.sqrt( | ||
distanceX * distanceX + distanceY * distanceY | ||
); | ||
var particleMouse = Math.max( | ||
Math.min(75 / (particleDistance / dot.radius), 7), | ||
1 | ||
); | ||
context.fillStyle = dot.color; | ||
dot.xPos += dot.vx; | ||
dot.yPos += dot.vy; | ||
if (dot.xPos < -50) { | ||
dot.xPos = canvas.width + 50; | ||
} | ||
if (dot.yPos < -50) { | ||
dot.yPos = canvas.height + 50; | ||
} | ||
if (dot.xPos > canvas.width + 50) { | ||
dot.xPos = -50; | ||
} | ||
if (dot.yPos > canvas.height + 50) { | ||
dot.yPos = -50; | ||
} | ||
context.arc( | ||
dot.xPos, | ||
dot.yPos, | ||
(dot.radius / 2.5) * particleMouse, | ||
0, | ||
2 * Math.PI, | ||
false | ||
); | ||
Comment on lines
+132
to
+139
andyfry01
|
||
context.fill(); | ||
if (mouseDown) { | ||
var minimumDistance = 164, | ||
andyfry01
|
||
distance = Math.sqrt( | ||
(dot.xPos - mouse.x) * (dot.xPos - mouse.x) + | ||
(dot.yPos - mouse.y) * (dot.yPos - mouse.y) | ||
), | ||
distanceX = dot.xPos - mouse.x, | ||
distanceY = dot.yPos - mouse.y; | ||
if (distance < minimumDistance) { | ||
var forceFactor = minimumDistance / (distance * distance), | ||
xforce = ((mouse.x - dot.xPos) % distance) / 7, | ||
yforce = ((mouse.y - dot.yPos) % distance) / dot.friction, | ||
forceField = (forceFactor * 2) / dot.friction; | ||
dot.vx -= forceField * xforce; | ||
dot.vy -= forceField * yforce; | ||
} | ||
if (dot.vx > dot.speed) { | ||
dot.vx = dot.speed / dot.friction; | ||
dot.vy = dot.speed / dot.friction; | ||
} else if (dot.vy > dot.speed) { | ||
dot.vy = dot.speed / dot.friction; | ||
} | ||
} | ||
} | ||
}; | ||
function animate() { | ||
requestAnimationFrame(animate); | ||
dots.draw(); | ||
} | ||
animate(); |
andyfry0113 days ago
Author
Owner
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
window.onload
isn't needed in this case. If thescript
tag for script.js was included in thehead
element ofindex.html
, you'd need to wait for thebody
content to load before running any code (otherwise stuff likedocument.getElementsByClassname
wouldn't have any elements to query!).Putting scripts in
head
used to be the convention, but now scripts are typically placed at the bottom of thebody
element. By the time the browser hits the script tag, all of the DOM that your script needs has already been rendered on the page, so you don't need to wait for the window to load at all.