Simple Curve Generator with Options

HTML
<form id="settings" onsubmit="return false"> Balls<br/> <input type="range" id="inNum" value="20" min="4" max="300"/><br/> Size<br/> <input type="range" id="inSize" value="20" min="2" max="100"/><br/> Speed<br/> <input type="range" id="inSpeed" value="5" min="1" max="20"/><br/> Delay<br/> <input type="range" id="inDelay" value="8" min="1" max="50"/><br/> <button id="btnSet">Go!</button><br/> Presets: <button id="preset1">Atomic</button> <button id="preset2">Flower</button> <button id="preset3">Spiro</button> <button id="preset4">YinYang</button> <button id="preset0">Default</button> </form>
CSS
body { background-color:#000; margin:0; min-height:100vh; overflow:hidden; font-family:Helvetica,Sans-serif; font-size:85%; } form { position:absolute; top:0; left:0; z-index:100; background-color:rgba(200,200,200,.8); padding:8px; font-size:80%; } form input[type=text] { width:30px; border:1px solid #000; text-align:center; } form button { margin:4px auto; border:1px solid #000; display:block; }
JAVASCRIPT
// Create Canvas. var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // Store all particles. var particles = []; // The default colorset. // Configure settings options var config = {}; var settings = document.getElementById('settings'); initSettings(); // Init. resize(); // Fire the Go! button. settings.btnSet.onclick(); // Attach canvas. document.body.appendChild(canvas); // Begin drawing. window.requestAnimationFrame(draw); // Sync canvas to window. window.onresize = resize; function createBall (angle) { var n = 1; var origin = [ canvas.width/2, canvas.height/2 ] for (var i=0; i<n; i++) { particles.push(new particle({ angle:angle, pos:[origin[0],origin[1]], size:config.size, speed:config.speed, index:i })); } } function start (delay) { clear(); config.toCreate = config.num; } // Drawing. var tick = 0; function draw () { for (var i=0; i<particles.length; i++) { var p = particles[i]; p.move(); p.draw(ctx); } fade(); window.requestAnimationFrame(draw); if (config.toCreate) { if (!(tick%(config.delay))) { createBall((180/config.num)*config.toCreate); config.toCreate--; } } tick++; } function particle (options) { this.angle = 0; this.curve = 0; this.pos = [0,0]; this.size = 100; this.speed = 1; this.tick = 0; this.color = 'rgba(255,64,64,.95)'; this.hue = 0; this.waveX = false; this.waveY = false; this.index = 0; // Override defaults. for (var i in options) { this[i] = options[i]; } this.move = function () { this.angle += this.curve; var radians = this.angle*Math.PI/180; this.pos[0] += Math.cos(radians)*this.speed*Math.cos(this.tick/50), this.pos[1] += Math.sin(radians)*this.speed*Math.cos(this.tick/50); this.hue++ this.color = 'hsl('+this.hue+', 80%, 65%)'; this.tick++; } this.draw = function (ctx) { ctx.strokeStyle = this.color; ctx.beginPath(); ctx.arc(this.pos[0],this.pos[1],this.size,0,2*Math.PI); ctx.stroke(); } } function preset (options) { for (var i in options) { if (settings[i].type == 'checkbox') { settings[i].checked = options[i]; continue; } settings[i].value = options[i]; } clear(); settings.btnSet.onclick(); } function fade () { ctx.beginPath(); ctx.fillStyle = 'rgba(0, 0, 0, .03)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fill(); } function clear () { ctx.beginPath(); ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fill(); particles.length = 0; } function resize () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } /* Common functions */ function rand(min, max) { return Math.random()*(max-min)+min; } function randColor(min, max) { var r = Math.floor(rand(min,max)), g = Math.floor(rand(min,max)), b = Math.floor(rand(min,max)); return 'rgba('+r+','+g+','+b+',1)'; } // Settings function preset (options) { for (var i in options) { settings[i].value = options[i]; } settings.btnSet.onclick(); } function initSettings () { settings.btnSet.onclick = function () { config.num = parseInt(settings.inNum.value); config.size = parseInt(settings.inSize.value); config.speed = parseInt(settings.inSpeed.value); config.delay = parseInt(settings.inDelay.value); start(config.delay); } // Presets. settings.preset0.onclick = function () { preset({ inNum:20, inSize:20, inSpeed:5, inDelay:8 }); } settings.preset1.onclick = function () { preset({ inNum:184, inSize:10, inSpeed:5, inDelay:6 }); } settings.preset2.onclick = function () { preset({ inNum:79, inSize:10, inSpeed:5, inDelay:6 }); } settings.preset3.onclick = function () { preset({ inNum:20, inSize:30, inSpeed:10, inDelay:3 }); } settings.preset4.onclick = function () { preset({ inNum:80, inSize:2, inSpeed:20, inDelay:1 }); } }
Expand for more options Login