Skip to content

Instantly share code, notes, and snippets.

@nbriz
Created May 9, 2013 15:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nbriz/5548364 to your computer and use it in GitHub Desktop.
Save nbriz/5548364 to your computer and use it in GitHub Desktop.
playing w/canvas >> logo/snake generative animation
/* Author: Branger_Briz
....***....
dXXXXXXXXXXXXXXXb
dXXXXXXXXXXXXXXXXXXb.
,dXXXXXXXXXXXXXXXXXXXXXb.
dXXXXXXXXXXXXXXXXXXXXXXXXb.
^ 9XXXP"`V```~VVVVV~''V''dXXXP ^
dX\ . )XP )XXX( 9XP . /XP
9X\/\ |XP .9X^XXP \P /\/\XXP
9X \XP' __/XP/\XXX\___ 9/X/ XXP'
\X \\ \Xb._/XXXXXP' '9XXXXX\..9XX/ 9P' /'
9X\' \\\/XXXXXXXXXP' . dXXXXXXXXXXX /P/ /XXP
\X\ \XXXXXXXXXXXP..db./XXXXXXXXXXXb. '9"
\x...\XXXx\XXXXXXXXXXXXXXXXXXXXXXXP''\Xx///> <xxx/
/XXX\..\\\XX/ \XXXXXX/|X|X|\XXXX/ \XXxx-._
/XXXXXXXX/ \ \XXX/|XXXXXXXX|\?. \XXXxx>
/XXXXXXXXX/ (XX|MM|MM|MM|M\\) \XXXXXX\\\.
/X******X/ 'V' 'V' \*******\\.
.-*XXX// _______________________ \XXXXx-.
./X******# | | '9##%**''.
.'****** | | '9XXxx.
/XXX****" | ___________ | '9XXXXX;.
/X*'' /XP' _____| |___________| | |X. 'XP.
."' /XXX|' | | |XXXx. '.
/XXP'' ' | | |\ 'XX\.
/XP' /XX\' | _________________ | dXXX\ 9X\
/X/ /XXP'' | |_________________| | 9**XX\. '-
"' /XXP'/XX\ | | /XX\ \XX\ "
9XP'/XXP'\ |_____________________________| /P\XXx.\Xx\ '
'9/ /XXP' `. .' \XXX\\XP'
|/ '9XP `. / \XXP \|
| 9XP `. .-' \XX| '
' |P' `._ _-' '9'
|' `-. /---|||---\ .-' '
' `-../ W3LC0M3 \..-'
| H4X0RZ |
\----|||----/
\###/
'V'
*/
var width, height, ctx;
var x, y;
var angle, spread, bool, opaci;
var intervalCir, intervalBool, intervalReset, intervalOpac;
//----------- SETUP --------------
function setup() {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
width = window.innerWidth,
height = window.innerHeight,
canvas.height = height;
canvas.width = width;
ctx = canvas.getContext('2d');
canvas.style.position = 'absolute';
canvas.style.left = '0px';
canvas.style.top = '0px';
canvas.style.zIndex = '0';
x = width/2; y = height/2; s = 25;
angle = 0;
opaci = 0.5;
intervalCir = setInterval(drawCir, 1000/40);
intervalBool = setInterval(bool, 1000);
intervalReset = setInterval(resetAngle, 10000);
intervalOpac = setInterval(opac, 2000);
}
//----------- circle --------------
function circle(x,y,s) {
ctx.strokeStyle = "#000";
ctx.fillStyle = "rgba(228, 63, 139, "+opaci+")";
ctx.beginPath();
ctx.arc(x,y,s,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();
ctx.fillStyle = "#fff";
ctx.fillRect(x-9,y-11,22,5);
ctx.fillRect(x-14,y-2,27,5);
ctx.fillRect(x-14,y+7,27,5);
ctx.fillRect(x-9,y-8,5,7);
ctx.fillRect(x+8,y-8,5,7);
ctx.fillRect(x-14,y+1,5,7);
ctx.fillRect(x+8,y+1,5,7);
}
//----------- functionz --------------
function bool() { bool = Math.random()*2;}
function resetAngle() { angle = 0; }
function opac() { opaci = Math.random()*1; }
//----------- DALE BRO-DEEER!! --------------
function drawCir() {
if(bool>1){ s+= .2;}else{s-=.2;}
if(s>35) { s = 25; }
if(s<25) { s = 25;}
ctx.fillStyle = "rgba(241,241,241,0.0)";
ctx.fillRect (0, 0, width, height);
angle += .1; spread = 1;
xC = spread * angle * Math.cos(angle);
yC = spread * angle * Math.sin(angle);
if (bool > 1) {
angle -= .2;
}
circle(x+=xC,y+=yC,s);
}
width = window.innerWidth;
height = window.innerHeight;
setup();
@GilberJr
Copy link

GilberJr commented Nov 6, 2013

Ey! I just try and its very Cool! I have a question, ¿How i draw several worms? THX!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment