Weekly Mini-Project

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;
    }
  }
}

Idea:

Bauhaus School of Arts-Biconjugate

https://www.guggenheim.org/artwork/164

Plan:

Using basic shapes in the Processing to create the image.

As you can see in the original image, the shapes are not simply rectangles, instead, many of them are parallelograms.

Act it out:

Then, I started to search on the website about basic shapes in Processing besides the ones that we have learned in lectures, triangles, rectangles, ellipses, etc. I found there was one function called “quad()”, which can be used to draw any quadrilateral, and I thought this would be the best fit for my project. 

I wrote on one piece of paper and calculated every position of the points that I needed. And I used a combination of triangles and quadrilaterals to create the image. 

 

However, I found out there was some misalignment in the shapes that the computer drew. I think the main problem may stem from the inaccuracy of my calculations or the different modes that the computer is using. 

Therefore, later on, I chose to put an estimate in the coding part, then run the code and gradually adjust the index. 

Finally, due to the time limitation, I was able to finish only part of them. Just as shown below.

Code:

size(900,500);
smooth();
background(#f2e7d5);
//triangle
fill(#131419);
rectMode(CENTER);
rect(450,250,750,350);
//grey quad
fill(#4e504f);
noStroke();
quad(75,125,200,75,200,370,75,425);
quad(200,75,400,175,350,425,200,370);
quad(400,175,700,75,550,370,350,425);
triangle(550,370,700,75,700,425);
quad(700,75,825,150,825,350,700,425);
//need two sides + third quad
fill(#aba8a1);
quad(150,110,200,90,330,410,150,340);
triangle(200,90,330,155,330,410);

//fourth quad
fill(#e4ddcd);
quad(200,135,330,200,330,370,200,315);
//fifth quad
fill(#c8c4b9);
quad(330,200,400,190,400,400,330,370);

Please answer each of these questions. Add your answers to your blog post, along with the other documentation for the circuits that you built in class.

Question 1: What kind of machines would you be interested in building? Add a reflection about the use of actuators, the digital manipulation of art, and the creative process to your blog post.

Question 2: Choose an art installation mentioned in the reading ART + Science NOW, Stephen Wilson (Kinetics chapter). Post your thoughts about it and make a comparison with the work you did during this recitation. How do you think that the artist selected those specific actuators for his project?

Answer 1: Speaking of what kind of machine I would feel interested in building, the first type of machine that comes up in my mind is the ones that can help the disabled’s life easier or to help them do something that they are not capable of doing by themselves. About how to achieve or actually build one machine for those purposes, I think I am going to use a lot of sensors. For instance, to help the blind sense whether there is any obstacle in their way, we need a lot of distance sensors to detect the objects around the user accurately and comprehensively. Also, we are going to need some sound output devices so that we can give the user feedbacks about our detected outcomes. Although this may not be a piece of art, we can actually use this experience to make the user draw a painting which is generated from their footsteps. By adding some pressure sensor on a certain area of ground, we can sense where the user goes, and based on that information, maybe together with how much pressure the user use to step on each piece of brick, we can create a colorful drawing whose color depends on the pressure level. In the process, I want to add a lot of creative and extraordinary experiences for the users, besides the basic function of detecting whether there is any obstacle in front of or around the blind users.

Answer 2: In the reading, there are a lot of interesting interactive projects that were done by good designers. Among all of those, I find out that the one titled Centripetal Sound Machines, created by designer Matt Heckert, intrigues me the most. First of all, I really like his key concept of making people feel like stand inside many machines. Besides, he is not simply displaying the machines from manufacturing industries, instead, he is using simple chairs with pipe strikes to create the sound similar to that produced by the manufacturing factories, which fascinates me a lot. Compared with the drawing machine I have done with my partner on the recitation, I think there are a lot of differences as well as commonalities. The first major difference is that we are creating a painting as our final outcome while he is producing sounds. Another important thing is that our drawing machine need to be controlled and operated by the users which can be regarded as a long-term active interaction. However, in this project, the art installation itself is able to create the whole soundscape, and all the users need to do is to experience by listening. As for similarities, I think both projects are producing simple things in a much more creative way with a new perspective. Last but not least, I think the reason why the author selects those specific actuators is that he wants to create sounds that are similar to manufacturing machines. Therefore, metal chairs and pipe strikes are ideal. In addition, pipe strikes are actually parts of the manufacturing machines, so they can represent for it.

Media Documentation: 

Code for my drawing machine: 

/*
 * MotorKnob
 *
 * A stepper motor follows the turns of a potentiometer
 * (or other sensor) on analog input 0.
 *
 * http://www.arduino.cc/en/Reference/Stepper
 * This example code is in the public domain.
 */

#include <Stepper.h>

// change this to the number of steps on your motor
#define STEPS 100

// create an instance of the stepper class, specifying
// the number of steps of the motor and the pins it's
// attached to
Stepper stepper(STEPS, 8, 9, 10, 11);

// the previous reading from the analog input
int previous = 0;

void setup() {
  // set the speed of the motor to 30 RPMs
  stepper.setSpeed(30);
}

void loop() {
  // get the sensor value
  int val = analogRead(0);
  val = map(val, 0, 1023, 0, 200);
  // move a number of steps equal to the change in the
  // sensor reading
  stepper.step(val - previous);

  // remember the previous value of the sensor
  previous = val;
}

Documentation

In your documentation post, please post your answers to the following questions, along with the other documentation for the circuit(s) that you built in class, and the diagram(s) you drew.

Question 1: What did you intend to assemble in the recitation exercise? If your sensor/actuator combination were to be used for pragmatic purposes, who would use it, why would they use it, and how could it be used?

Question 2: Code is often compared to following a recipe or tutorial.  Why do you think that is?

Question 3: In Language of New Media, Manovich describes the influence of computers on new media. In what ways do you believe the computer influences our human behaviors?

You should cite any sources you referred to for your recitation exercise.

** You should embed your code into your blog instead of taking a screenshot of it. In order to do so, you can go to Edit > Copy as HTML in Arduino, and paste it in the Text view of your blog post editor.

 

Answer 1:

In this recitation exercise, my first and the most important intention was to get familiar with the usage of different types of sensors. Also, I tried to apply what I had learned in classes to add some other electronic elements to the original simple circuit. For example, the first sensor I tried was the moisture sensor, after directly connecting it to the Arduino with red, black, yellow wires connected to 5 voltages, GND, and A0 respectively, I added an LED to the original circuit. The LED was connected in another independent circuit together with the 220 ohms resistor to protect it. And instead of connecting the LED to the 5 voltages, I connected it to the digital pin 9, which can also read and write analog information, and set the pin as an output. Therefore, the LED’s brightness can be altered as the value of the moisture sensor changes.

If my sensor combination were to be used for pragmatic purposes, I suppose that the cosmetics industry may feel interested in that. To explain further, they can adapt this design to a more sophisticated one, which can sense the moisture level in a more detailed way and the related output can be a few pilot lamps, instead of the simple LED, to indicate and inform the customers of the skincare condition.

Answer 2:

Code is often compared to following a recipe or tutorial, and I very much agreed with that. First of all, code is a very crucial part of designing an interactive object. We write codes to let the computer know what we are going to ask the device to do. If we compare the codes to a recipe, then the various electronic elements are the ingredients for making a plate of delicacy and the final product can be regarded as the plate of delicacy that finally is displayed on the dinner table and wait for people to savor.  

Answer 3:

As far as I am concerned, the most important and obvious influence that computers have towards us human behaviors is that it takes us more time to focus our work and attention on computers as well as save us a lot of time to deal with problems by replacing handwritten with typing and by helping us with complex calculating.

Below are my codes for the circuits that I have done in this week’s recitation:

1. Moisture Sensor

int sensorPin = A0;

int sensorValue = 0;

void setup() {

    Serial.begin(9600);
 
}

void loop() {

    // read the value from the sensor:
 
    sensorValue = analogRead(sensorPin);
 
    Serial.print("Moisture = " );
 
    Serial.println(sensorValue);
 
    delay(1000);
 
}

Photo Documentation:

Video Documentation:

Circuit: 

2. Moisture Sensor with LED

int sensorPin = A0;

int sensorValue = 0;

int ledPin = 9;

void setup() {

    Serial.begin(9600);
 
    pinMode(9, OUTPUT);
}

void loop() {

    // read the value from the sensor:
 
    sensorValue = analogRead(sensorPin);
 
    Serial.print("Moisture = " );
 
    Serial.println(sensorValue);
 
    int mois = map(analogRead(A0), 0, 200, 0, 255);
 
    if (mois > 3000) {
 
      analogWrite(ledPin, mois);
 
  Serial.println(analogRead(A0));
 
    }
 
    else{
 
      digitalWrite(ledPin, LOW);
 
    }
 
    delay(10);
 
    }

Video Documentation:

Circuit: 

3. Ultrasonic Ranger

const int pingPin = 6;

void setup() {

  Serial.begin(9600);

}

void loop() {

  long duration, inches, cm;

  pinMode(pingPin, OUTPUT);

  digitalWrite(pingPin, LOW);

  delayMicroseconds(2);

  digitalWrite(pingPin, HIGH);

  delayMicroseconds(5);

  digitalWrite(pingPin, LOW);

  pinMode(pingPin, INPUT);

  duration = pulseIn(pingPin, HIGH);

  inches = microsecondsToInches(duration);

  cm = microsecondsToCentimeters(duration);

  Serial.print(inches);

  Serial.print("in, ");

  Serial.print(cm);

  Serial.print("cm");

  Serial.println();

  delay(100);

}

Video Documentation:

Circuit:

Documentation

Please post your responses to these 3 questions, along with the other documentation for the circuits that you built in class (including your own drawing of the schematic for circuit 3).

Question 1: Reflect how you use technology in your daily life and on the circuits you just built. Use the Introduction Chapter (page xvii-xxix) of Physical Computing and your own observations to define interaction.

Question 2: Why did we use the 10K resistor with the push button?

Question 3: If you have 100,000 LEDs of any brightness and color at your disposal, what would you make and where would you put it?

Technology is everywhere. We are using technology in almost every aspect of our daily life. For example, the laptop that we are using. Speaking of the hardware, the laptop itself is a kind of technology, beside, the software embedded in the laptop is also a kind of representation of technology. Most of the time, we are using technology around us unconsciously, or at least, we seldom think about what kind of technology we are using even if we are aware of the fact that we are technology. Based on the reading and my own observations, I think interaction is a quite broad idea. In terms of the human-machine interaction, I would like to set the definition as the reaction or feedback the machine sends back to any human who is interacting with it in response to the human’s action.

10k resistors are used with the push-button mainly to protect the electronic elements from being damaged because of taking too much voltage and being burnt.

If I have 100,000 LEDs of any brightness and color, I would use them to replace the current streetlights. There will be sensors put on them to detect the crowd. For example, if there is no one on the road near the streetlight, the brightness will be pretty low, etc. It may be considered as part of the smart city system.

Circuit 1 (LED FADED) Video Documentation

Circuit 2 (BUZZER) Video Documentation

 

Circuit 3 (GAME) Video Documentation

Circuit Schematic: