by Dr. Jeyakesavan Veerasamy, CS faculty,

University of Texas at Dallas, USA.

While these materials have been targeted for workshops, they can certainly be used for self-paced learning from your home as well. Just that it can be more enjoyable experience if you have at least a partner to discuss and exchange ideas! Some background in programming concepts will enable you to enjoy the material – so I recommend you to complete Alice workshop first.

Start the workshop with one of the shows in following directory – click on any showX.html (press F11 and go full-screen for the full effect!): http://www.utdallas.edu/~jeyv/KAJS/shows

All with just ~20 lines of code in Processing.js that contain a few simple math equations! Math is beautiful :-) You will understand the code behind these images in this workshop, then you can write your own code & generate your own dazzling images!!

 Item Description Material Duration A1 Running the JavaScript programs in full screen:

·         Processing.js documentation: processingjs.org/reference

·         OpenProcessing IDE: www.openprocessing.org/sketch/create

·         Processing examples: processing.org/examples

A few advanced examples (mostly Recursion):

var depth = 4;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3, 1/3];

var turns = [-90, 90, 90, -90, 0];

var copies = 4;

var angle = 90;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200-length/2, 200-length/2);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(angle);

}

rotate(90);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(-angle);

}

Koch Curve & Snowflake (JavaScript)

var depth = 5;

var length = 325;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 3;

var angle = 120;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200-length/2, 200-length/3.5);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(angle);

}

var depth = 4;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3, 1/3];

var turns = [-90, 90, 90, -90, 0];

var copies = 4;

var angle = 90;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200-length/2, 200-length/2);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(angle);

}

var depth = 4;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3, 1/3];

var turns = [-90, 90, 90, -90, 0];

var copies = 4;

var angle = 90;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200-length/2, 200-length/2);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(angle);

}

var depth = 4;

var length = 250;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 4;

var angle = 90;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200-length/2, 200-length/2);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(angle);

}

var depth = 5;

var length = 250;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 4;

var angle = 90;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200-length/2, 200-length/2);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(angle);

}

rotate(90);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(-angle);

}

var depth = 4;

var length = 250;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 4;

var angle = 90;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200-length/2, 200-length/2);

for(var i=0 ; i<copies ; i++) {

fractal(depth,length);

rotate(angle);

}

Jewelry Design (JavaScript)

var depth = 5;

var length = 325;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 3;

var angle = 120;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200, 25);

rotate(90);

fractal(depth,length);

rotate(180);

fractal(depth,length);

var depth = 3;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 3;

var angle = 120;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200, 200);

rotate(90);

for(var i=0 ; i<36; i++) {

fractal(depth,length);

rotate(180);

fractal(depth,length);

rotate(180);

rotate(10);

}

var depth = 5;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 3;

var angle = 1;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200, 200);

rotate(90);

var draw = function() {

if (mouseIsPressed) {

rotate(angle);

angle+=5;

fractal(depth,length);

rotate(180);

fractal(depth,length);

rotate(180);

}

};

var depth = 5;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 3;

var angle = 1;

var r = random(0,255);

var g = random(0,255);

var b = random(0,255);

r += random(-20,20);

g += random(-20,20);

b += random(-20,20);

if (r > 255) {

r = 512 - r;

}

if (g > 255) {

g = 512 - g;

}

if (b > 255) {

b = 512 - b;

}

if (r < 0) {

r = -r;

}

if (g < 0) {

g = - g;

}

if (b < 0) {

b = - b;

}

stroke(r, g, b);

};

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200, 200);

rotate(random(0,360));

var draw = function() {

if (mouseIsPressed) {

rotate(angle);

angle+=5;

fractal(depth,length);

rotate(180);

fractal(depth,length);

rotate(180);

}

};

var depth = 5;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var angle = 1;

var r = random(0,255);

var g = random(0,255);

var b = random(0,255);

r += random(-20,20);

g += random(-20,20);

b += random(-20,20);

if (r > 255) {

r = 512 - r;

}

if (g > 255) {

g = 512 - g;

}

if (b > 255) {

b = 512 - b;

}

if (r < 0) {

r = -r;

}

if (g < 0) {

g = - g;

}

if (b < 0) {

b = - b;

}

stroke(r, g, b);

};

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200, 200);

rotate(random(0,360));

var draw = function() {

if (mouseIsPressed) {

rotate(angle);

angle+=3;

fractal(depth,length);

rotate(180);

}

};

var depth = 4;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 3;

var angle = 120;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200, 200);

rotate(90);

for(var i=0 ; i<6; i++) {

fractal(depth,length);

rotate(180);

fractal(depth,length);

rotate(180);

rotate(60);

}

var depth = 4;

var length = 200;

var factors = [1/3, 1/3, 1/3, 1/3];

var turns = [-60, 120, -60, 0];

var copies = 3;

var angle = 120;

var fractal = function(level, length) {

if (level < 1) {

line(0,0,length,0);

translate(length,0);

} else {

//line(0,0,length,0);

for(var i = 0 ; i < factors.length ; i++) {

fractal(level-1, length * factors[i]);

rotate(turns[i]);

}

}

};

angleMode="degrees";

translate(200, 150);

rotate(90);

for(var i=0 ; i<3; i++) {

fractal(depth,length);

rotate(180);

fractal(depth,length);

rotate(180);

rotate(120);

}

var depth = 3;

var drawTriangle = function(depth, x1, y1, x2, y2, x3, y3) {

triangle(x1, y1, x2, y2, x3, y3);

if (depth > 0) {

var x12 = (x1 + x2) / 2;

var x13 = (x1 + x3) / 2;

var x23 = (x2 + x3) / 2;

var y12 = (y1 + y2) / 2;

var y13 = (y1 + y3) / 2;

var y23 = (y2 + y3) / 2;

depth--;

drawTriangle(depth, x1, y1, x12, y12, x13, y13);

drawTriangle(depth, x2, y2, x12, y12, x23, y23);

drawTriangle(depth, x3, y3, x13, y13, x23, y23);

}

};

stroke(random(0,255), random(0,255), random(0,255));

strokeWeight(2);

drawTriangle(depth, 200,10, 10,390, 390,390);