Category: Interaction Lab

Workshop

I attended the workshop on Object Oriented Programming organised by Tristan. This workshop went over the class category in Processing and when to use them. 

We made an example in order to create an emoji: 

float x;

ArrayList<Emoji> emojiList;

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

emojiList = new ArrayList<Emoji>();
for(int i=0; i<100; i++) {
emojiList.add( new Emoji(random(width), random(height), color(random(255), random(255), random(255)) ));
}}

void draw() {
background(255);
for(int i=0; i<emojiList.size(); i++) {
Emoji temp= emojiList.get(i);
temp.display();
}}

void mousePressed() {
emojiList.add( new Emoji(mouseX, mouseY, color(random(255), random(255), random(255))) );
float x = map(mouseX,0,width,width/4,3*width/4);
}

And in another class file called Emoji: 

class Emoji {
float x,y;
float size;
color clr;

Emoji(float startingX, float startingY, color startingColor) {
x= startingX;
y= startingY;
size= random(50,200);
clr = startingColor;
}

void display() {
fill(clr);
ellipse(x,y, size,size);
fill(255);
ellipse(x-size/4, y-size/6, size/4, size/2);
ellipse(x+size/4, y-size/6, size/4, size/2); }
}

The void mouse pressed was added in order to display a new emoji each time I click on the Canva, a new emoji appears:

We made an in class example using the map () function, in order to display the emojis only in a limited space on the canvas, no matter where we pressed on the canvas. 

For the exercise, I made a project which I will use in my final project of a fuse, so a line which would decrease in size from one side under a time constraint of one minute. I added an ‘if’ statement in order to make the line stop shrinking once its reached the other point (the position 0): 

Fuse f;

void setup() {
size(1000,800);
background(0,0,50);
f = new Fuse(width-290, height-250); //new Fuse
}

void draw() {
background(0,0,50);
f.display();
f.shrink();
}

and the Fuse class: 

class Fuse {
float x, y, fuseWidth, speed;
long iLength, itime;

Fuse(float tempX, float tempY) {
x= tempX;
y= height-250;

iLength = 600;
itime = millis() ;
speed = – iLength/6000.0;}

void display () {
stroke(255);
strokeWeight(10);
line(x-fuseWidth, y, x, y);}

void shrink () {
fuseWidth = speed * (millis()- itime) +iLength ;
if(fuseWidth<0) {
fuseWidth=0;
}} }

The result is as follows: 

Intro

This week we had workshops to help us with our projects. I chose the media manipulation workshop. In my project we are going to have images pop up by the press of a button so I did the same in my video recreation. The video I chose to recreate is the first section of the BTS dance “Fake Love”. They walk in a line to the left, so I had images move toward the left by the press of buttons. 

Here is the original video

Here it is in Processing

fake love but make it processing

From this workshop I was able to practice integrating images into the keyPressed() function. This will be important to my project, so it was very helpful. I hope to play with the code further so I can make it as efficient as possible. 

Processing Code

PImage photo1;
PImage photo2;
PImage photo3;
PImage photo4;
PImage photo5;
PImage photo6;
PImage photo7;

 void setup() {
size(1500,600);
  background(0);
  photo1 = loadImage("hi tae.jpg");
  photo2 = loadImage("yoongles.jpg");
  photo3 = loadImage("hobi.jpg");
  photo4 = loadImage("kook.jpg");
  photo5 = loadImage("jin.jpg");
  photo6 = loadImage("jim.jpg");
  photo7 = loadImage("joon.jpg");
}
void draw() {

if(keyPressed) {
  photo7.resize(200,200);
  photo6.resize(200,200);
  photo5.resize(200,200);
  photo4.resize(200,200);
  photo3.resize(200,200);
  photo2.resize(200,200);
  photo1.resize(200,200);
}
}
void keyPressed() {
 
  println(key);
    if (key == 'a' || key == 'A') {
   image(photo1, 1200, 300);
    }
  if (key == 'q' || key == 'Q') {
   image(photo2, 1000, 300);
  }  
  if (key == 'w' || key == 'W') {
    image(photo3, 800, 300);
  }  
  if (key == 'e' || key == 'E') {
    image(photo4, 600, 300);
  }
    if (key == 'r' || key == 'R') {
    image(photo5, 450, 300);
    }
      if (key == 't' || key == 'T') {
    image(photo6, 250, 300);
      }
        if (key == 'y' || key == 'Y') {
    image(photo7, 100, 300);
        }

}