Canvas

[[html]]
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>

<canvas id="canvas" width="2000" height="1000"></canvas>
<script>
// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 0);
};
})();

// Initializing the canvas
// I am using native JS here, but you can use jQuery,
// Mootools or anything you want
var canvas = document.getElementById("canvas");

// Initialize the context of the canvas
var ctx = canvas.getContext("2d");

// Set the canvas width and height to occupy full window
var W = 2000, H = 1000;
canvas.width = W;
canvas.height = H;

// Some variables for later use
seed = [],
f = 0,
ff=0
frameRate=0;
;
var rot=0;
var extra=0;
var fractal=[]
var totalMag=0;
var depth=3;
var parts=3;
var bounded=1;
var pointsonly=0;
var mod_factor=1;
var DEG_TO_RAD = (3.141592 * 2)/360;

var startTime = new Date().getTime();
// TRIANGLE
seed.push(new Vector(0,200));
seed.push(new Vector(60,200));
seed.push(new Vector(-120,200));
seed.push(new Vector(60,200));

// SQUARE
seed.push(new Vector(0,200));
seed.push(new Vector(90,200));
seed.push(new Vector(-90,200));
seed.push(new Vector(-90,200));
seed.push(new Vector(90,200));

//new_seed(parts);
function new_seed(parts) {

seed.length=0;
for (t=0;t<parts;t++) {
seed.push(
new Vector(
Math.random()*360,
10 + Math.random()*240
)
);
}
}

totalMag = getMag(seed);

fractal=create_fractal(seed,depth,rot);

function Vector(dir,mag) {
this.dir = dir;
this.mag = mag;
}

// event handling
window.onkeydown = keydownControl;
function keydownControl(e) {
if(e.keyCode==37) { // left arrow -1 iterations
depth—;
if ( depth < 0) {
depth=0;
}
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);

} else if (e.keyCode==39) { // right arrow +1 iterations
depth++;
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);

} else if (e.keyCode==38) { // up arrow right rotation
rot+=3.113/Math.pow(fractal.length,2);
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);

} else if (e.keyCode==40) { // down arrow left rotation
rot-=3.113/Math.pow(fractal.length,2);
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);

} else if (e.keyCode==68) { // d new design
new_seed(parts);
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);

} else if (e.keyCode==65) { // a +1 parts
parts++;
new_seed(parts);
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);

} else if (e.keyCode==90) { // z -1 parts
parts—;

if (parts <2) {
parts=2;
}
new_seed(parts);
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);

} else if (e.keyCode==66) { // b bounded
bounded = (bounded+1) % 2;

} else if (e.keyCode==67) { // c pointsonly
pointsonly = (pointsonly+1) % 2;

} else if (e.keyCode==49) { // 1 mod
mod_factor
;
if (mod_factor < 1 ) {
mod_factor=1;
}

} else if (e.keyCode==50) { // 2 mod++
mod_factor++;

} else if (e.keyCode==69) { // e elastic
derange(seed);
totalMag = getMag(seed);
fractal=create_fractal(seed,depth,rot);
}
}

function derange (seed) {
for (p=0; p < seed.length; p++) {
seed[p].dir += -.5/100 + Math.random()/100;
}

}
function erase() {
// Set the fill color to black
//ctx.fillStyle = "rgba(0,0,0,1)";
// BEIGE ‘
ctx.fillStyle = ’#F4B58F';

// This will create a rectangle of white color from the
// top left (0,0) to the bottom right corner (W,H)
ctx.fillRect(0,0,W,H);
}

function draw(f) {

// Call the paintCanvas function here so that our canvas
// will get re-painted in each next frame
erase();

// display

extra+=rot;
display_fractal(fractal);

// stats

ctx.fillStyle = 'black';
ctx.font = "32px Arial";
ctx.fillText("frame:"+ f, 0, 150);

var nowTime = new Date().getTime();

ff++;
if ( (nowTime - startTime) > 1000) {
startTime = nowTime;
frameRate=ff;
ff=0;

}
ctx.fillText("rate:"+ frameRate + "/s", 0, 200);

ctx.fillText("bounded:"+ bounded , 0, 250);

ctx.fillText("points only:"+ pointsonly , 0, 300);

ctx.fillText("parts:"+ parts, 0, 550);

ctx.fillText("depth:"+ Math.floor(depth * 100)/100, 0, 600);

ctx.fillText("lines:"+ Math.floor(fractal.length/mod_factor) , 0, 650);

ctx.fillText("mod: 1/"+ mod_factor , 0, 700);

//Finally call the update function
update();
}

function create_fractal(seed,depth,rot) {

var before=[];
var after=[];
var final=[];

if ( depth == 0 ) {
return(seed);
}
// before = seed
before.length=0;
for (k=0; k<seed.length; k++) {
before.push( (new Vector(seed[k].dir, seed[k].mag)) );
}

for (n=0; n < depth; n++) {

for (i=0; i< seed.length; i++) {
for (j=0; j< before.length; j++) {
if (j==0) {
after.push(
new Vector(
before[j].dir + seed[i].dir,
before[j].mag * ( seed[i].mag / totalMag)
)
);
} else {
after.push(
new Vector(
before[j].dir,
before[j].mag * ( seed[i].mag / totalMag)
)
);

}

}
}

// before = after
before.length=0;
for (k=0; k<after.length; k++) {
before.push( (new Vector(after[k].dir, after[k].mag )) );
}
// final=after;
final.length=0;
for (k=0; k<after.length; k++) {
final.push( (new Vector(after[k].dir, after[k].mag)) );
}
after.length=0;
}
return(final);

}
function display_fractal(fractal) {

var x=0;
var y=0;
var next=0;
var pointer=0;

var points=[];
points.push(new Vector(0,0));

for (z=0; z < fractal.length; z++) {

pointer+= fractal[z].dir

x+= fractal[z].mag * Math.cos( (pointer + next) * DEG_TO_RAD)
y+= fractal[z].mag * Math.sin( (pointer + next) * DEG_TO_RAD)

next+=extra;

points.push(new Vector(x,y));

}

if (bounded == 1 ) {
var max_delta=0;
for (e=0; e < points.length; e++) {
var delta = get_delta(points[e]);
if (delta > max_delta) {
max_delta = delta
}

}

for (p=0; p < points.length; p++) {
points[p].dir /= (max_delta/(canvas.height/2));
points[p].mag /= (max_delta/(canvas.height/2));

}

}

if (pointsonly == 1 ) {
for (p=0; p < points.length; p+= mod_factor) {
ctx.beginPath();

var rel_x = canvas.width/2 + points[p].dir;
var rel_y = canvas.height/2 - points[p].mag;
ctx.moveTo(rel_x,rel_y);
ctx.strokeStyle="black";
ctx.lineTo(rel_x+1,rel_y+1);
ctx.stroke();
ctx.closePath();

}

} else {

// ctx.lineDashOffset++;
for (p=0; p < points.length-1; p+= mod_factor) {

// if (p % parts == 0) {
// ctx.beginPath();
//
// var rel_x = canvas.width/2 + points[p].dir;
// var rel_y = canvas.height/2 - points[p].mag;
// ctx.moveTo(rel_x,rel_y);
// ctx.strokeStyle="white";
// ctx.lineWidth=3;
// var rel_x2 = canvas.width/2 + points[p+1].dir;
// var rel_y2 = canvas.height/2 - points[p+1].mag;
// ctx.lineTo(rel_x2,rel_y2);
// ctx.stroke();
//
// } else {
ctx.beginPath();

var rel_x = canvas.width/2 + points[p].dir;
var rel_y = canvas.height/2 - points[p].mag;
ctx.moveTo(rel_x,rel_y);
ctx.strokeStyle="black";
// ctx.lineWidth=3;
var rel_x2 = canvas.width/2 + points[p+1].dir;
var rel_y2 = canvas.height/2 - points[p+1].mag;
ctx.lineTo(rel_x2,rel_y2);
ctx.stroke();

// }
}

}

}

function get_delta (p) {

return ( Math.sqrt( p.mag*p.mag + p.dir*p.dir) );
}
function getMag (fractal) {
var x=0;
var y=0;
var pointer=0;
for (i=0; i < fractal.length; i++ ) {
pointer+= fractal[i].dir
x+= fractal[i].mag * Math.cos(pointer * DEG_TO_RAD)
y+= fractal[i].mag * Math.sin(pointer * DEG_TO_RAD)

}
return( Math.sqrt( (x*x) + (y*y) ) );

}

// Give every particle some life
function update() {
}

// Start the main animation loop using requestAnimFrame
function animloop() {
draw(f++);
requestAnimFrame(animloop);
}

animloop();
</script>
</body>
[[html]]