Color Ribbon Evan Follow 2011-07-09 11:33:02 License: MIT License Fork4 Fav2 View3430 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 38 lines HTML 1 lines CSS 1 lines The code has been intentionally shortened... I was trying to keep it under 1k bytes. Color Ribbon var c = document.getElementsByTagName('canvas')[0], a = c.getContext('2d'), w = c.width = window.innerWidth, h = c.height = window.innerHeight, f = h/16, //max fluctuation q, //array holding 2 points m = Math, r = 0, //radius value for calculating the spectrum u = m.PI*2, v = m.cos, z = m.random; a.globalAlpha = 0.6; i(); function i(){ a.clearRect(0,0,w,h); q=[{x:0,y:h/2+f},{x:0,y:h/2-f}]; //init 2 starting points while(q[1].x<w+f) d(q[0], q[1]); //draw triangles until we reach the other end of the screen } function d(i,j){ a.beginPath(); a.moveTo(i.x, i.y); a.lineTo(j.x, j.y); var k = j.x + (z()*2-0.5)*f, //get the x and y of a random third point to draw a triangle n = y(j.y); a.lineTo(k, n); a.closePath(); r-=u/-50; //shift color radius by a small amount a.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16); a.fill(); q[0] = q[1]; //shuffle points q[1] = {x:k,y:n}; } function y(p){ var t = p + (z()*2-1)*f; return (t>h||t<0) ? y(p) : t; //recursively get a target y within the window } document.body.addEventListener('click',i); <canvas id='world'></canvas> Color Ribbon body { background-color: #FFF; font: 30px sans-serif; margin:0; padding:0; overflow:hidden;} The code has been intentionally shortened... I was trying to keep it under 1k bytes. var c = document.getElementsByTagName('canvas')[0], a = c.getContext('2d'), w = c.width = window.innerWidth, h = c.height = window.innerHeight, f = h/16, //max fluctuation q, //array holding 2 points m = Math, r = 0, //radius value for calculating the spectrum u = m.PI*2, v = m.cos, z = m.random; a.globalAlpha = 0.6; i(); function i(){ a.clearRect(0,0,w,h); q=[{x:0,y:h/2+f},{x:0,y:h/2-f}]; //init 2 starting points while(q[1].x<w+f) d(q[0], q[1]); //draw triangles until we reach the other end of the screen } function d(i,j){ a.beginPath(); a.moveTo(i.x, i.y); a.lineTo(j.x, j.y); var k = j.x + (z()*2-0.5)*f, //get the x and y of a random third point to draw a triangle n = y(j.y); a.lineTo(k, n); a.closePath(); r-=u/-50; //shift color radius by a small amount a.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16); a.fill(); q[0] = q[1]; //shuffle points q[1] = {x:k,y:n}; } function y(p){ var t = p + (z()*2-1)*f; return (t>h||t<0) ? y(p) : t; //recursively get a target y within the window } document.body.addEventListener('click',i); <canvas id='world'></canvas> body { background-color: #FFF; font: 30px sans-serif; margin:0; padding:0; overflow:hidden;} use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? The code has been intentionally shortened... I was trying to keep it under 1k bytes. Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Evan URLhttp://www.evanyou.me Creative Technologist 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/3Z9r/js"></script> Discussion 0 answersLicense question Questions on this code? Favorite by Maran.Emil nicolagreco Forked sort by latest page views favorite forked forked: Color Ribbon Maran.Emil 01 540 39/1/1 art&design forked: Color Ribbon tinod 00 775 39/1/1 forked: Color Ribbon julienb 10 811 58/1/1 forked: Color Ribbon antonin.ader 00 566 39/1/1
