3rd assignment of the ICM class was to work with rule-based animation, motion, and interaction. I created a drawing interface where you can select your brush stroke from simple shapes and draw on the canvas using your mouse. Below you can find the video and the code for the assignment.

Drawing sketch from Danara Sarioglu on Vimeo.

String currentFigure = “no-shape”;

void setup() {
size(1200, 600);
background(0);
}
void draw() {
noStroke();
fill(150);
rect(0, 0, width/8, height/5);
rect(0, height*2/5, width/8, height/5);
rect(0, height*4/5, width/8, height/5);
fill(230);
rect(0, height/5, width/8, height/5);
rect(0, height*3/5, width/8, height/5);
rect(width/24, height/15, width/24, height/15);
ellipse(width/16, height/2, width/24, height/15);
fill(150);
triangle(width/16, height*4/15, width/24, height/3, width/12, height/3);
stroke(150);
line(width/12, height*10/15, width/24, height*11/15);
fill(230);
text(“Restart”, width/24, height*44/50, width/24, height/15);
if (currentFigure==”restart”){
fill(0);
rect(width/8,0,width*7/8,height);
}

}

void mouseReleased() {

currentFigure = chooseFigure(mouseX, mouseY);
}
void mouseDragged(){

if (currentFigure==”rectangle”&&mouseX>width/8){
noStroke();
fill(mouseX-random(0,255),mouseY-random(0,255),mouseY-random(0,255));
rect(mouseX,mouseY,10,10);
}
if (currentFigure==”triangle”&&mouseX>width/8){
noStroke();
fill(mouseX-random(0,255),mouseY-random(0,255),mouseY+random(0,255));
triangle(mouseX,mouseY,mouseX-5,mouseY+10,mouseX+5,mouseY+10);
}
if (currentFigure==”circle”&&mouseX>width/8){
noStroke();
fill(mouseX-random(0,255),mouseY-random(0,255),mouseY-random(0,255));
ellipse(mouseX,mouseY,10,10);
}
if (currentFigure==”line”&&mouseX>width/8){
stroke(mouseX-random(0,255),mouseY-random(0,255),mouseY+random(0,255));
line(pmouseX,pmouseY,mouseX,mouseY);
}

}
String chooseFigure(int x, int y) {
if (x<width/8 && y<height/5) {
return “rectangle”;
}
if (x<width/8 && y>height/5 && y<height*2/5) {
return “triangle”;
}
if (x<width/8 && y>height*2/5 && y<height*3/5) {
return “circle”;
}
if (x<width/8 && y>height*3/5 && y<height*4/5) {
return “line”;
}
if (x<width/8 && y>height*4/5 && y<height) {
return “restart”;
}
return “no-shape”;

}