JSFiddle - React, Tailwind, and code Playground
HTML
<body onload="init();"/>
CSS
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
color:#fff;
font: 14px 'HeavyDataRegular', Arial, sans-serif;
}
JavaScript
//This example inspired by a submission from one of my talks by Nic Daniel
// screen size variables
//var SCREEN_WIDTH = window.innerWidth,
// SCREEN_HEIGHT = window.innerHeight,
// HALF_WIDTH = window.innerWidth / 2,
// HALF_HEIGHT = window.innerHeight / 2,
var SCREEN_WIDTH = document.documentElement.clientWidth,
SCREEN_HEIGHT = document.documentElement.clientWidth,
HALF_WIDTH = window.innerWidth / 2,
HALF_HEIGHT = window.innerHeight / 2,
// mouse variables
mouseX = HALF_WIDTH,
mouseY = HALF_HEIGHT,
mouseVelX = 0,
mouseVelY = 0,
lastMouseX = mouseX,
lastMouseY = mouseY,
mouseDown = false,
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
// particle variables
particles = [],
MAX_PARTICLES = 100,
particleImageRed = new Image(),
particleImagePurple = new Image(),
particleImageGreen = new Image(),
particleImageBlue = new Image();
particleImageRed.src = 'http://www.theinterstellarcartographers.com/img/MyParticleRed.png';
particleImagePurple.src = 'http://www.theinterstellarcartographers.com/img/MyParticlePurple.png';
particleImageGreen.src = 'http://www.theinterstellarcartographers.com/img/MyParticleGreen.png';
particleImageBlue.src = 'http://www.theinterstellarcartographers.com/img/MyParticleBlue.png';
function init() {
// CANVAS SET UP
document.body.appendChild(canvas);
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
initMouseListeners();
animate();
}
//
function animate() {
mouseVelX = mouseX - lastMouseX;
mouseVelY = mouseY - lastMouseY;
lastMouseX = mouseX;
lastMouseY = mouseY;
// make some particles
makeParticle(3);
// clear the canvas
//context.fillStyle = "rgb(0,0,0)";
//context.fillStyle="rgba(0,0,0,0.4)";
//context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
context.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
// remove particles out of...