MENU

KLORF

KLORF is a web toy developed in three.js as a first step towards a city planning tool that we are discussing with our friends at wetland.io. Click the image below to launch KLORF. Be sure to play with the sliders and click and drag on the box(es).
Read More ›

spirograph(t)

The classic children's toy is a physical implementation of the Hypotrochoid. Different curves result from the choice of different parameters, in the form of disk sizes. Here we have a digital implementation, which allows us to see what happens if the parameters vary as a function of time. Programmed in the Processing language. View the code boolean toggleLoop = false;   void setup() {   noLoop();   size(800, 800);   fill(#ffffff);   strokeWeight(1);    }   void draw() {      int record=0;      translate(width/2,height/2);     noStroke();   rect(-width/2, -height/2, width, height);   stroke(0);     float R=0.3*height;   float ratio=0.3; //no less than 0.001   float r=R*ratio;   float d=r*(0.5+2*(0.5+0.5*sin(TWO_PI*frameCount/175-TWO_PI/4)));     int rolls=0;   float numerRolls0=round(1000*ratio);   float denomRolls0=1000;   float numerRolls1;   float denomRolls1;     float[] primes = {2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97, 101, 103, 107, 109, 113, 127, 131, 137, 139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 281, 283, 293, 307, 311, 313, 317, […]
Read More ›

99 Lines

99 Lines. The outer ends precess clockwise. The inner ends precess counter-clockwise at half the rate. Simple rules create entrancing patterns. Programmed in the Processing language. Displayed at Projector Party II; Somerville, MA; 2014. View the code boolean toggleLoop = false;   void setup() {   noLoop();   frameRate(80);   size(800, 800);   fill(255,255,255,255);   strokeWeight(3); }   void draw() {     background(#ffffff);   noStroke();   ellipse(width/2, height/2, 0.99*min(width, height), 0.99*min(width, height));   stroke(0,0,0,255);     float revCount = 6300; // multiple of 300     int numEnds = 99; // multiple of 3   float endRadius = 0.97*min(width/2, height/2);     float[] startX = new float[numEnds];   float[] startY = new float[numEnds];   float[] endX = new float[numEnds];   float[] endY = new float[numEnds];     for (int i = 0; i < numEnds; i = i+1) {     startX[i] = width/2+endRadius/2*cos(i*TWO_PI/numEnds-(frameCount-1)*TWO_PI/revCount);     startY[i] = height/2+endRadius/2*sin(i*TWO_PI/numEnds-(frameCount-1)*TWO_PI/revCount);     endX[i] = width/2+endRadius*cos(i*TWO_PI/numEnds+2*(frameCount-1)*TWO_PI/revCount);     endY[i] = height/2+endRadius*sin(i*TWO_PI/numEnds+2*(frameCount-1)*TWO_PI/revCount);   }     for (int i = 0; i < numEnds; i = i+1) {     line(startX[i], startY[i], endX[i], endY[i]);   }      if (toggleLoop == false) {       textBox();   }   }   […]
Read More ›