Recitation 7: Functions and Arrays

Step 1:

float x = 0;
float y = 0;
float c = 0;
float a = 0; 
float b = 0; 
void setup() {
  size(800, 800);
  background(188, 245, 244);
}

void draw(){

   pattern(400,400,247,236,17);

}
void pattern(float x , float y, float a , float b , float c ){
  
  stroke(255);
  strokeWeight(4);
  fill (a,b,c);
  triangle(x, y, x+100, y, x+50, y-100);

  stroke(255);
  strokeWeight(4);
  line(x, y, x+20, y+20);

  stroke(255);
  strokeWeight(4);
  line(x+50, y-100, x+70, y-80);

  stroke(255);
  strokeWeight(4);
  fill (a,b,c+100);
  triangle(x+20, y+20, x+120, y, x+70, y-80);
}
  

Abstract pattern unit

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

Answer:

When the for loop is in setup(), it’s contents will repeat a limited amount of times- only as long as certain conditions are met. If it is placed in draw(), it can go on indefinitely.

Question 2:

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

Answer:

Arrays allow objects in code to be described efficiently. We can use Arrays in Processing to construct shapes, for example

I was only able to complete the first step during recitation. I will attempt the remaining steps on my own time.

Preparatory Research and Analysis by Nathalie White

Interactive art, installations and products should make the viewer or user feel engaged. From what I’ve observed, key ways of achieving this include the gamification of a mundane process, an intellectual challenge, a strong statement, an intriguing learning opportunity, and/or personalized response.

We saw these methods applied during our field trip to the Chronus exhibition. An installation that caught my eye was the “Autonomous System”, because it created an introspective experience for me, where I thought of the human brain and how we process data, and likened it to the computers we used, wondering about how complex we really are. I left not knowing if my thoughts ever got close to those of the artist as he created the piece, but questioning the complexity of systems and processes in my life. What aspect of my life is simpler than I expect based on its outwards appearance? What logic do the unseen processes in my life have?

In this respect, the installations were similar to others I’ve seen that did not include technology and moving parts- they both make me look for meaning and the artist’s intent. However, the fact that the installations used motors made them feel alive- as I saw “Autonomous System”, for example I felt like I was watching a creature think.

When I think of interactive designs, I immediately think of Daan Roosegaarde.  I admire his work because it’s not only aesthetically pleasing- it tells a story, creates an experience. Two projects of his that come to mind are “Van Gogh Path” and “Water Licht”, because of how they include Holand’s history and culture, while making a statement on the environment. 

The “Van Gogh Path” is a glowing bike path inspired by Van Gogh’s “Starry Night Sky”, which aims to celebrate the cultural heritage of Nuenen, NL (where the artist lived), while creating a safe and beautiful environment. The project’s webpage says that it “glows at night and creates a place of wonder and inspiration, but is also an enhancement of public safety and local place making.”

Van Gogh Path

WaterLicht is a light installation. On Roosegaard’s website, its says of the project: “WATERLICHT is the dream landscape about the power and poetry of water. As a virtual flood, WATERLICHT shows how high the water level could reach. WATERLICHT is a collective experience to remind us of the importance of innovation and the impact of climate change.” I appreciate it’s beauty and the appreciation for the power of nature. What I admire of this project is that it aims to make people more aware of something we rarely think about (the water level).

WaterLicht photo

For me, less successful interactive projects are those that have less of an impact. Projects that don’t cause the user or viewer to think. I think an interactive design must have a message- a purpose. It does not have to be received or understood by each user in the same way- their experiences can differ. However, it is important that an interactive design be more than just a short transaction.

For my project, I would like to create something beautiful, that has meaning. I want to create a thought-provoking experience.

Recitation 6: Processing Animation, by Nathalie White

float x =100;
float y = 350;
float speedX = 5;
float speedY = 3;

void setup() {
size(1000, 700);
background (0, 0, 255);
}

void face(float u, float v, float size, color c) {

stroke(255);
fill(c);
rect(540, 180, 100, 100);

stroke(255);
fill(c);
rect(u, v, size, size);

stroke(255);
fill(255, 0, 255);
rect(u-40, v+20, size, size);

stroke(255);
line(u+60, v-120, size*6.4, size*2.8);

stroke(255);
line(u-40, v+20, size*1.4, size*1.8);

stroke(255);
line(u+60, v+20, size*6.4, size*1.8);
}

void draw() {

if (mousePressed) {
float red = random(255);
float green = random(255);
float blue = random(255);
face(random(width), random(height), random(20, 200), color(red, green, blue));
}
if (keyPressed) {
background(0,0,255);
}
}

Additional Homework

float circleX;

float circleY;

float circleSize = 400;

float sizeChangeSpeed = 5;

float circleMove = 5;

float r = 255;

float g = 10;

float b = 10;

float colorChangeSpeed = 7;

int changePhase = 1;

void setup(){

  size(600, 600);

  circleX = width/2;

  circleY = height/2;

}

void draw(){

  background(255);

  chooseColor();

  drawCircle(color(r, g, b));

}

void drawCircle(color circleColor){

  ellipseMode(CENTER);

  strokeWeight(20);

  stroke(circleColor);

  

  ellipse(circleX, circleY, circleSize, circleSize);

  

  circleSize += sizeChangeSpeed;

  if(circleSize > 400 || circleSize < 80){

    sizeChangeSpeed = -sizeChangeSpeed;

  }

}

void chooseColor() {

  /*R = 255 G = 10 B = 10 -> B  ++

  R = 255 G = 10 B = 255 -> R  – –

  R = 10 G = 10 B = 255 -> G ++

  R = 10 G- 255 B = 255 -> B – –

  R= 10 G = 255 B = 10 -> R ++

  R = 255 G = 255 B = 10 -> G – –

  */

  // decides which phase it is

  if (r == 255 && g == 10 && b == 10){

    changePhase = 1;

  } else if (r == 255 && g == 10 && b == 255){

    changePhase = 2;

  } else if (r == 10 && g == 10 && b == 255){

    changePhase = 3;

  } else if (r == 10 && g == 255 && b == 255){

    changePhase = 4;

  } else if (r == 10 && g == 255 && b == 10){

    changePhase = 5;

  } else if (r == 255 && g == 255 && b == 10){

    changePhase = 6;

  }

  

  // change the color based on which phase it is

  if (changePhase == 1){

    b += colorChangeSpeed;

  } else if (changePhase == 2){

    r -= colorChangeSpeed;

  } else if (changePhase == 3){

    g += colorChangeSpeed;

  } else if (changePhase == 4){

    b -= colorChangeSpeed;

  } else if (changePhase == 5){

    r += colorChangeSpeed;

  } else if (changePhase == 6){

    g -= colorChangeSpeed;

  } 

   

}

void keyPressed(){

  

  if (key == CODED){

    if (keyCode == UP) {

      circleY -= circleMove;

    } else if (keyCode == DOWN){

      circleY += circleMove;

    } else if (keyCode == LEFT){

      circleX -= circleMove;

    } else if (keyCode == RIGHT){

      circleX += circleMove;

    }

  }

  

}

Recitation 5: Processing Basics, by Nathalie White

The Drawing

For this recitation, I chose the following piece by Sol LeWitt as my inspiration:

Four Color Isometric Figure A, 2002
Four Color Isometric Figure A, 2002

I chose it because I was drawn to the 3D effect using three very contrasting colors can have. I wanted to create a drawing that used bright contrasting colors like this. 

Below  is the result:

My drawing

It is very different from the source of inspiration: the color scheme is different, and I used non-rectangular shapes. However the deign stemmed from trying to achieve a playful 3D-esque look through the use of contrasting colors.

The Code

size(1000,700);
background (0,0,255);

fill(0,0,200);
noStroke();
ellipse(500,350,300,300);

stroke(255);
fill(0,0,100);
ellipse(500,350,250,250);

fill(245,148,2);
noStroke();
ellipse(650,250,120,120);

stroke(255);
fill(255,214,8);
ellipse(650,250,80,80);

stroke(255);
fill(82,277,218);
rect(440,280,100,100);

stroke(255);
fill(255,0,255);
rect(400,300,100,100);

stroke(255);
line(500,400,540,380);

stroke(255);
line(400,300,440,280);

stroke(0,0,255);
line(500,300,540,280);

stroke(255);
fill(255,0,255);
rect(540,380,100,100);

stroke(255);
fill(82,277,218);
rect(500,400,100,100);

stroke(255);
line(600,500,640,480);

stroke(255);
line(500,400,540,380);

stroke(255);
line(600,400,640,380);

stroke(255);
fill(82,277,218);
rect(540,180,100,100);

stroke(255);
fill(255,0,255);
rect(500,200,100,100);

stroke(255);
line(600,300,640,280);

stroke(255);
line(500,200,540,180);

stroke(255);
line(600,200,640,180);

stroke(255);
line(363,410,490, 410);

stroke(255);
line(490,410,490, 499);

stroke(255);
line(490,410,345, 440);

stroke(255);
line(490,410,340, 470);

stroke(255);
line(490,410,335, 500);

stroke(255);
line(490,410,335, 500);

The hardest part for me was figuring out the coordinates, but when I sketched the design on paper, that problem was solved. I look forward to feeling comfortable animating designs to see them come to life!

Ask Alice- A Social Commentary on the Effects of Gambling by Nathalie White (Prof. Marcela Godoy)

Interactive Projects

Interaction is reciprocated influence. In both the Group Project and the Midterm project, I thought of it as a conversation- an exchange of data with an end goal. The “Heal-o-matic 5000” assessed its patient and listened to their concerns so as to provide optimal care. “Ask Alice” is an experience disguised as a simple slot machine: It betrays the user’s expectations in order to convey a message. 

The Concept

“Ask Alice” is played like any regular slot machine. The player rolls the slots and hopes to achieve a certain pattern (in our machine, the goal was to roll three white rabbits). When the player wins, a white rabbit candy is dispensed from the machine, as the prize. Except it’s not a candy- it’s a fact about the effect of gambling in a community. Users unwrap it expecting a sweet, but instead they are met with a small roll of paper with a quote or word like “domestic abuse” (which tends to increase or worsen when there is a gambling addiction). We thus play with the user’s expectations to create an experience, in which the user feels like they’ve gained insight. This is what makes our project interactive- not necessarily the machine itself. 

The Statement

The purpose of this product is to make our users think about the negative impact of addictions in society. We chose gambling instead of alcoholism of drug abuse because not many people of our generation and socio-economic background seem to think about it’s impact, as they haven’t personally been affected by it, and it’s negative effects aren’t always as obvious as those of other addictions. It’s certainly not in the media the way alcohol and drugs are- no one raps about their gambling issues. And yet it also has harmful byproducts, like increased rates of domestic abuse, bankruptcy and suicide. We wanted our project to be educational- but more than that, we wanted it to make people think about serious problems they couldn’t relate to, and don’t give much thought to.

The Original Design

Originally, instead of slots decorated to resemble those in traditional slot machines, we were going to use three 8-segmented LEDS. So instead of trying to roll three white rabbits, the player would have rolled for three sevens. We decided against this, because of the feedback from the user test. Users told us that maybe the message would come across most powerfully when the slot machine looked like one you could find in a real Casino. Below is some the wiring we did for the 8-segmented LEDs. 

Wiring for 8-segmented LEDs

We ultimately changed our design because of the results of the user test, and because the classic icons you see on slot machines are more aesthetically pleasing. In our project, aesthetics are important as they help get the message across.

The Final Design

The physical product and it’s aesthetics are a key part of the experience. The machine had to be flashy yet unassuming. Luring, but not so much so that it was an obvious trap. We wanted to make the experience simulate the real-deal up to the moment they unwrapped their prize, to increase the user’s surprise. Bellow is a picture we found online that we used as inspiration for our design, as well as some of our sketches from the ideation phase:

Slot machine design inspiration

We also wanted to hide some messages that someone interested in looking a little closer at our project could see. People love easter eggs. They like feeling that they’ve noticed something that maybe the person before them did not. It makes them feel smart. We learned this through the user test, when users told us they liked unwrapping the information. What it initially told us was that having the prize be a candy you unwrap as opposed to a token was a good idea for our intended market, but when we explored the concept, we realized it also applied to any information we could give the users. The potential for discovery intrigues people. So we decided to leave hidden meanings in the presentation of the machine too. 

Ask Alice Slot Machine, outer design

The Presentation- Hidden Meanings

The name of the slot machine “Ask Alice” refers to the book “Alice’s Adventures in Wonderland” by Lewis Carrol. That Alice blindly and foolishly follows the rabbit down a rabbit hole. To fall “down the rabbit hole” is also an English idiom for getting yourself in a chaotic unwanted situation and is sometimes used to describe when someone falls into an addiction. This is a recurring theme in the decoration of our slot machine. For example, on the side of the machine it says “Don’t fall down the rabbit hole!” but in small black letters that camouflage with the background it says “fall” repeatedly. This represents how the gambling industry promises a way to get rich quick, but they are profiting from your losses.

Construction

We had to design three main physical parts: The outer casing, the rotating slots, and the prize dispenser. All were designed on Adobe illustrator. Bellow is a picture that shows the outer casing and the prize dispensing mechanism before we inserted the electrical components. The rotating slots were done by pasting one icon on each side of 3 octagons, which would each be connected to a stepper motor, and thus rotate.

Outer casing and candy dispenser

We used Youtube tutorial to learn how to make the candy dispenser. It was very helpful to see how other people had done it before. The one we used in our project is almost exactly like the one in the video linked above, except for the fact that we changed its dimensions, and had to add an extended arm that would allow the stepper motor to control when the candy was dispensed (as opposed to how in the video, candy is dispensed simply with the pressing of a button). Below is our design for the extension, and a video showing how it was supposed to work, once we connected the stepper motor.

Design for Candy dispenser

Code 

Below is the code we used to:

  1. Have 3 stepper motors rotate the slots and eventually land on the white rabbits
  2. Once the slots all showed the white rabbits, the stepper motor that was attached to our candy dispensing mechanism would rotate to allow candy to fall.

#include <Stepper.h>
#include <Servo.h>

// change this to the number of steps on your motor
#define stepsPerRev 200

// create an instance of the stepper class, specifying
// the number of steps of the motor and the pins it’s
// attached to
Stepper hundredthWheel(stepsPerRev, 26, 2, 3, 4);
Stepper tenthWheel(stepsPerRev, 24, 5, 6, 7);
Stepper onethWheel(stepsPerRev, 22, 8, 9, 10);
Stepper handle(stepsPerRev, 40, 41, 42, 43);

//———————————————————————————
// VARIABLE
//———————————————————————————
// Number Variables
// Lucky Number
int luckyNum = 777; // If the user hit this number,
// = jackpot.
// they will receive a candy from the machine

// Slot content variable
int userNumSize = 3;
int userNum[3] = {0, 0, 0}; // initialized digits
int finalNum = 0;

// Degree variables
int numSteps[3] = {0, 0, 0};

// how many times you want to rotate the wheel before it stops
int prevRotate = 4;

//———————————————————————————
// Button / levar variables
// Boolean variables (for button / levar)
bool pressed = false; // the button
bool curPressed = 0; // a variable to limit an event to happen only once.

// Pins
int buttonPin = 30;

//———————————————————————————
// Chance variables
// For how many times the user has FAILED so far
int failedNum = 0;

// At least once (?) time we want the user to win
int enoughFails = 3;

//———————————————————————————
// Chance variables
// the previous reading from the analog input
int hundredthPrevious = 0;
int tenthPrevious = 0;
int onethPrevious = 0;

//———————————————————————————
// FUNCTIONS
//———————————————————————————
void setup() {
Serial.begin(9600);

// button pin
pinMode(buttonPin, INPUT);

// randomSeed() will then shuffle the random function.
randomSeed(analogRead(0));

// set the speed of the motor to 100 RPMs
hundredthWheel.setSpeed(70);
tenthWheel.setSpeed(70);
onethWheel.setSpeed(70);
handle.setSpeed(100);

Serial.println(“Ready to go!”);
}

//———————————————————————————
void loop() {
buttonCheck(); //the loop-function will be calculating whether the button is pressed

delay(10); // for consistency and safety, we are keeping the delay in between
}

void buttonCheck() {
// simply checks whether the button is pressed or not

curPressed = digitalRead(buttonPin); // 0 = button is not pressed; 1 = button is not currently pressed

if (not pressed && curPressed) { // if the button is pressed run the code below.

Serial.println(“————“);
calculateDigit();
turnSteps();
luckyMoment();

if(finalNum == 777){ // if the user hits the lucky number,
// using the stepper to pull on the bar to take out the candy
luckyMoment();
}

pressed = true;

} else if (pressed && not curPressed) { // filters out when the button WAS pressed,
// but the button is not pressed right now
pressed = false;

}

}

void calculateDigit() {
// this function calculates the number for the digits
finalNum = 0; // initialize the number

// if (failedNum == enoughFails){
// Serial.println(“LUCKY!”);
for (int digit = 0; digit < userNumSize; digit++) {
userNum[digit] = 7;

// the actual calcuating part
finalNum += userNum[digit] * pow(10, (2 – digit));
}
//
// failedNum = 0; // initialize the the failedNum
//
// } else {
// for (int digit = 0; digit < userNumSize; digit++) {
// userNum[digit] = random(1, 7);
//
// // the actual calcuating part
// finalNum += userNum[digit] * pow(10, (2 – digit));
// }
// finalNum += 1;
//
if (finalNum == 777){ // if the user hits 777, initialize the failed Num
failedNum = 0; // , initialize the failed Num
} else { // if the user fails to hit 777,
failedNum++; // increment failedNum
}
//
// }
Serial.println(finalNum);
}

void calculateSteps() {
for (int wheel = 0; wheel < userNumSize; wheel++) {
int newVal = map(userNum[wheel], 0, 7, 0, 200);
int steps = (200 / 8) * userNum[wheel];
numSteps[wheel] = steps;
Serial.println(userNum[wheel]);
}
}

void turnSteps() {
calculateSteps();
// move the stepper back to its original position
delay(10);
hundredthWheel.step(hundredthPrevious);
delay(10);
tenthWheel.step(-tenthPrevious);
delay(10);
onethWheel.step(-onethPrevious);
delay(10);

delay(1000);

Serial.println(“starting”);
// Turn the hundredth wheel
for (int i = 0; i < prevRotate; i++) { // First give the anxiety by turning the wheels several times
hundredthWheel.step(-200);
delay(1);
}
hundredthWheel.step(-numSteps[0]); // Turn to the right value

// Turn the tenth wheel
for (int i = 0; i < prevRotate; i++) { // First give the anxiety by turning the wheels several times
tenthWheel.step(200);
delay(1);
}
tenthWheel.step(numSteps[1]); // Turn to the right value

// Turn the oneth wheel
for (int i = 0; i < prevRotate; i++) { // First give the anxiety by turning the wheels several times
onethWheel.step(200);
delay(1);
}
onethWheel.step(numSteps[2]); // Turn to the right value

// renew the previous values
hundredthPrevious = numSteps[0];
tenthPrevious = numSteps[1];
onethPrevious = numSteps[2];

}

void luckyMoment() {
//this controls the stepper to pull on the handle
handle.step(100); // pull out the handle by rotating the stepper

delay(1000); // wait for the handle stepper to finish pulling the bar

handle.step(100); // push it back in

}

Difficulties and aspects to improve

We had a few difficulties in creating this project. Most of them stemmed from our proportions being off- We didn’t design all the parts to be of the correct dimensions, which often led to unwanted friction between the mechanical parts. This friction resulted in malfunctions like the one in the video below.

If we were to repeat this project, we would ensure the parts are proportionate so that the spinning of the slots is more accurate and to lessen the likelihood that the candy dispenser gets stuck. We would also make the slots round and lighter- instead of an octagon with laser-cut rectangles pasted on, we would simple use a reel of icons. This would lessen the chance of the slots hitting a part of the machine and getting stuck. We would also prototype more before laser cutting a final version. Next time, we will first laser-cut the design in cardboard to ensure it is fitting.

Overall, we were happy with the class’ reaction to our message.