Skip to content

Instantly share code, notes, and snippets.

@joduplessis
Last active September 4, 2017 19:37
Show Gist options
  • Save joduplessis/f34ae4448d04fca6c8fb031dfaf61210 to your computer and use it in GitHub Desktop.
Save joduplessis/f34ae4448d04fca6c8fb031dfaf61210 to your computer and use it in GitHub Desktop.
Test showing the use of a scene graph / canvas abstraction layer instead managing the canvas context directly.
function init() {
"use strict" ;
var canvas = document.getElementsByTagName("canvas")[0] ;
var context = canvas.getContext("2d") ;
var particles = [] ;
var width = 1024 ;
var height = 680 ;
var color = "#283137" ;
var lineColor = "#647E8D" ;
var background = "#0E0F15" ;
var mouse = {x: 0, y: 0};
var maxSize = 5 ;
var count = 50 ;
var radius = 500 ;
var speed = 0.01 ;
canvas.width = width ;
canvas.height = height ;
canvas.style.background = "#0E0F15" ;
// create the particles
for ( var x = 0 ; x < count ; x++ ) {
generateParticle() ;
}
// generate a particle
function generateParticle() {
var randomX = Math.random() * width;
var randomY = Math.random() * height;
var randomR = Math.random() * maxSize;
particles.push({'x':randomX,'y':randomY,'r':randomR}) ;
}
// playhead
setInterval(function() {
for ( var x = 0 ; x < particles.length ; x++ ) {
var coodX = particles[x].x;
var coodY = particles[x].y;
var randomX = Math.random() ;
var randomY = Math.random() ;
particles[x].x = coodX - randomX * ((mouse.x-width/2)*speed) ;
particles[x].y = coodY - randomY * ((mouse.y-height/2)*speed) ;
if ( particles[x].x > width || particles[x].x < 0 || particles[x].y > height || particles[x].y < 0 ) {
generateParticle() ;
particles.splice(x, 1);
}
}
render() ;
}, 1) ;
// scene render
function render() {
context.clearRect(0, 0, canvas.width, canvas.height) ;
var randomParticle = Math.floor( Math.random() * 100 ) ;
//drawLine(particles[randomParticle+1].x,particles[randomParticle+1].y,particles[randomParticle].x,particles[randomParticle].y) ;
//drawLine(particles[randomParticle-1].x,particles[randomParticle-1].y,particles[randomParticle].x,particles[randomParticle].y) ;
for ( var x = 0 ; x < particles.length ; x++ ) {
context.fillStyle = color ;
context.beginPath();
context.arc(particles[x].x,particles[x].y,particles[x].r,0,2*Math.PI);
context.fill();
drawLine(particles[x+1].x,particles[x+1].y,particles[x].x,particles[x].y) ;
if ( ( mouse.x - particles[x].x < radius && mouse.x - particles[x].x > radius*-1 ) && ( mouse.y - particles[x].y < radius && mouse.y - particles[x].y > radius*-1 ) ) {
drawLine(particles[x].x,particles[x].y,mouse.x,mouse.y) ;
}
}
}
// draw line
function drawLine(fromX,fromY,toX,toY) {
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = lineColor;
context.moveTo(fromX, fromY);
context.lineTo(toX, toY);
context.stroke();
}
// mouse
document.addEventListener('mousemove', function(e){
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY;
}, false);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment