Author: Haiyan Zhang

In this recitation, work individually to create a Processing sketch that controls media (images or video) by manipulating that media’s attributes using a physical controller made with Arduino. Reflect on this week’s classes to guide you in your coding process, and think about how you can incorporate interactivity and computation into this week’s exercise.

I chose one screenshot image from one of my favorite documentaries called Life is Fruity. (image attached below)

import processing.serial.*;
Serial myPort;
int valueFromArduino;

PImage pimage;

void setup() {
  size(1440, 824);
  background(0);
  pimage = loadImage("pimage.png");
  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.

  myPort = new Serial(this, Serial.list()[ 5 ], 9600);
}


void draw() {
  // to read the value from the Arduino
 image(pimage,0,0,width,height);
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  if (valueFromArduino == 1){
  filter(BLUR,10);
 }
  println(valueFromArduino);//This prints out the values from Arduino
}

[code] int button = 6;

void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
}

void loop() {
// put your main code here, to run repeatedly:
int buttonstate = digitalRead(button) ;
Serial.write(buttonstate);

// too fast communication might cause some latency in Processing
// this delay resolves the issue.
delay(10);
}
[/code]

Above are respectively processing sketch and arduino sketch for this exercise. Basically, I used a button for the physical interaction to trigger the BLUR filter over the original image in processing. The video below shows the effect.

Document your work on your blog. Use this week’s reading, Computer Vision for Artist and Designers, to inspire you to write a reflection about the ways technology was used in your project.

The documentary itself is about two elderly people sharing their life stories in the countryside to the audience who are interested in and eager for encouraging power and wisdom from their life experiences. At the end of the documentary, as an audience, I witnessed death as well as life. Therefore I chose this image in which two of them are holding each other – showing trust and love towards each other. I want to trigger the blurry effect over the image to mimic the sight when someone is in tears, to earn a blurry sense of this life fruit. 

Nov 7

Step 1:

Make a function, similar to the one here, which displays some graphic of your own design.  It should take parameters such as x position, y position, and color to display the graphic in the desired way.  Your graphic should involve at least three different shapes.  Feel free to expand this function as much as you want, and make sure to run your function. 

Step 2: 

Create a for loop in the setup() to display 100 instances of your graphic in a variety of positions and colors.  Make sure to use the display function you created in Step 1.  Then move your for loop to the draw() loop, and note the difference

int Arrows = 100;

float posX[] = new float [Arrows];
float posY[] = new float [Arrows];
float size[] = new float [Arrows];
color c[] = new color [Arrows];

void setup(){
  size(600, 600);
  background(233,227,255);
  for (int i=0; i<Arrows; i++) {
    posX[i] = random(width);
    posY[i] = random(height);
    size[i] = random(4, 7);
    c[i] = color(random(255), random(255), random(255));
  }
  
  for(int i=0; i<Arrows; i++){
  shoot(posX[i],posY[i],size[i],c[i]);
  }
  
}

void shoot(float x, float y, float size, color c){
 strokeWeight(3);
 fill(c);
 rect(x,y,size*10,size);
 fill(255);
 triangle(x,y-size,x,y+size*2,x-size*3,y+size*0.5);
 fill(0);
 line(x+size*8,y,x+size*10,y-size*2);
 line(x+size*8,y+size,x+size*10,y+size*2);
 line(x+size*10,y,x+size*12,y-size*2);
 line(x+size*10,y+size,x+size*12,y+size*2);
}

Step 3:

Create three Arrays to store the x, y, and color data.  In setup(), fill the arrays with data using a for loop, then in draw() use them in another for loop to display 100 instances of your graphic (that’s two for loops total).  You can use this example to help you do this.  Make sure to use the display function you created in Step 1, and if you’ve added any other parameters to your display function you should create new arrays for them as well.

int Arrows = 100;

float posX[] = new float [Arrows];
float posY[] = new float [Arrows];
float size[] = new float [Arrows];
color c[] = new color [Arrows];

float speedX[] = new float [Arrows];


void setup(){
  size(600, 600);
  background(233,227,255);
    //speedX[i] = random(-3,0);

}


void draw(){
  background(233,227,255);
   for (int i=0; i<Arrows; i++) {
    posX[i] = random(width);
    posY[i] = random(height);
    size[i] = random(4, 7);
    c[i] = color(random(255), random(255), random(255));
   }
  for(int i=0; i<Arrows; i++){
  shoot(posX[i],posY[i],size[i],c[i]);
  posX[i] = posX[i]+speedX[i];
  }
}

void shoot(float x, float y, float size, color c){
 strokeWeight(3);
 fill(c);
 rect(x,y,size*10,size);
 fill(255);
 triangle(x,y-size,x,y+size*2,x-size*3,y+size*0.5);
 fill(0);
 line(x+size*8,y,x+size*10,y-size*2);
 line(x+size*8,y+size,x+size*10,y+size*2);
 line(x+size*10,y,x+size*12,y-size*2);
 line(x+size*10,y+size,x+size*12,y+size*2);
}

Step 4:

Add individual movement to each instance of your graphic by modifying the content of the x and y arrays.  Make sure that your graphics stay on the canvas (hint: use an if statement).

int Arrows = 100;

float posX[] = new float [Arrows];
float posY[] = new float [Arrows];
float size[] = new float [Arrows];
color c[] = new color [Arrows];

float speedX[] = new float [Arrows];


void setup(){
  size(600, 600);
  background(233,227,255);
    for (int i=0; i<Arrows; i++) {
    posX[i] = random(width);
    posY[i] = random(height);
    size[i] = random(4, 7);
    c[i] = color(random(255), random(255), random(255));
    speedX[i] = random(-3,0);
   }

}


void draw(){
    background(233,227,255);
  for(int i=0; i<Arrows; i++){
  shoot(posX[i],posY[i],size[i],c[i]);
  posX[i] = posX[i]+speedX[i];

  
  if (posX[i]> width || posX[i]<0) {
    speedX[i] = -speedX[i];
    }
  }
}

void shoot(float x, float y, float size, color c){
 strokeWeight(3);
 fill(c);
 rect(x,y,size*10,size);
 fill(255);
 triangle(x,y-size,x,y+size*2,x-size*3,y+size*0.5);
 fill(0);
 line(x+size*8,y,x+size*10,y-size*2);
 line(x+size*8,y+size,x+size*10,y+size*2);
 line(x+size*10,y,x+size*12,y-size*2);
 line(x+size*10,y+size,x+size*12,y+size*2);
}

Question 1:

In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

When the forloop is in setup(), the array of arrows only draw once which result in a still image. When the forloop is put in draw(), no matter if the background is updated in the drawloop, the arrows’ drawing is nonstoppable. 

Question 2:

What is the benefit of using arrays?  How might you use arrays in a potential project?

When a large amount of the same group of drawings is needed, then using arrays will save a lot of efforts and make the code tidy and clean. Also because all information are stored in the arrays, one only has to change the parameters in the arrays if many changes are wanted. I will use arrays when many images or sounds are needed so that I don’t have to load them to processing one by one. 

Nov 1

I developed interaction based on my last project from Recitation 5. Since there are two versions of the last project, two versions of interaction are also imagined and developed here. The difference is realized by merely changing the filling color and limiting the area in “while” function. 

MilkyWayNormal Part 1

MilkyWayNormal Part 2: It’s just too long and I had to trim the video and divide it into two parts. So it’s the same animation here. 

MilkyWayNormal Interaction Two : Yellow arc appears with the same radius as the white arc. The mousePressed function is put in the void draw() rather than separated as void mousePressed, which helps realize another kind of interaction. Long press mouse and the spectator will see a different picture.

One Frame Screenshot

MilkyWayNormal Interaction Two: Arc in background color creates another effect. 

MilkyWayIntense Part 1: Normal animation and interaction – the spectator presses the mouse to see random yellow/ red arcs appearing and covering the original white circle consisted of tiny arcs. 

MilkyWayIntense Part 2: Since “mousePressed” is void, so one press only enacts one group of random arcs to appear. As long as the spectator is not intentionally pressing the mouse, we will see the initial animation of white arcs (enabled by void draw()) start to “engulf” the yellow and red arcs. 

MilkyWayNormal Code
void setup(){
size(600,600);
background(20,30,45);
int r = 10;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+0.001;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;
}
}

void draw(){
fill(20,30,45);
circle(300,300,50);

float red=random(200,255);
float green=random(200,255);
float blue=random(200,255);

float x= random(100,500);
float y= random(100,500);
strokeWeight(1);
stroke(red,green,blue);
ellipse(x,y,1,1);

int r = 10;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+0.001;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;

POSSIBILITY TWO – YELLOW WITH CONTINUOUS INTERACTION IF MOUSE LONG PRESSED; ARC IN THE SAME RADIUS
// if (mousePressed){
// //int r=10;
// while (r < 400) {
// //float rad1=random(TWO_PI);
// radspeed=rad1+0.1;
// noFill();
// strokeWeight(1);
// stroke(243,238,0);
// arc(300,300, r, r, start, stop);
// radspeed=radspeed+0.0001;;
// r = r + 10;
//}
//}
}

//POSSIBILITY ONE – YELLOW AND RED WITH RANDOM SPEED 

//INTERACT ONLY WHEN MOUSE PRESSED

void mousePressed(){
if (mousePressed){
int r=10;

while (r<200) {
float rad1=random(TWO_PI);
float radspeed=rad1+1;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255,0,0);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;
}
while ( r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+1;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(245,238,0);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;
}

}
}

Caution: Due to the logic of language in Processing, I need to put this part of code 

“while (r<200) {
…
}” 

before 

“while (r<400) {
…
}” 

to let processing recognize what I want it to happen. If the order is reversed, then processing won’t be able to read the narrower restrictment, so the differentiated color effect won’t show neither. 

MikyWayIntense Animation + Interaction Code 
void setup(){
size(600,600);
background(20,30,45);
int r = 10;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+0.001;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;
}
}

void draw(){
//fill(20,30,45);
//circle(300,300,50);

float red=random(200,255);
float green=random(200,255);
float blue=random(200,255);

float x= random(100,500);
float y= random(100,500);
strokeWeight(1);
stroke(red,green,blue);
ellipse(x,y,1,1);

int r = 1;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+0.001;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 1;

void mousePressed(){
if (mousePressed){
int r=10;

while (r<200) {
float rad1=random(TWO_PI);
float radspeed=rad1+1;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255,0,0);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;
}
while ( r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+1;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(245,238,0);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;
r = r + 10;
}

}
}

Oct 25

Sol LeWitt, Wall Drawing #1180, installed at the Yale University Art Gallery, New Haven, Conn., 2017. 

Complete info of this work can be found here: https://artgallery.yale.edu/exhibitions/exhibition/sol-lewitt-wall-drawings-expanding-legacy

I chose Sol LeWitt’s drawing as my motif. I always enjoy seeing minimalist/ simplist images or projects for it visually charms and calms me. Spectators in front of this kind of work can easily fall into a sort of meditative mood. I want to create similar experience through processing. And the image generated needs to be as spontaneous as possible. To achieve this goal, (1) I used high contrast between colors of background and the groups of ellipses in the center; (2) a bunch of float variables are defined; (3) function random is utilized to create a spontaneous effect. Simultaneously in the background, random tiny ellipses in light colors pop up. So that the audience will experience two levels of activity in this animation. These ellipses are restricted into a rectangle area. To realize that, I also used the function “random”. The final project is simplist/ minimalist. I think it’s meditative too. However, the visual shock doesn’t last like Sol LeWitt’s work. 

MilkyWay

“For” function is commanded out in the actual code. It works in the same way as the while function part. So they can replace each other according to need. Meanwhile, by changing the value of radius from 10 to 1, also r=r+10 to r=r+1, it can be easily developed into an intensified version of MilkyWay. A screenshot , which resembles the motif work more, is also took. Furthermore, in order to have a simple still image, only the part void setup() is necessary. Again, by changing the value of variable rapspeed from “rapspeed = rad1+ 0.001” to “rapspeed = rad1+ random(0,3)”, the program will automatically generate different images of milky way each time the user starts the program. 

Caution: rapspeed = rad1 + random(x,y), y < 2π. Otherwise, it will generate full circles. 

MilkyWayIntense

Milky Way Code

void setup(){
size(600,600);
background(20,30,45);
int r = 10;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+0.001;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;
}
}

void draw(){
fill(20,30,45);
circle(300,300,50);

float red=random(200,255);
float green=random(200,255);
float blue=random(200,255);

float x= random(100,500);
float y= random(100,500);
strokeWeight(1);
stroke(red,green,blue);
ellipse(x,y,1,1);

int r = 10;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+0.001;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 10;
}

POSSIBILITY TWO 

//for(int r=10; r<400;r=r+10) {
//float rad1=random(QUARTER_PI);
//float radspeed=rad1;
//float start= random(rad1);
//float stop= random(radspeed);
//noFill();
//strokeWeight(1);
//stroke(255);
//arc(300,300, r, r, start, stop);
//radspeed=radspeed+0.01;
//}
}

MilkyWayIntense Code

void setup(){
size(600,600);
background(20,30,45);
}

void draw(){
//fill(20,30,45);
//circle(300,300,50);

float red=random(200,255);
float green=random(200,255);
float blue=random(200,255);

float x= random(100,500);
float y= random(100,500);
strokeWeight(1);
stroke(red,green,blue);
ellipse(x,y,1,1);

int r = 1;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+0.001;
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
radspeed=radspeed+0.0001;;
r = r + 1;

}

MilkyWayStill Code

void setup(){
size(600,600);
background(20,30,45);
int r = 10;
while (r < 400) {
float rad1=random(TWO_PI);
float radspeed=rad1+random(0,3);
float start= rad1;
float stop= radspeed;
noFill();
strokeWeight(1);
stroke(255);
arc(300,300, r, r, start, stop);
//radspeed=radspeed+100;
r = r + 10;
}
}

MilkyWayVersion1

MilkyWayIntense

MilkyWayStill