Worms PESakaTFM Follow 2011-11-19 06:07:30 License: MIT License Fork0 Fav0 View319 a JavaScript port of "Draw worm by mouse gesture." by nutsu http://wonderfl.net/c/9os2 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 278 lines HTML 3 lines CSS 25 lines a JavaScript port of "Draw worm by mouse gesture." by nutsu http://wonderfl.net/c/9os2 Worms processingjs-1.3.6 jQuery v1.6.2 var vms = []; var MAX_NUM = 100; var N = 80; var col = 255; var frameRate = 60; var width; var height; var p; var px; var py; var canvas; /** on document ready we set some variables and start our interval I'm sure there are better ways of doing this without haveing to load jQuery, but to be honest, I have no idea what I'm doing when it comes to JS. I'm an AS3 developer just starting in the JS world. Grabbed some resize code off http://jsdo.it/pypupypa/kimokawa-biseibutsu **/ $(document).ready(function() { canvas = $('#canvas')[0]; p = new Processing(canvas); p.size(canvas.width, canvas.height); p.background( 0 ); p.noStroke(); px = p.mouseX; py = p.mouseY; var resizeEventHandler = function() { var bg = $('#bg'); var width = bg.width(); var height = bg.height(); canvas.width = width; canvas.height = height; }(); $(window).resize(resizeEventHandler); var interval = window.setInterval(draw, 1000 / frameRate); }); /** check is called from the draw function it simply calles createObj if the mouse pointer has moved at least 10px in either the x or y direction. It also removes excess worms if there is more then MAX_NUM it also draws a line from the last mouse position to the new current position. This just adds a little continuity to the worms as otherwise they look like they are being generated out of nothing. **/ var check = function() { var x0 = p.mouseX; var y0 = p.mouseY; var vx = x0 - px; var vy = y0 - py; var len = p.min( p.mag( vx, vy ), 50 ); if( len<10 ) return; mtx = new PMatrix2D(); mtx.rotate( p.atan2( vy, vx ) ); mtx.translate( x0, y0 ); createObj( mtx, len ); p.stroke(col); p.line( px, py, x0, y0 ); px = x0; py = y0; }; /** as the name suggests createObj creates a new worm **/ var createObj = function( mtx, len ) { var angle = p.random(p.PI/64,p.PI/6); if( p.random()>0.5 ) angle *= -1; var tmt = new PMatrix2D(); tmt.scale( 0.95, 0.95 ); tmt.rotate( angle ); tmt.translate( len, 0 ); var w = 0.5; var obj = new WormObject(); obj.c1x = obj.p1x = -w * mtx.c + mtx.tx; obj.c1y = obj.p1y = -w * mtx.d + mtx.ty; obj.c2x = obj.p2x = w * mtx.c + mtx.tx; obj.c2y = obj.p2y = w * mtx.d + mtx.ty; obj.vmt = mtx; obj.tmt = tmt; obj.r = angle; obj.w = len/20; obj.count = 0; vms.push( obj ); if( vms.length > MAX_NUM ) vms.shift(); }; /** drawWorm first randomly reverses the worms rotation then transforms the worm based on it's transform matrix (shrinking it and rotating it at the same time) finally it calculates the worms next position, drawing it out and setting the old vars equal to the new. Simple, right? **/ var drawWorm = function( obj ) { if( p.random()>0.9 ){ obj.tmt.rotate( -obj.r*2 ); obj.r *= -1; } obj.vmt.prepend( obj.tmt ); var cc1x = -obj.w*obj.vmt.c + obj.vmt.tx; var cc1y = -obj.w*obj.vmt.d + obj.vmt.ty; var pp1x = (obj.c1x+cc1x)/2; var pp1y = (obj.c1y+cc1y)/2; var cc2x = obj.w*obj.vmt.c + obj.vmt.tx; var cc2y = obj.w*obj.vmt.d + obj.vmt.ty; var pp2x = (obj.c2x+cc2x)/2; var pp2y = (obj.c2y+cc2y)/2; p.fill( col ); p.beginShape(); p.vertex( obj.p1x, obj.p1y ); p.bezierVertex( obj.c1x, obj.c1y, obj.c1x, obj.c1y, pp1x, pp1y ); p.vertex( pp2x, pp2y ); p.bezierVertex( obj.c2x, obj.c2y, obj.c2x, obj.c2y, obj.p2x, obj.p2y ); p.endShape(); obj.c1x = cc1x; obj.c1y = cc1y; obj.p1x = pp1x; obj.p1y = pp1y; obj.c2x = cc2x; obj.c2y = cc2y; obj.p2x = pp2x; obj.p2y = pp2y; }; /** this function is being called by the setInterval at a given frameRate. it first draws any worms that are already created (removing old worms) It then calls check() which will create new worms (if needed). finally it draws an overlay of transparent white over the whole canvas to fade things out. I don't like how this is done but I've failed to find a more effective meathod (as of yet). **/ var draw = function () { var len = vms.length; for( var i=0; i<len; i++ ) { var o = vms[i]; if( o.count<N ){ drawWorm( o ); o.count++; }else{ len--; vms.splice( i, 1 ); i--; } } check(); p.noStroke(); p.fill(0, 0, 0, 10); p.rect(0, 0, canvas.width, canvas.height); }; /** I'm thinking this object isn't really needed (at least the way I'm doing things) Maybe I should just use a generic Object To explain what these properties are though; We are drawing the worms not as lines, but as shapes. c1x and c1y are the control point coordinates for the first curve while c2x and c2y are the same but for the second. this gives us a worm of variable width and a smooth taper as it shrinks. count is the worms lifespan governed by the global var N. w is it's width r is it's angle vmt and tmt are both matricies where vmt is the current transform and tmt transforms vmt to give us our curve. **/ function WormObject() { this.c1x; this.c1y; this.c2x; this.c2y; this.p1x; this.p1y; this.p2x; this.p2y; this.w; this.r; this.count; this.vmt; this.tmt; } /** PMatrix2D is a selected copy and paste job from FMatrix2D.as which is part of the frocessing AS3 library. http://www.libspark.org/wiki/nutsu/Frocessing **/ function PMatrix2D() { this.a=1.0; this.b=0.0; this.c=0.0; this.d=1.0; this.tx=0.0; this.ty=0.0; this.prepend = function( mtx ) { var n11 = mtx.a * this.a + mtx.b * this.c; var n12 = mtx.a * this.b + mtx.b * this.d; var n21 = mtx.c * this.a + mtx.d * this.c; var n22 = mtx.c * this.b + mtx.d * this.d; var n31 = mtx.tx * this.a + mtx.ty * this.c + this.tx; var n32 = mtx.tx * this.b + mtx.ty * this.d + this.ty; this.a = n11; this.b = n12; this.c = n21; this.d = n22; this.tx = n31; this.ty = n32; }; this.rotate = function( angle ) { //c, s, -s, c, 0, 0 var s = Math.sin(angle); var cs = Math.cos(angle); var n11 = this.a * cs - this.b * s; var n12 = this.a * s + this.b * cs; var n21 = this.c * cs - this.d * s; var n22 = this.c * s + this.d * cs; var n31 = this.tx * cs - this.ty * s; var n32 = this.tx * s + this.ty * cs; this.a = n11; this.b = n12; this.c = n21; this.d = n22; this.tx = n31; this.ty = n32; }; this.scale = function( sx, sy ) { //sx,0,0,sx,0,0 this.a *= sx; this.b *= sy; this.c *= sx; this.d *= sy; this.tx *= sx; this.ty *= sy; }; this.translate = function( x, y ) { //1,0,0,1,x,y this.tx += x; this.ty += y; }; } <div id='bg'> <canvas id='canvas'></canvas> </div> Worms html { min-height:100%; overflow:auto; position:relative; z-index:1; background:#000; } body { min-height:100%; margin:0; padding:0; overflow:auto; position:relative; z-index:1; -webkit-text-size-adjust:none; } #bg { width:100%; height:100%; overflow:auto; position:fixed; z-index:1; min-height:100%; overflow:hidden; } a JavaScript port of "Draw worm by mouse gesture." by nutsu http://wonderfl.net/c/9os2 var vms = []; var MAX_NUM = 100; var N = 80; var col = 255; var frameRate = 60; var width; var height; var p; var px; var py; var canvas; /** on document ready we set some variables and start our interval I'm sure there are better ways of doing this without haveing to load jQuery, but to be honest, I have no idea what I'm doing when it comes to JS. I'm an AS3 developer just starting in the JS world. Grabbed some resize code off http://jsdo.it/pypupypa/kimokawa-biseibutsu **/ $(document).ready(function() { canvas = $('#canvas')[0]; p = new Processing(canvas); p.size(canvas.width, canvas.height); p.background( 0 ); p.noStroke(); px = p.mouseX; py = p.mouseY; var resizeEventHandler = function() { var bg = $('#bg'); var width = bg.width(); var height = bg.height(); canvas.width = width; canvas.height = height; }(); $(window).resize(resizeEventHandler); var interval = window.setInterval(draw, 1000 / frameRate); }); /** check is called from the draw function it simply calles createObj if the mouse pointer has moved at least 10px in either the x or y direction. It also removes excess worms if there is more then MAX_NUM it also draws a line from the last mouse position to the new current position. This just adds a little continuity to the worms as otherwise they look like they are being generated out of nothing. **/ var check = function() { var x0 = p.mouseX; var y0 = p.mouseY; var vx = x0 - px; var vy = y0 - py; var len = p.min( p.mag( vx, vy ), 50 ); if( len<10 ) return; mtx = new PMatrix2D(); mtx.rotate( p.atan2( vy, vx ) ); mtx.translate( x0, y0 ); createObj( mtx, len ); p.stroke(col); p.line( px, py, x0, y0 ); px = x0; py = y0; }; /** as the name suggests createObj creates a new worm **/ var createObj = function( mtx, len ) { var angle = p.random(p.PI/64,p.PI/6); if( p.random()>0.5 ) angle *= -1; var tmt = new PMatrix2D(); tmt.scale( 0.95, 0.95 ); tmt.rotate( angle ); tmt.translate( len, 0 ); var w = 0.5; var obj = new WormObject(); obj.c1x = obj.p1x = -w * mtx.c + mtx.tx; obj.c1y = obj.p1y = -w * mtx.d + mtx.ty; obj.c2x = obj.p2x = w * mtx.c + mtx.tx; obj.c2y = obj.p2y = w * mtx.d + mtx.ty; obj.vmt = mtx; obj.tmt = tmt; obj.r = angle; obj.w = len/20; obj.count = 0; vms.push( obj ); if( vms.length > MAX_NUM ) vms.shift(); }; /** drawWorm first randomly reverses the worms rotation then transforms the worm based on it's transform matrix (shrinking it and rotating it at the same time) finally it calculates the worms next position, drawing it out and setting the old vars equal to the new. Simple, right? **/ var drawWorm = function( obj ) { if( p.random()>0.9 ){ obj.tmt.rotate( -obj.r*2 ); obj.r *= -1; } obj.vmt.prepend( obj.tmt ); var cc1x = -obj.w*obj.vmt.c + obj.vmt.tx; var cc1y = -obj.w*obj.vmt.d + obj.vmt.ty; var pp1x = (obj.c1x+cc1x)/2; var pp1y = (obj.c1y+cc1y)/2; var cc2x = obj.w*obj.vmt.c + obj.vmt.tx; var cc2y = obj.w*obj.vmt.d + obj.vmt.ty; var pp2x = (obj.c2x+cc2x)/2; var pp2y = (obj.c2y+cc2y)/2; p.fill( col ); p.beginShape(); p.vertex( obj.p1x, obj.p1y ); p.bezierVertex( obj.c1x, obj.c1y, obj.c1x, obj.c1y, pp1x, pp1y ); p.vertex( pp2x, pp2y ); p.bezierVertex( obj.c2x, obj.c2y, obj.c2x, obj.c2y, obj.p2x, obj.p2y ); p.endShape(); obj.c1x = cc1x; obj.c1y = cc1y; obj.p1x = pp1x; obj.p1y = pp1y; obj.c2x = cc2x; obj.c2y = cc2y; obj.p2x = pp2x; obj.p2y = pp2y; }; /** this function is being called by the setInterval at a given frameRate. it first draws any worms that are already created (removing old worms) It then calls check() which will create new worms (if needed). finally it draws an overlay of transparent white over the whole canvas to fade things out. I don't like how this is done but I've failed to find a more effective meathod (as of yet). **/ var draw = function () { var len = vms.length; for( var i=0; i<len; i++ ) { var o = vms[i]; if( o.count<N ){ drawWorm( o ); o.count++; }else{ len--; vms.splice( i, 1 ); i--; } } check(); p.noStroke(); p.fill(0, 0, 0, 10); p.rect(0, 0, canvas.width, canvas.height); }; /** I'm thinking this object isn't really needed (at least the way I'm doing things) Maybe I should just use a generic Object To explain what these properties are though; We are drawing the worms not as lines, but as shapes. c1x and c1y are the control point coordinates for the first curve while c2x and c2y are the same but for the second. this gives us a worm of variable width and a smooth taper as it shrinks. count is the worms lifespan governed by the global var N. w is it's width r is it's angle vmt and tmt are both matricies where vmt is the current transform and tmt transforms vmt to give us our curve. **/ function WormObject() { this.c1x; this.c1y; this.c2x; this.c2y; this.p1x; this.p1y; this.p2x; this.p2y; this.w; this.r; this.count; this.vmt; this.tmt; } /** PMatrix2D is a selected copy and paste job from FMatrix2D.as which is part of the frocessing AS3 library. http://www.libspark.org/wiki/nutsu/Frocessing **/ function PMatrix2D() { this.a=1.0; this.b=0.0; this.c=0.0; this.d=1.0; this.tx=0.0; this.ty=0.0; this.prepend = function( mtx ) { var n11 = mtx.a * this.a + mtx.b * this.c; var n12 = mtx.a * this.b + mtx.b * this.d; var n21 = mtx.c * this.a + mtx.d * this.c; var n22 = mtx.c * this.b + mtx.d * this.d; var n31 = mtx.tx * this.a + mtx.ty * this.c + this.tx; var n32 = mtx.tx * this.b + mtx.ty * this.d + this.ty; this.a = n11; this.b = n12; this.c = n21; this.d = n22; this.tx = n31; this.ty = n32; }; this.rotate = function( angle ) { //c, s, -s, c, 0, 0 var s = Math.sin(angle); var cs = Math.cos(angle); var n11 = this.a * cs - this.b * s; var n12 = this.a * s + this.b * cs; var n21 = this.c * cs - this.d * s; var n22 = this.c * s + this.d * cs; var n31 = this.tx * cs - this.ty * s; var n32 = this.tx * s + this.ty * cs; this.a = n11; this.b = n12; this.c = n21; this.d = n22; this.tx = n31; this.ty = n32; }; this.scale = function( sx, sy ) { //sx,0,0,sx,0,0 this.a *= sx; this.b *= sy; this.c *= sx; this.d *= sy; this.tx *= sx; this.ty *= sy; }; this.translate = function( x, y ) { //1,0,0,1,x,y this.tx += x; this.ty += y; }; } <div id='bg'> <canvas id='canvas'></canvas> </div> html { min-height:100%; overflow:auto; position:relative; z-index:1; background:#000; } body { min-height:100%; margin:0; padding:0; overflow:auto; position:relative; z-index:1; -webkit-text-size-adjust:none; } #bg { width:100%; height:100%; overflow:auto; position:fixed; z-index:1; min-height:100%; overflow:hidden; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? a JavaScript port of "Draw worm by mouse gesture." by nutsu http://wonderfl.net/c/9os2 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/ex6a/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/PESakaTFM/worms" title="Worms">Worms - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Forked sort new page view favorite forked forked: Worms Hooker.Kuzya.. 00 24views 279/3/25 forked: Worms 0i0 00 48views 257/2/16 forked: Worms PESakaTFM 00 69views 252/1/9