Noise Abstraction akm2 Follow 2012-07-19 12:38:54 License: MIT License Fork16 Fav40 View13497 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 111 lines HTML 1 lines CSS 3 lines Noise Abstraction lib1 /** * PerlinNoise class, * Point class, * Color class, * extend, random * @see http://jsdo.it/akm2/fhMC */ var PERTICLE_NUM = 500; var STEP = 3; var Z_INC = 0.001; var S = 100; // Saturate var L = 50; // Lightness var canvas; var canvasWidth; var canvasHeight; var context; var perticles = []; var center = new Point(); var perlinNoise = new PerlinNoise(); var zoff = 0; function init() { canvas = document.getElementById('c'); document.addEventListener('resize', resize); resize(); for (var i = 0; i < PERTICLE_NUM; i++) { perticles[i] = new Perticle(); } document.addEventListener('click', click, false); setInterval(loop, 1000 / 60); } function resize() { canvasWidth = canvas.width = window.innerWidth; canvasHeight = canvas.height = window.innerHeight; context = canvas.getContext('2d'); context.lineWidth = 0.3; context.lineCap = context.lineJoin = 'round'; center.set(canvasWidth / 2, canvasHeight / 2); } function click() { context.save(); context.fillStyle = 'rgba(255, 255, 255, 0.8)'; context.fillRect(0, 0, canvasWidth, canvasHeight); context.restore(); perlinNoise.seed(new Date().getTime()); } function loop() { var p, latest, color, angle; for (var i = 0, len = perticles.length; i < len; i++) { p = perticles[i]; latest = p.latest; color = p.color; context.beginPath(); context.strokeStyle = color.toString(); context.moveTo(latest.x, latest.y); context.lineTo(p.x, p.y); context.stroke(); latest.set(p); angle = Math.PI * 6 * perlinNoise.noise(p.x / canvasWidth * 1.75, p.y / canvasHeight * 1.75, zoff); p.offset(Math.cos(angle) * STEP, Math.sin(angle) * STEP); if (color.a < 1) color.a += 0.005; if (p.x < 0 || p.x > canvasWidth || p.y < 0 || p.y > canvasHeight) { p.reborn(); } } zoff += Z_INC; } /** * Perticle */ function Perticle() { Point.call(this); this.latest = new Point(); this.color = new Color.HSLA(0, S, L, 0); this.reborn(); } Perticle.prototype = extend({}, Point.prototype, { reborn: function() { this.set(random(canvasWidth), random(canvasHeight)); this.latest.set(this); this.age = 0; this.color.h = center.subtract(this).angle() * 180 / Math.PI; this.color.a = 0; } }); // Init window.addEventListener ? window.addEventListener('load', init, false) : window.load = init; <canvas id='c'></canvas> Noise Abstraction * { margin: 0; padding: 0; } body { background-color: #eee9e9; font: 30px sans-serif; } canvas { position: absolute; } /** * PerlinNoise class, * Point class, * Color class, * extend, random * @see http://jsdo.it/akm2/fhMC */ var PERTICLE_NUM = 500; var STEP = 3; var Z_INC = 0.001; var S = 100; // Saturate var L = 50; // Lightness var canvas; var canvasWidth; var canvasHeight; var context; var perticles = []; var center = new Point(); var perlinNoise = new PerlinNoise(); var zoff = 0; function init() { canvas = document.getElementById('c'); document.addEventListener('resize', resize); resize(); for (var i = 0; i < PERTICLE_NUM; i++) { perticles[i] = new Perticle(); } document.addEventListener('click', click, false); setInterval(loop, 1000 / 60); } function resize() { canvasWidth = canvas.width = window.innerWidth; canvasHeight = canvas.height = window.innerHeight; context = canvas.getContext('2d'); context.lineWidth = 0.3; context.lineCap = context.lineJoin = 'round'; center.set(canvasWidth / 2, canvasHeight / 2); } function click() { context.save(); context.fillStyle = 'rgba(255, 255, 255, 0.8)'; context.fillRect(0, 0, canvasWidth, canvasHeight); context.restore(); perlinNoise.seed(new Date().getTime()); } function loop() { var p, latest, color, angle; for (var i = 0, len = perticles.length; i < len; i++) { p = perticles[i]; latest = p.latest; color = p.color; context.beginPath(); context.strokeStyle = color.toString(); context.moveTo(latest.x, latest.y); context.lineTo(p.x, p.y); context.stroke(); latest.set(p); angle = Math.PI * 6 * perlinNoise.noise(p.x / canvasWidth * 1.75, p.y / canvasHeight * 1.75, zoff); p.offset(Math.cos(angle) * STEP, Math.sin(angle) * STEP); if (color.a < 1) color.a += 0.005; if (p.x < 0 || p.x > canvasWidth || p.y < 0 || p.y > canvasHeight) { p.reborn(); } } zoff += Z_INC; } /** * Perticle */ function Perticle() { Point.call(this); this.latest = new Point(); this.color = new Color.HSLA(0, S, L, 0); this.reborn(); } Perticle.prototype = extend({}, Point.prototype, { reborn: function() { this.set(random(canvasWidth), random(canvasHeight)); this.latest.set(this); this.age = 0; this.color.h = center.subtract(this).angle() * 180 / Math.PI; this.color.a = 0; } }); // Init window.addEventListener ? window.addEventListener('load', init, false) : window.load = init; <canvas id='c'></canvas> * { margin: 0; padding: 0; } body { background-color: #eee9e9; font: 30px sans-serif; } canvas { position: absolute; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author akm2 http://codepen.io/akm2 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/ncsw/js"></script> art&design noise Discussion Questions on this code? Tags art&design colorful flow generative noise Favorite by plexus9517 mevius6 peddabalashi tsubao moonblogger thatsparks cyclops0913 tjoen monocore1934 Sebastien_Ko clanbalache olleh fallen zz85 nami.723 iijijii satosu naoiwata nenjiru TSHiYK toyoshim yasuaki Wong.Hin.Chi Maran.Emil djankey asou_jp angelo peko jasmine88 edo_m18 reprimande sssvc Zed-K miz_mau lbraindamage gaziya goliatone: colorfulflowgenerative parroty: mysterious 0i0: colorfulflowgenerative chinchang: beautiful! Forked sort by latest page views favorite forked forked: Noise Abstraction anandprabhak 00 224 112/1/3 art&design noise forked: Noise Abstraction cg.abar 10 445 112/1/3 art&design noise forked: Noise Abstraction cmymikechu 12 1079 112/1/3 art&design noise forked: Noise Abstraction weemie 02 645 112/1/3 art&design noise 1 2 3 4NEXT>>