2018318985

Bianca Hosch

[2018318985-blog]

- kiwi, 2019

[2018318985-blog]

- oranges, 2019

[2018318985-blog]

- pineapple, 2019

[2018318985-blog]

Final Work - 신청윤, 이하정, Bianca Hosch

We made a game called “Save us from fire house”. This was our final project for the course “Interactive Art” at Sungkyunkwan university.

What is it?

The goal of this game is to shoot water into the setup which implemented 4 holes of different sizes. If you shoot enough water the “fire” will go out. Four water level sensors will measure the sore. The higher your score is the more people you save from the house.

USED SENSORS and MODULES

4x Water level sensor

4x red LED lights

1x Arduino UNO

1x Breadboard

Bunch of cabels

USED HARDWARE to create the setup

1x large box

4x paper cups

4x straws

4x small boxes

How does it work?

We used “Arduino” hardware and “Processing” software to create this game. For measuring the water level the user shoots at the setup we used 4 water level sensors, which measured the water levels for each hole individually. 

How was it made?

We drilled some holes into the paper cups (sponsored by “Subway” where we get our dinner for most of the sessions from... no just kidding, we had to buy it :P) and applied a straw underneath so that the water would flow into the small boxes at the ground. After that, we cut out the holes for the users to shoot at and then glued the paper cups over the holes. Then, four water level sensors were attached to each of the small boxes to measure the amount of water flowing in. We used Velcro so that we can disassemble the sensors after the game is over and assemble them again in the boxes quickly to start a new game.

In our first sketch we thought about a servomotor opening a gate so that the water could flow out automatically but that turned out to be too difficult for us to do, so we decided to do that by hand.

Concept

We first thought about making people aware of virtual water but we couldn’t the connection between virtual water and a shooting range. So, in the middle of the making, our purpose seemed unclear, so we changed our concept to be more reasonable: save people from a burning house

Coding

We used Aduino to measure the water level and send the value to processing. Then with processing we implemented the GUI.

Of course you can download our code from here 

[2018318985-blog]

Before

After

Week 11 - I-House (Week 5)

This week we overworked one of our homework we did this semester.

PImage img; int windows = 6; float xPos[] = new float[windows]; float yPos[] = new float[windows];

IHouse h1 = new IHouse();

void setup(){  size(1250, 500);

 img = loadImage("skkuLogo.png"); }

void draw(){  background(0);

 h1.iHouse(); }

class IHouse{

   void iHouse(){

     stroke(0);      strokeWeight(1);

     fill(150);      rect(650, 75, 525, 325);      rect(50, 50, 650, 450);      rect(1075, 400, 100, 100);

     fill(50);      rect(100, 400, 75, 100);      rect(225, 400, 75, 100);      rect(350, 400, 100, 100);      rect(550, 400, 100, 100);

     fill(255, 255, 244);      rect(400, 400, 100, 100);      strokeWeight(1);      stroke(0);      line(450, 400, 450, 500);      noStroke();

     ellipse(525, 150, 100, 100);      image(img, 475, 100, 100, 100);

     String a = "International";      String b = "House";      fill(0, 102, 153);      textSize(25);      text(a, 400, 225);      text(b, 500, 250);

     hallway(275, 75);      //hallway(250, 175);      //hallway(250, 275);

     for(int i = 75; i < 300; i += 100){      window(100, i, false);      window(600, i, false);      }

     for(int i = 725; i < 1100; i += 150){        for(int j = 100; j < 350; j += 100){          room(i, j, false);        }      }

     for(int i = 100; i < 150; i+=10){        bar(100, i, 50);        bar(100, i + 100, 50);        bar(100, i + 2 * 100, 50);

       bar(275, i, 100);        bar(275, i + 100, 100);        bar(275, i + 2 * 100, 100);

       bar(600, i, 50);        bar(600, i + 100, 50);        bar(600, i + 2 * 100, 50);

       bar(725, i + 25, 100);        bar(725, i + 125, 100);        bar(725, i + 225, 100);

       bar(875, i + 25, 100);        bar(875, i + 125, 100);        bar(875, i + 225, 100);

       bar(1025, i + 25, 100);        bar(1025, i + 125, 100);        bar(1025, i + 225, 100);

       crossbar(750, i, 35);        crossbar(800, i, 35);

       crossbar(750, i + 100, 35);        crossbar(800, i + 100, 35);

       crossbar(750, i + 200, 35);        crossbar(800, i + 200, 35);

       crossbar(750 + 150, i, 35);        crossbar(800 + 150, i, 35);

       crossbar(750 + 150, i + 100, 35);        crossbar(800 + 150, i + 100, 35);

       crossbar(750 + 150, i + 200, 35);        crossbar(800 + 150, i + 200, 35);

       crossbar(750 + 150*2, i, 35);        crossbar(800 + 150*2, i, 35);

       crossbar(750 + 150*2, i + 100, 35);        crossbar(800 + 150*2, i + 100, 35);

       crossbar(750 + 150*2, i + 200, 35);        crossbar(800 + 150*2, i + 200, 35);      }

     crossbar(300, 75, 275);      crossbar(350, 75, 275);

     metalbarH(700, height - 75, 375);      metalbarH(700, height - 50, 375);

     for(int i = 700; i < 1075; i+= 25){        metalbarV(i, height-75, 50);      }

     streetlight(30, height-100);      streetlight(width-50, height-175);      streetlight(width-150, height-100);    }

   void hallway(float x, float y){      pushMatrix();      translate(x, y);

     fill(255, 255, 244);      rect(0, 0, 100, 275);

     fill(50);      rect(0, 75, 100, 25);      rect(0, 175, 100, 25);

     noStroke();      popMatrix();    }

   void window(float x, float y, boolean light){

     pushMatrix();

     //translate(x, y);      float mouse = dist(x, y, mouseX, mouseY);      if(mouse < 50){        light = true;      }

     if(light == true){        fill(255, 255, 244);      } else {        fill(50);      }      rect(x, y, 50, 75);

     popMatrix();    }

   void room(float x, float y, boolean light){

     pushMatrix();

     //translate(x, y);      float mouse = dist(x, y, mouseX, mouseY);      if(mouse < 50){        light = true;      }

     if(light == true){        fill(255, 255, 244);      } else {        fill(50);      }      rect(x, y, 100, 75);

     popMatrix();    }

   void bar(int x, int y, int l){

     strokeWeight(3);      stroke(0);

     line(x, y, x+l, y);

   }

   void crossbar(int x, int y, int l){

     strokeWeight(3);      stroke(0);

     line(x, y, x, y+l);

   }

   void streetlight(int x, int y){

     noStroke();      pushMatrix();      translate(x, y);

     fill(50);      rect(-5, 0, 10, 100);

     fill(255, 255, 244);      ellipse(0, 0, 25, 25);      fill(255, 255, 244, 100);      ellipse(0, 0, 75, 75);      popMatrix();    }

   void metalbarH(int x, int y, int l){      stroke(200);

     line(x, y, x+l, y);    }

   void metalbarV(int x, int y, int l){      stroke(200);

     line(x, y, x, y+l);    }

}

.zip-File

[2018318985-blog]

Week 6 - Traffic Lights

This week we started with Arduino. I decided to program two traffic lights that work against each other.

I needed to make a table to look which lights are on and when. Like this it was much easier for me to write the code

It doesn’t look good, but it works

int outpinR1 = 13; int outpinY1 = 12; int outpinG1 = 11;

int outpinR2 = 5; int outpinY2 = 6; int outpinG2 = 7;

void setup() {  // put your setup code here, to run once:

 pinMode(outpinR1, OUTPUT);  pinMode(outpinY1, OUTPUT);  pinMode(outpinG1, OUTPUT);

 pinMode(outpinR2, OUTPUT);  pinMode(outpinY2, OUTPUT);  pinMode(outpinG2, OUTPUT); }

void loop() {  // put your main code here, to run repeatedly:

 unsigned long currentTime = millis();

 if(currentTime % 25000 < 5000){    digitalWrite(outpinR1, HIGH);    digitalWrite(outpinY1, LOW);    digitalWrite(outpinG1, LOW);

   digitalWrite(outpinR2, LOW);    digitalWrite(outpinY2, LOW);    digitalWrite(outpinG2, HIGH);  }

 if(currentTime % 25000 > 5000 && currentTime % 25000 < 10000){    digitalWrite(outpinR1, HIGH);    digitalWrite(outpinY1, HIGH);    digitalWrite(outpinG1, LOW);

   digitalWrite(outpinR2, LOW);    digitalWrite(outpinY2, HIGH);    digitalWrite(outpinG2, LOW);  }

   if(currentTime % 25000 > 10000 && currentTime % 25000 < 15000){    digitalWrite(outpinR1, LOW);    digitalWrite(outpinY1, LOW);    digitalWrite(outpinG1, HIGH);

   digitalWrite(outpinR2, HIGH);    digitalWrite(outpinY2, LOW);    digitalWrite(outpinG2, LOW);  }

   if(currentTime % 25000 > 15000 && currentTime % 25000 < 20000){    digitalWrite(outpinR1, LOW);    digitalWrite(outpinY1, HIGH);    digitalWrite(outpinG1, LOW);

   digitalWrite(outpinR2, HIGH);    digitalWrite(outpinY2, HIGH);    digitalWrite(outpinG2, LOW);  }

   if(currentTime % 25000 > 20000){    digitalWrite(outpinR1, HIGH);    digitalWrite(outpinY1, LOW);    digitalWrite(outpinG1, LOW);

   digitalWrite(outpinR2, LOW);    digitalWrite(outpinY2, LOW);    digitalWrite(outpinG2, HIGH);  } }

link to .zip-folder

[2018318985-blog]

Week 5 - iHouse

You can see i House here from the front side. The lights in the room will turn on, when the cursor is over the window.

PImage img; int windows = 6; float xPos[] = new float[windows]; float yPos[] = new float[windows];

void setup(){  size(750, 500);

 img = loadImage("skkuLogo.png"); }

void draw(){  background(0);

 iHouse(); }

void iHouse(){  fill(150);  rect(50, 50, 650, 450);

 fill(50);  rect(100, 400, 100, 100);  rect(250, 400, 100, 100);  rect(400, 400, 100, 100);  rect(550, 400, 100, 100);

 fill(255, 255, 244);  rect(400, 400, 100, 100);  strokeWeight(1);  stroke(0);  line(450, 400, 450, 500);  noStroke();

 ellipse(525, 200, 100, 100);  image(img, 475, 150, 100, 100);

 hallway(300, 75);  hallway(300, 175);  hallway(300, 275);

 room(100, 75, false);  room(100, 175, false);  room(100, 275, false);

 room(600, 75, false);  room(600, 175, false);  room(600, 275, false);

}

void hallway(float x, float y){  pushMatrix();  translate(x, y);

 fill(255, 255, 244);  rect(0, 0, 150, 75);

 strokeWeight(5);  stroke(0);  line(0, 50, 150, 50);

 noStroke();  popMatrix(); }

void room(float x, float y, boolean light){

 pushMatrix();

 //translate(x, y);  float mouse = dist(x, y, mouseX, mouseY);  if(mouse < 50){    light = true;  }

 if(light == true){    fill(255, 255, 244);  } else {    fill(50);  }  rect(x, y, 50, 75);

 popMatrix(); }

link to .zip-file

[2018318985-blog]

Week 5 - Flowers

I animated the scene to give the illusion as you’re driving by. Sadly the video turned out really long, because my computer isn’t the best and needed it’s time to calculate.

int numFlowers = 10; int br = 700; float xPos[] = new float[numFlowers]; float yPos[] = new float[numFlowers]; float sunPos[] = new float[br]; float housePos[] = new float[br];

void setup(){  size(700, 500);

 for(int i = 0; i < numFlowers; i++){    xPos[i] = random(width);    yPos[i] = random(300, height);  }  //frameRate(15); }

void draw(){  background(135, 206, 235);

 noStroke();

 //grass  fill(34, 139, 34);  rect(0, 300, 700, 200);

 //sun  for(int i = 1; i < width; i++){    sunPos[i] += 1;    sun(sunPos[i], 75);  }

 //cabin  for(int i = 0; i < width; i++){    house(housePos[i], 200);

   if(housePos[i] < -100){      housePos[i] = width + 100;    } else {      housePos[i] += -5;    }  }

 //flowers  for(int i = 0; i < numFlowers; i++){    if(i % 2 == 0){      flowerRed(xPos[i], yPos[i]);    } else if (i % 3 == 0){      flowerYellow(xPos[i], yPos[i]);    } else{      flowerPurple(xPos[i], yPos[i]);    }

   if(xPos[i] < 0){      xPos[i] = width;    } else{      xPos[i] += -10;    }  }

}

void flowerRed(float x, float y){  pushMatrix();

 translate(x,y);

 fill(255, 0, 0);  flower();

 popMatrix(); }

void flowerYellow(float x, float y){  pushMatrix();

 translate(x, y);

 fill(225, 215, 0);  flower();

 popMatrix(); }

void flowerPurple(float x, float y){  pushMatrix();

 translate(x, y);

 fill(147, 112, 219);  flower();

 popMatrix(); }

void flower(){  stroke(0);  ellipse(15, 0, 25, 25);  ellipse(0, 15, 25, 25);  ellipse(-15, 0, 25, 25);  ellipse(0, -15, 25, 25);

 fill(218, 112, 214);  ellipse(0, 0, 20, 20); }

void sun(float x, float y){  pushMatrix();  translate(x, y);

 fill(255, 215, 0);

 ellipse(0, 0, 100, 100);  popMatrix(); }

void house(float x, float y){  pushMatrix();  translate(x, y);

 fill(139, 69, 19);  rect(0, 0, 100, 100);

 fill(160, 82, 45);  beginShape();  vertex(0, 0);  vertex(50, -50);  vertex(100, 0);  endShape();

 rect(25, 100, 25, -50);

 popMatrix(); }

link to .zip-file

[2018318985-blog]

Week 4 - Snowflakes

The size, color and position of the snowflakes are randomly generized. You can either generate a static picture or make it animated by disabeling noLoop();

Code

int shine = 60; int shineWidth = 1;

void setup(){  size(500, 500);  frameRate(10); }

void draw(){  background(100);

 noLoop();

 //Ice  fill(0, 128, 128, 20);  rect(0, 0, 500, 500);

 noStroke();  fill(100);

 ellipse(125, 125, 250, 250);  ellipse(125, 375, 250, 250);  ellipse(375, 125, 250, 250);  ellipse(375, 375, 250, 250);

 //Snowflakes  for(int i = 0; i < 500; i++){    noStroke();    fill(random(100, 255));    float r = random(15);    ellipse(random(500), random(500), r, r);  }

 //Window  stroke(0);  strokeWeight(20);  noFill();

 rect(0, 0, 500, 500);

 line(250, 0, 250, 500);  line(0, 250, 500, 250);

 //candle  noStroke();

 fill(255, 255, 224, 100); //lightyellow  ellipse(385, 425, shine, shine);  shine += shineWidth;  if(shine == 60 || shine == 70){    shineWidth *= -1;  }

 fill(255);  rect(375, 450, 20, 50);

 fill(255, 215, 0); //gold  ellipse(385, 425, 20, 40);

 fill(255, 140, 0); //darkorange  ellipse(385, 425, 10, 20);

 stroke(0);  strokeWeight(3);

 line(385, 430, 385, 450);

/*  //fir branch  noFill();  stroke(0, 100, 0);//darkgreen  strokeWeight(10);

 ellipse(125, 0, 250, 250);

 strokeWeight(2);  fill(0, 100, 0);  int y = 0;

 for(int i = 0; i < 250; i++){    for(int x = 0; x < 250; x++){      if(y < 125){        ellipse(x, y, 5, 20);        y++;      } else {        ellipse(x, y, 5, 20);        y--;      }    }  }

 noFill();  strokeWeight(10);  ellipse(375, 0, 250, 250);

 strokeWeight(2);  fill(0, 100, 0);

 for(int i = 0; i < 250; i++){    for(int x = 250; x < 500; x++){      if(y < 125){        y++;      } else {        y--;      } ellipse(x, y, 5, 20);    }  } */ }

link to .zip-file

[2018318985-blog]

Week 3 - Rainbow Mouse (Version 2)

All what I did basically is that the whole screen will light up in one specific color and not just the part where your cursor is in

void setup() {  size(600, 500); }

void draw(){  background(0);  stroke(255);

 /*  line(100, 0, 0, 500);  line(200, 0, 0, 500);  line(400, 0, 0, 500);  line(800, 0, 0, 500);  line(1600, 0, 0, 500);  */

 /*  line(100, 0, 100, 500); //red->orange  line(200, 0, 200, 500); //orange-> yellow  line(300, 0, 300, 500); //yellow->green  line(400, 0, 400, 500); //green->blue  line(500, 0, 500, 500); //blue-> purple  */

 noStroke();  if(mouseX > 0 && mouseX <= 100){    fill(255, 0 , 0); //red    rect(0, 0, 600, 500);  } else if(mouseX > 100 && mouseX <= 200){    fill(255, 128, 0); //orange    rect(0, 0, 600, 500);  } else if(mouseX > 200 && mouseX <= 300){    fill(255, 255, 0); //yellow    rect(0, 0, 600, 500);  }else if(mouseX > 300 && mouseX <= 400){    fill(0, 255, 0); //green    rect(0, 0, 600, 500);  }else if(mouseX > 400 && mouseX <= 500){    fill(0, 128, 255); //blue    rect(0, 0, 600, 500);  } else if(mouseX > 500 && mouseX <= 600){    fill(127, 0, 255); //purple    rect(0, 0, 600, 500);  } else {    fill(255);    textSize(30);    text("Out of range", 200, 50);  }

 fill(255);  textSize(10);  text("mouseX: " + mouseX + " " + "mouseY: " + mouseY, 450, 450); }

Link to .zip-file

[2018318985-blog]

Week 3.2 - Harry Potter (7.2) Battle of Hogwarts

Here you can see a little game I’ve programmed. You can control either Harry or Voldemort depending on which side of the screen your cursor is. When you press ENTER spells will be spoken.

int v = 250; int h = 250;

void setup(){  size(700, 500); }

void draw(){  background(0);

 fill(35);  rect(0, 200, 700, 200);

 //Voldemort  fill(255);  textSize(30);  text("Voldemort", 50, 100);  fill(0, 255, 0);  rect(50, 150, v, 25);  fill(65);  ellipse(100, 420, 50, 125);  rect(100, 385, 50, 10);  fill(200);  ellipse(100, 350, 40, 50);  //wand  fill(225);  rect(150, 387, 20, 5);  //eye  fill(255, 0, 0);  ellipse(110, 345, 10, 10);

 //Harry  fill(255);  textSize(30);  text("Harry", 575, 100);  fill(255, 0, 0);  rect(650, 150, -h, 25);  fill(128, 70, 10);  rect(550, 370, 50, 80);  rect(520, 385, 50, 10);  fill(30);  rect(560, 450, 25, 30);  fill(180);  ellipse(575, 350, 40, 50);  fill(0);  ellipse(575, 330, 50, 30);  noFill();  rect(555, 340, 20, 20);  fill(100, 60, 10);  ellipse(565, 350, 10, 10);  //wand  fill(100, 60, 10);  rect(500, 387, 20, 5);

 if(mouseX < 350){    if(keyPressed == true){      if(key == ENTER){        fill(0, 255, 0);        rect(170, 387, 350, 5);      

       if(h == 0){          textSize(50);          text("Voldemort wins!", 175, 250);        } else{          h = h - 10;        }      }    }  } else if(mouseX > 350){    if(keyPressed == true){      if(key == ENTER){        fill(255, 0, 0);        rect(500, 387, -350, 5);      

       if(v == 0){          textSize(50);          text("Harry wins!", 200, 250);        } else{          v = v - 10;        }      }    }  } }

Link to .zip-file

[2018318985-blog]

Week 3 - Rainbow Mouse (Test)

This is a video of my project of “Rainbow Mouse”. This project was realized with processing. In the bottom right corner you can see the coordinates where your cursor is at the moment. When your cursor is outside the window the message “Out of range” will appear.

void setup() {  size(600, 500); }

void draw(){  background(0);  stroke(255);

//I tried to make an actual rainbow, but the results didnt turned out as I wanted

 /*  line(100, 0, 0, 500);  line(200, 0, 0, 500);  line(400, 0, 0, 500);  line(800, 0, 0, 500);  line(1600, 0, 0, 500);  */

 /*  line(100, 0, 100, 500); //red->orange  line(200, 0, 200, 500); //orange-> yellow  line(300, 0, 300, 500); //yellow->green  line(400, 0, 400, 500); //green->blue  line(500, 0, 500, 500); //blue-> purple  */

 if(mouseX > 0 && mouseX <= 100){    fill(255, 0 , 0); //red    rect(0, 0, 100, 500);  } else if(mouseX > 100 && mouseX <= 200){    fill(255, 128, 0); //orange    rect(100, 0, 100, 500);  } else if(mouseX > 200 && mouseX <= 300){    fill(255, 255, 0); //yellow    rect(200, 0, 100, 500);  }else if(mouseX > 300 && mouseX <= 400){    fill(0, 255, 0); //green    rect(300, 0, 100, 500);  }else if(mouseX > 400 && mouseX <= 500){    fill(0, 128, 255); //blue    rect(400, 0, 100, 500);  } else if(mouseX > 500 && mouseX <= 600){    fill(127, 0, 255); //purple    rect(500, 0, 100, 500);  } else {    fill(255);    textSize(30);    text("Out of range", 200, 50);  }

 fill(255);  textSize(10);  text("mouseX: " + mouseX + " " + "mouseY: " + mouseY, 450, 450); }

Link to .zip-file

[2018318985-blog]

Week 3.1 - Spirited Away (Animation)

Here you can see my homework from this week of “Interactive Art”.

This is an animated version of my drawing from last week. I made the animation via Processing

//GLOBAL PARAMETERS /* Apperantly the animation won't work if I initialize the parameters locally */ int rectX = 30;

int cloudY = 175; int directionClouds = 1;

int waves = 200; int directionWaves = 1;

float directionRings = 1; float rotationRings = 0; int translationRings = 0;

int mouthWidth = 45; int mouthHeight = 20; int directionMouth = 1;

void setup(){  size(1000, 700);  frameRate(10); }

void draw(){ //BACKGROUND background(100, 200, 250); //Skyblue noStroke();

/* //test fill(255, 0, 0); rect(rectX, 30, 50, 50); rectX = rectX + 1; */

//Clouds fill(240, 245, 255); //aliceblue ellipse(200, cloudY, 600, 200); ellipse(750, cloudY, 600, 100);

cloudY += directionClouds; if(cloudY == 200 || cloudY == 175){  directionClouds *= -1; }

//sea fill(100, 200, 255); rect(0, 200, 1000, 100); stroke(240, 245, 255); line(0,waves, 1000, waves); line(0, waves + 10, 1000, waves + 10); line(0, waves + 20, 1000, waves + 20); line(0, waves + 30, 1000, waves + 30); line(0, waves + 40, 1000, waves + 40); line(0, waves + 50, 1000, waves + 50); line(0, waves + 60, 1000, waves + 60); line(0, waves + 70, 1000, waves + 70); //line(0, waves + 80, 1000, waves + 80); //line(0, waves + 90, 1000, waves + 90);

waves += directionWaves; if(waves == 200 || waves == 205){  directionWaves *= -1; }

noStroke();

//ground fill(87, 35, 7); //saddlebrown rect(0, 500, 1000, 100); fill(133, 60, 8); rect(-225, 500, 275, 75); rect(100, 500, 275, 75); rect(425, 500, 275, 75); rect(750, 500, 275, 75);

stroke(133, 60, 8); line(-225, 580, 50, 580); line(100, 580, 375, 580); line(425, 580, 700, 580); line(750, 580, 1000, 580); noStroke();

//bench fill(204, 0, 0); rect(0, 300, 1000, 200); stroke(0); strokeWeight(1); line(0, 425, 1000, 425); stroke(255, 100); line(0, 475, 1000, 475); noStroke();

//floor fill(102, 27, 4); rect(0, 600, 1000, 150); strokeWeight(2); stroke(77, 31, 10); line(0, 625, 1000, 625); line(0, 650, 1000, 650); line(0, 675, 1000, 675); noStroke();

//windows fill(87, 35, 7); rect(50, 0, 50, 300); rect(375, 0, 50, 300); rect(700, 0, 50, 300); rect(0, 300, 1000, 25);

noFill();

strokeWeight(20); stroke(115, 46, 7); rect(-225, -10, 275, 300); rect(100, -10, 275, 300); rect(425, -10, 275, 300); rect(750, -10, 275, 300);

//rings pushMatrix(); translate(translationRings, 0); rotate(radians(rotationRings));

strokeWeight(10); stroke(222, 184, 135); //burlywood ellipse(0, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25);

rotationRings += directionRings; if(rotationRings == 10 || rotationRings == -10){  directionRings *= -1; } popMatrix();

pushMatrix(); translate(translationRings + 135, 0); rotate(radians(rotationRings));

strokeWeight(10); stroke(222, 184, 135); //burlywood ellipse(0, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25);

rotationRings += directionRings; if(rotationRings == 10 || rotationRings == -10){  directionRings *= -1; } popMatrix();

pushMatrix();

translate(translationRings + 305, 0); rotate(radians(rotationRings));

strokeWeight(10); stroke(222, 184, 135); //burlywood ellipse(0, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25);

rotationRings += directionRings; if(rotationRings == 10 || rotationRings == -10){  directionRings *= -1; } popMatrix();

pushMatrix(); translate(translationRings + 460, 0); rotate(radians(rotationRings));

strokeWeight(10); stroke(222, 184, 135); //burlywood ellipse(0, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25);

rotationRings += directionRings; if(rotationRings == 10 || rotationRings == -10){  directionRings *= -1; } popMatrix();

pushMatrix(); translate(translationRings + 625, 0); rotate(radians(rotationRings));

strokeWeight(10); stroke(222, 184, 135); //burlywood ellipse(0, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25);

rotationRings += directionRings; if(rotationRings == 10 || rotationRings == -10){  directionRings *= -1; } popMatrix();

pushMatrix(); translate(translationRings + 775, 0); rotate(radians(rotationRings));

strokeWeight(10); stroke(222, 184, 135); //burlywood ellipse(0, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25);

rotationRings += directionRings; if(rotationRings == 10 || rotationRings == -10){  directionRings *= -1; } popMatrix();

pushMatrix(); translate(translationRings + 925, 0); rotate(radians(rotationRings));

strokeWeight(10); stroke(222, 184, 135); //burlywood ellipse(0, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25);

rotationRings += directionRings; if(rotationRings == 10 || rotationRings == -10){  directionRings *= -1; } popMatrix();

noStroke();

//FOREGROUND

//noFace fill(0, 0, 0, 200); //Body ellipse(500, 475, 300, 700);

fill(248, 248, 255); //ghostwhite ellipse(500, 250, 150, 225); //mask fill(0); ellipse(455, 225, 25, 20); //lefteye ellipse(545, 225, 25, 20); // righteye

ellipse(500, 325, mouthWidth, mouthHeight); //mouth mouthWidth += directionMouth; mouthHeight -= directionMouth; if(mouthWidth == 50 && mouthHeight == 15 || mouthWidth == 40 && mouthHeight == 25){  directionMouth *= -1; }

strokeWeight(7); stroke(0); line(445, 245, 460, 245); line(540, 245, 555, 245); strokeWeight(20); stroke(147, 112, 219); //lilac line(455, 200, 460, 175); line(545, 200, 540, 175); line(455, 265, 460, 290); line(545, 265, 540, 290);

//arms strokeWeight(10); stroke(100, 85, 100); line(400, 425, 415, 480); line(600, 425, 585, 480); noStroke();

//hamster stroke(0); strokeWeight(1); fill(230, 230, 250); //lavender ellipse(150, 270, 60, 100);

//Rußmännchen fill(0); ellipse(200, 300, 30, 30);

//Chihiro //Head fill(82, 44, 9); rect(225, 200, 100, 125); fill(255, 235, 205); //blanchedalmond rect(260, 300, 20, 20); rect(230, 200, 80, 100); line(260, 280, 280, 280); fill(82, 44, 9); ellipse(275, 200, 100, 80); ellipse(250, 250, 10, 13); ellipse(290, 250, 10, 13);

//legs pushMatrix(); scale(1.2); translate(-45, -75); fill(255, 235, 205); //blanchedalmond ellipse(250, 550, 30, 180); ellipse(300, 550, 30, 180); ellipse(250, 450, 30, 80); ellipse(300, 450, 30, 80); popMatrix();

fill(255, 105, 180); //hotpink rect(225, 435, 100, 30);

//body strokeCap(SQUARE); fill(255, 245, 238); //seashell rect(225, 320, 100, 130);

strokeWeight(50); stroke(144, 238, 144); //lightgreen line(250, 400, 300, 400);

stroke(0); strokeWeight(1);

fill(255, 235, 205); //blanchedalmond pushMatrix(); translate(-225, 280); rotate(radians(-45)); ellipse(225, 435, 20, 100); popMatrix(); pushMatrix(); translate(380, -100); rotate(radians(45)); ellipse(325, 435, 20, 100); popMatrix();

fill(255, 245, 238); //seashell rect(200, 320, 50, 100); rect(300, 320, 50, 100);

strokeCap(ROUND); stroke(144, 238, 144); //lightgreen strokeWeight(10);

line(255, 320, 270, 330); line(285, 320, 270, 330);

strokeCap(SQUARE); stroke(144, 238, 144); //lightgreen strokeWeight(50);

line(200, 375, 250, 375); line(300, 375, 350, 375);

strokeCap(ROUND); stroke(0); strokeWeight(1);

fill(255, 245, 238); //seashell rect(230, 600, 40, 40); rect(285, 600, 40, 40);

//arms fill(218, 165, 32); //goldenrod ellipse(250, 660, 50, 60); ellipse(300, 660, 50, 60);

}

/* //Spirit Man fill(0, 200); rect(750, 250, 250, 250); ellipse(900, 200, 150, 150); pushMatrix(); translate(100, -150); rotate(radians(10)); rect(775, 500, 100, 300); popMatrix(); rect(900, 500, 100, 300); */

Link to .zip-File

[2018318985-blog]

Week 2 - Spirited Away

This scene is from Hayao Miazaki’s “Spirited Away”.

I draw this scene via processing.

This is our homework from Week 2 of Interactive Art course at Sungkyunkwan University.

size(1000, 700);

//BACKGROUND background(100, 200, 250); //Skyblue noStroke();

//Clouds fill(240, 245, 255); //aliceblue ellipse(200, 175, 600, 200); ellipse(750, 175, 600, 100);

//sea fill(100, 200, 255); rect(0, 200, 1000, 100); stroke(240, 245, 255); line(0, 210, 1000, 210); line(0, 220, 1000, 220); line(0, 230, 1000, 230); line(0, 240, 1000, 240); line(0, 250, 1000, 250); line(0, 260, 1000, 260); line(0, 270, 1000, 270); //line(0, 280, 1000, 280); //line(0, 290, 1000, 290); noStroke();

//ground fill(87, 35, 7); //saddlebrown rect(0, 500, 1000, 100); fill(133, 60, 8); rect(-225, 500, 275, 75); rect(100, 500, 275, 75); rect(425, 500, 275, 75); rect(750, 500, 275, 75);

stroke(133, 60, 8); line(-225, 580, 50, 580); line(100, 580, 375, 580); line(425, 580, 700, 580); line(750, 580, 1000, 580); noStroke();

//bench fill(204, 0, 0); rect(0, 300, 1000, 200); stroke(0); strokeWeight(1); line(0, 425, 1000, 425); stroke(255, 100); line(0, 475, 1000, 475); noStroke();

//floor fill(102, 27, 4); rect(0, 600, 1000, 150); strokeWeight(2); stroke(77, 31, 10); line(0, 625, 1000, 625); line(0, 650, 1000, 650); line(0, 675, 1000, 675); noStroke();

//windows fill(87, 35, 7); rect(50, 0, 50, 300); rect(375, 0, 50, 300); rect(700, 0, 50, 300); rect(0, 300, 1000, 25);

noFill();

strokeWeight(20); stroke(115, 46, 7); rect(-225, -10, 275, 300); rect(100, -10, 275, 300); rect(425, -10, 275, 300); rect(750, -10, 275, 300);

//rings strokeWeight(10); stroke(222, 184, 135); //burlywood

ellipse(0, 50, 50, 50); ellipse(135, 50, 50, 50); ellipse(305, 50, 50, 50); ellipse(460, 50, 50, 50); ellipse(625, 50, 50, 50); ellipse(775, 50, 50, 50); ellipse(925, 50, 50, 50);

strokeWeight(30); stroke(205, 133, 63); //peru line(0, 0, 0, 25); line(135, 0, 135, 25); line(305, 0, 305, 25); line(460, 0, 460, 25); line(625, 0, 625, 25); line(775, 0, 775, 25); line(925, 0, 925, 25); noStroke();

//FOREGROUND

//noFace fill(0, 0, 0, 200); ellipse(500, 475, 300, 700); fill(248, 248, 255); //ghostwhite ellipse(500, 250, 150, 225); //mask fill(0); ellipse(455, 225, 25, 20); ellipse(545, 225, 25, 20); ellipse(500, 325, 40, 25); strokeWeight(7); stroke(0); line(445, 245, 460, 245); line(540, 245, 555, 245); strokeWeight(20); stroke(147, 112, 219); line(455, 200, 460, 175); line(545, 200, 540, 175); line(455, 265, 460, 290); line(545, 265, 540, 290); strokeWeight(10); stroke(100, 85, 100); line(390, 425, 400, 480); line(590, 425, 575, 480); noStroke();

stroke(0); strokeWeight(1); fill(230, 230, 250); //lavender ellipse(150, 270, 60, 100); fill(0); ellipse(200, 300, 30, 30);

//Chihiro //Head fill(82, 44, 9); rect(225, 200, 100, 125); fill(255, 235, 205); //blanchedalmond rect(260, 300, 20, 20); rect(230, 200, 80, 100); line(260, 280, 280, 280); fill(82, 44, 9); ellipse(275, 200, 100, 80); ellipse(250, 250, 10, 13); ellipse(290, 250, 10, 13);

//legs pushMatrix(); scale(1.2); translate(-45, -75); fill(255, 235, 205); //blanchedalmond ellipse(250, 550, 30, 180); ellipse(300, 550, 30, 180); ellipse(250, 450, 30, 80); ellipse(300, 450, 30, 80); popMatrix();

fill(255, 105, 180); //hotpink rect(225, 435, 100, 30);

//body fill(255, 245, 238); //seashell rect(225, 320, 100, 130);

strokeWeight(50); stroke(144, 238, 144); //lightgreen line(250, 400, 300, 400);

stroke(0); strokeWeight(1);

fill(255, 235, 205); //blanchedalmond pushMatrix(); translate(-225, 280); rotate(radians(-45)); ellipse(225, 435, 20, 100); popMatrix(); pushMatrix(); translate(380, -100); rotate(radians(45)); ellipse(325, 435, 20, 100); popMatrix();

fill(255, 245, 238); //seashell rect(200, 320, 50, 100); rect(300, 320, 50, 100);

stroke(144, 238, 144); //lightgreen strokeWeight(10);

line(255, 320, 270, 330); line(285, 320, 270, 330);

strokeWeight(50);

line(220, 375, 230, 375); line(320, 375, 330, 375);

stroke(0); strokeWeight(1);

fill(255, 245, 238); //seashell rect(230, 600, 40, 40); rect(285, 600, 40, 40);

fill(218, 165, 32); //goldenrod ellipse(250, 660, 50, 60); ellipse(300, 660, 50, 60);

/* //Spirit Man fill(0, 200); rect(750, 250, 250, 250); ellipse(900, 200, 150, 150); pushMatrix(); translate(100, -150); rotate(radians(10)); rect(775, 500, 100, 300); popMatrix(); rect(900, 500, 100, 300); */

colors: https://www.rapidtables.com/web/color/color-wheel.html