Archives for November 2020

Reflection after Reading 

In this recitation, I used a photoresistor on Arduino to control the play and pause of my media which is displayed through Processing. The initial of me trying this interaction is mainly to get myself more familiar with the usage of photoresistor as well as some basic interaction function about media in Processing. 

After reading the article, Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers, I have reflected on myself about my created interaction. In the article, it listed out several vivid examples of how computer vision interaction can be. Interacting with or creating one’s own video through body movements, detect people’s motion with the use of computer vision technique, and even embed or used to develop robots. Compared with those examples, my interaction that was done in the recitation seems far too simple. It seems like I have only done a simple test about how to use physical elements to control some basic properties of a simple short and already existing and chosen video. Therefore, if I have the chance, I want to learn more about how to make the users have a higher interaction level with the computer. For example, what I am going to do in my final project, trying to figure out how to let users draw a painting on the screen with body movement.

Video Documentation:

Code:

Arduino:

// LAB8 - 讀取光敏電阻 (v1)

int photocellPin = 2; // 光敏電阻 (photocell) 接在 anallog pin 2
int photocellVal = 0; // photocell variable

void setup() {
  Serial.begin(9600);
}

void loop() {
  // 讀取光敏電阻並輸出到 Serial Port 
  photocellVal = analogRead(photocellPin);
  Serial.println(photocellVal);
  int sensorValue = analogRead(A2);
  Serial.write(sensorValue);  
  delay(100);   
}

Processing: 

import processing.serial.*;
Serial myPort;
int sensorValue;
import processing.video.*;
Movie myMovie;
void setup() {
  size(300,500);
  background(0);
  myMovie = new Movie(this, "myMovie1.mp4");
  myMovie.play();
  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.

  myPort = new Serial(this, Serial.list()[13], 9600);
  }
  
void draw() {
  //background(0);
  // to read the value from the Arduino
  while ( myPort.available() > 0) {
    sensorValue = myPort.read();
  }
  println(sensorValue);//This prints out the values from Arduino
  if (myMovie.available()) {
    myMovie.read();
    //image(myMovie, 0, 0, width, height);
  }
  //image(myMovie, 0, 0, width, height);
  //if (sensorValue > 5 && sensorValue < 50){
  //  myMovie.pause();
  //}
  image(myMovie, 0, 0, width, height);
  if (sensorValue > 5 && sensorValue < 50){
    myMovie.pause();
  }
  else{
    myMovie.play();
  }
  
}

[In-class Exercise]

Interaction included: 

In this project, the users are making interactions with the computer through Arduino and Processing. The users are able to change the position of the two ends of the line to draw a piece of a painting by knobbing the two potentiometers. With the change of mouse positions, the users will finally be able to draw a painting. 

Video documentation:

Reflection on the Interaction:

The interaction is really interesting since the users can draw paintings without even using a pen. From the perspective of innovation, it is a really interesting interaction. However, maybe adding more sensors or other things may be able to enrich the user experience. For instance, we may read more indexes like the mouse positions or others to change the color of the painting.  

Code attached: 

Arduino:

void setup() {
  Serial.begin(9600);
}

void loop() {
  int sensor1 = analogRead(A0);
  int sensor2 = analogRead(A5);

  // keep this format
  Serial.print(sensor1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor2);
  Serial.println(); // add linefeed after sending the last sensor value

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

Processing: 

import processing.serial.*;

String myString = null;
Serial myPort;
float preX;
float preY;

int NUM_OF_VALUES = 2;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues;      /** this array stores values from Arduino **/


void setup() {
  size(800, 400);
  background(0);
  setupSerial();
}


void draw() {
  updateSerial();
  printArray(sensorValues);

  // use the values like this!
  // sensorValues[0] 
float posX = map(sensorValues[0],0,1023,0,width);
float posY = map(sensorValues[1],0,1023,0,height);
  // add your code
  stroke(255);
  line(preX,preY,posX,posY);
  //
  preX = posX;
  preY = posY;
}



void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[5], 9600);
  // Change the PORT_INDEX to 0 to find where your port is.

  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
  myString = null;

  sensorValues = new int[NUM_OF_VALUES];
}



void updateSerial() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = '\n'  Linefeed in ASCII
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

 

[Additional Homework]

Interaction included: 

Video documentation:

 

Reflection on the Interaction:

Code attached: 

Arduino:

void setup() {
  Serial.begin(9600);
}

void loop() {
  int sensor1 = digitalRead(9);
  int sensor2 = digitalRead(10);
  //int sensor3 = analogRead(A2);

  // keep this format
  Serial.print(sensor1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor2);
//  Serial.print(",");
//  Serial.print(sensor3);
  Serial.println(); // add linefeed after sending the last sensor value

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

 

Processing: 

import processing.serial.*;

String myString = null;
Serial myPort;


int NUM_OF_VALUES = 2;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
//int[] sensorValues;      /** this array stores values from Arduino **/
int preButtonValue0 = 0; //initial value of the first button is 0
int preButtonValue1 = 0;
int[] buttonValues;

boolean star1Display = false;
boolean star2Display = false; // initial state of the star display is false


void setup() {
  size(800, 500);
  background(0);
  setupSerial();
}


void draw() {
  updateSerial();
  printArray(buttonValues);
  background(0);
  // use the values like this!
  // sensorValues[0] 

  if (buttonValues[0] == 1 && buttonValues[0] != preButtonValue0){
    star1Display = !star1Display;
  }
   if (buttonValues[1] == 1 && buttonValues[1] != preButtonValue1){
    star2Display = !star2Display;
  }
  if (star1Display){
  pushMatrix();
  translate(width*0.3, height*0.5);
  rotate(frameCount / 400.0);
  star(0, 0, 80, 100, 40); 
  popMatrix();
  }
  
  if (star2Display){
  pushMatrix();
  translate(width*0.7, height*0.5);
  rotate(frameCount / -100.0);
  star(0, 0, 30, 70, 5); 
  popMatrix();
  }

  //previous value of button is also changing so we update it as well
  preButtonValue0 = buttonValues[0];
  preButtonValue1 = buttonValues[1];
  // add your code
  //pushMatrix();
  //translate(width*0.2, height*0.5);
  //rotate(frameCount / 200.0);
  //star(0, 0, 5, 70, 3); 
  //popMatrix();
  
  //pushMatrix();
  //translate(width*0.5, height*0.5);
  //rotate(frameCount / 400.0);
  //star(0, 0, 80, 100, 40); 
  //popMatrix();
  
  //pushMatrix();
  //translate(width*0.8, height*0.5);
  //rotate(frameCount / -100.0);
  //star(0, 0, 30, 70, 5); 
  //popMatrix();
  //
}

void star(float x, float y, float radius1, float radius2, int npoints) {
  float angle = TWO_PI / npoints;
  float halfAngle = angle/2.0;
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius2;
    float sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[13], 9600);
  // WARNING!
  // You will definitely get an error here.
  // Change the PORT_INDEX to 0 and try running it again.
  // And then, check the list of the ports,
  // find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----" 
  // and replace PORT_INDEX above with the index number of the port.

  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
  myString = null;

  buttonValues = new int[NUM_OF_VALUES];
}



void updateSerial() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = '\n'  Linefeed in ASCII
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          buttonValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

 

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().

Having a for loop in setup() means that once the processing starts to work, the for loop will finish at once and display all the outcomes directly on the screen/canvas. However, when putting the for loop in draw(), although we human beings may not be able to observe very obvious distinctions, the function is actually running round by round after the processing starts. So, the outcomes are actually changing, or to say, adding to the previous one all the time. 

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

By using arrays, we can simply and directly have many different but also well-organized values of variables. Before having an array, if we want to create two different circles moving in different directions or speeds, we have to create each variable two times. However, with the use of an array, we can simply create one array instead, and reach the same outcomes. 

In my project, I will potentially use arrays to store the continuous values that are extracted from the sensors on the Arduino so as to give users continuous changing feedback to make the experience richer. 

Below are my code and video-documentation: 

int n = 100;
float[] x = new float[n];
float[] y = new float[n];
float[] d = new float[n];
int[] r = new int[n];
int[] g = new int[n];
int[] b = new int[n];
float speedX[] = new float[n];
float speedY[] = new float[n];

void setup(){
  size(1000,600);
  background(255);
  for(int i =0; i<n; i=i+1){
    x[i] = random(width);
    y[i] = random(height);
    d[i] = random(10,200);
    r[i] = int(random(0,255));
    g[i] = int(random(0,255));
    b[i] = int(random(0,255));
    speedX[i] = random(2,10);
    speedY[i] = random(6,12);
  }
  
}

void draw(){
   for (int i=0; i<n; i++){
    display(x[i], y[i], d[i],r[i],g[i],b[i]);
    //face (posX[i], posY[i], color(random(255),random(255),random(255)),size[i])
  }
  move();
  bounce();
}

void display(float x, float y, float d, int r, int g, int b) {
  //Use these parameters to create your graphics
  fill(r,g,b);
  noStroke();
  circle(x,y,d);
  fill(r,g,b+d);
  noStroke();
  rect(x=d,y-d,x+d,y+d);
  fill(r,g,b+d);
  noStroke();
  triangle(x-d,y+d,x+d,y-d,x-d,y=d);
}

void move(){
  for (int i=0; i<n; i++){
  x[i] = x[i] + speedX[i];
  y[i] = y[i] + speedY[i];
  }
}
void bounce(){
  for (int i=0; i<n; i++){
  if(x[i]>(width-10/2) || x[i]<(0+10/2)){
    speedX[i] = -speedX[i];
  }
  if(y[i]>(height-10/2) || y[i]<(0+10/2)){
    speedY[i] = -speedY[i];
  }
  }
}

 

Below are the code and video-documentation for the additional homework:

//how many circles are there 
int col=25, row=25;
int totalNum = col*row;
int padding = 140;
int defaultSize = 10;
//in the outcomes we can see that the positions of the circles have slightly changed
float [] xPositionsOriginal = new float [totalNum];
float [] yPositionsOriginal = new float [totalNum];
//currentlt changing positions of th circles
float [] xPositions = new float [totalNum];
float [] yPositions = new float [totalNum];

float [] sizeFactors = new float [totalNum];

//lerp value
float lerpFactors = 0.05;

void setup(){
 size(800,800);
 
 for (int i = 0; i<col; i++){
   for (int j = 0; j< row; j++){
     //i = j, value: 0-24
     int index = i + j * row;
     xPositionsOriginal [index] = map (i, 0, col-1, padding, width-padding);
     yPositionsOriginal [index] = map (j, 0, row-1, padding, height-padding);
     //set positions to the original ones
     xPositions [index] = xPositionsOriginal [index];
     yPositions [index] = yPositionsOriginal [index];
     sizeFactors[index] = 1.0;
   }
 } 
}

void draw(){
 background(255);
 for (int i= 0; i<totalNum; i++){
   //distance between the mouse and circle positions
   float offset = dist(mouseX, mouseY, xPositions[i], yPositions[i]);
   //make sure offset will not be 0
   offset = max(offset, 0.001);
   
   //how to change the offset based on the mousePosition
   //offset value based on the mouse position >> for further calculation
   float newX = xPositionsOriginal[i] - (25/offset)*(mouseX-xPositionsOriginal[i]);
   float newY = yPositionsOriginal[i] - (25/offset)*(mouseY-yPositionsOriginal[i]);
   
   xPositions[i] = lerp(xPositions[i], newX, lerpFactors);
   yPositions[i] = lerp(yPositions[i], newY, lerpFactors);
   
   //dist smaller > closer > size bigger
   sizeFactors[i] = 100/offset;
   
   //narrow sizeFactors down so calculation won't be affected
   sizeFactors[i] = max (sizeFactors[i], 0.4);
   sizeFactors[i] = min (sizeFactors[i], 2);
   
   //draw circles
   drawCircles(xPositions[i], yPositions[i], sizeFactors[i]);
 }
    
}

void drawCircles(float x, float y, float size){
  pushMatrix();
  translate(x,y);
  scale(size);
  fill(0);
  noStroke();
  ellipse(0, 0, defaultSize, defaultSize);
  popMatrix();
  
}

During this recitation, I mainly learned about basic animation functions, especially practicing with the basics that we learned in the lectures, and was trying to create some projects by myself. 

At the very first beginning, I wanted to try to make an animated icon with the Processing. However, it seemed that simply located each part and drew the whole icon has taken most of my time already. Therefore, I have really little time to further develop my ideas and even my first try of the push effect that should be triggered by the mouse clicking on the keys also seemed to be a failure. 

However, later on, I found out that we can actually import pictures into Processing, instead of drawing them by coding step by step. 

Here are some of the functions that I searched on the website that may help me further polish my project:

Import Imgaes:
image()
Examples
example pic
PImage img;

void setup() {
// Images must be in the “data” directory to load correctly
img = loadImage(“laDefense.jpg”);
}

void draw() {
image(img, 0, 0);
}
example pic
PImage img;

void setup() {
// Images must be in the “data” directory to load correctly
img = loadImage(“laDefense.jpg”);
}

void draw() {
image(img, 0, 0);
image(img, 0, 0, width/2, height/2);
}

PShader
Examples
PShader blur;

void setup() {
size(640, 360, P2D);
// Shaders files must be in the “data” folder to load correctly
blur = loadShader(“blur.glsl”);
stroke(0, 102, 153);
rectMode(CENTER);
}

void draw() {
filter(blur);
rect(mouseX-75, mouseY, 150, 150);
ellipse(mouseX+75, mouseY, 150, 150);
}

mouseDragged()
Examples
// Drag (click and hold) your mouse across the
// image to change the value of the rectangle

int value = 0;

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mouseDragged()
{
value = value + 5;
if (value > 255) {
value = 0;
}
}

PFont
Examples
example pic
PFont font;
// The font must be located in the sketch’s
// “data” directory to load successfully
font = createFont(“LetterGothicStd.ttf”, 32);
textFont(font);
text(“word”, 10, 50);

applyMatrix()
Examples
example pic
size(100, 100, P3D);
noFill();
translate(50, 50, 0);
rotateY(PI/6);
stroke(153);
box(35);
// Set rotation angles
float ct = cos(PI/9.0);
float st = sin(PI/9.0);
// Matrix for rotation around the Y axis
applyMatrix( ct, 0.0, st, 0.0,
0.0, 1.0, 0.0, 0.0,
-st, 0.0, ct, 0.0,
0.0, 0.0, 0.0, 1.0);
stroke(255);
box(50);

DIY Animation (Code):

//PShader blur;
float posX;
float posY;

void setup(){
  size(400,400);
  background(0);
  /*circle(width/2,height/2,200);
  rectMode(CENTER);  
  rect(width/2,height/2,40,80);*/
  
}

void draw(){
    //if(mouseX>width/2-25-30 && mouseX<width/2-25+30){
    //}
  }

void keyPressed(){
    float r = random(255);
    float g = random(255);
    float b = random(255);
    draw();{
    fill(r,g,b);
    noStroke();
    circle(width/2,height/2,300);
    fill(b,r,g);
    stroke(0);
    strokeWeight(5);
    rectMode(CENTER);  
    rect(width/2,height/2,50,160);
    rect(width/2-50,height/2,50,160);
    rect(width/2-100,height/2,50,160,10,0,0,10);
    rect(width/2+50,height/2,50,160);
    rect(width/2+100,height/2,50,160,0,10,10,0);
    fill(0);
    noStroke();
    rect(width/2-25,height/2-35,30,90);
    rect(width/2-75,height/2-35,30,90);
    rect(width/2+75,height/2-35,30,90);
    /*if(posX>width/2-25-30 && posX<width/2-25+30 && posY<height/2-35-90 && posY>height/2-35+90){
      fill(#63665f);
      stroke(0);
      strokeWeight(10);
      rect(width/2-25,height/2-35,30,90);*/
    }
    } 
    

Video Documentation: 

Additional Homework (Code) :

float posX = 300;
float posY = 300;
float speedX = 2;
float speedY = 2;
float s = 100;
boolean state = true;
void setup() {
  size(600, 600);
}

void draw() {
  background(360);
  strokeWeight(20);
  noFill();

  circle(posX, posY, s);

  if (state == true) {
    s = s + 4;
  } else if (state == false) {
    s = s - 4;
  }
  if (s == 400 || s == 100) {
    state = !state;
  }
  colorMode(HSB, 360, 100, 100);
  stroke(s, 100, 100);
  //colorMode(RGB, 255, 255, 255);
  //float r = random (360);
  //float g = random (100);
  //float b = random (100);


  if (keyPressed == true) {
    if (keyCode == UP) {
      posY = posY - speedY;
    }
    if (keyCode == DOWN) {
      posY = posY + speedY;
    }
    if (keyCode == LEFT) {
      posX = posX - speedX;
    }
    if (keyCode == RIGHT) {
      posX = posX + speedX;
    }
  }
}