
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”;
}
[…] The 4th assignment was to organize our previous code (drawing sketch) into modular and reusable parts. We needed to organize by using functions. You can find the video for the code here –> Drawing Sketch […]