Worms

PESakaTFM

2011-11-19 06:07:30

License: MIT License

Fork: 0

Fav: 0

View: 319

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;
	};
}

Worms

a JavaScript port of "Draw worm by mouse gesture." by nutsu http://wonderfl.net/c/9os2var 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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

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>

QR Code