Introduction:

In this lab we continued the basics of Processing and began to better understand the use of arrays and other functions.

Objectives:

1. Learn about how to incorporate arrays into code
2. Understanding the differences between loops and setup()

Materials (as listed on the IMA website):

Computer

Processing

Process:

Step 1:  Create a graphic.

I was attempting to make a bear face, but I ended up with a head, ears, and half of his nose and mouth. I realized that I could create an arc but I did not understand how to flip the arc in order to create the other half of his mouth. I then realized that I was wasting too much time creating his face and not spending enough time on the code, so I left his face as it was. 

Step 2: Make his face 100 times

After I finished his face, I moved on to creating his face 100 times over.  This is where I learn about the difference between the setup() and draw() functions that create drastic differences in code (I will explain the differences below).

Step 3: Arrays . . . l o l

The last part was the tricky part: arrays. I especially struggled with arrays when I first started programming, and I still struggle with them. I think now I have a much firmer understanding of their capabilities.  I still am not as strong at creating arrays, so I used the basis of my code from Eric’ in-class example and modified it from there.  I incorporated my own design, adjusted the parameters, and renamed the variables. We used the array to create values that would allow the graphic to appear in different spots around the screen.

Step 4: Moving the Images

Step four mainly included adding three additional lines of code in a for loop that allowed for the movement of the objects dependent on where they originally started in the screen. 

/* notes: Unfortunately, my screen recording would not record both the processed images and the code at the same time so I recorded them separately. */

CODE:

//x = 200
// y = 160
float x;
float y;
int numInst = 100;
float[] xpositions = new float[numInst];
float[] ypositions = new float[numInst];

void setup(){
size(500, 500);
background(255);

for( int i = 0; i < xpositions.length; i++);{
xpositions[i] = random(width);
ypositions[i] = random(height);
}
printArray(xpositions);
println();
printArray(ypositions);

/*
for(int i = 0; i<100 ; i++){
graphic(random(width), random(height), color(20, 30, random(100), 20));
}*/

}

void draw(){

background(255);
for( int i = 0; i<100; i++){
smiley(random(800), random(600));
}

for(int i=0; i<xpositions.length; i++) {
smiley(xpositions[i], ypositions[i]);
xpositions[i] += random(-15, 15);
ypositions[i] += random(-5, 25);

}
}

void graphic(float x, float y){

//noFill();

fill(20, 100, 180);
circle(x-40, y-20, 50);
circle(x+25, y-20, 50);
fill(200, 0, 25);
circle(x, y+10, 100 );
rect(x-10, y+23, 10, 10);
arc(x+5, y+27, 20, 30, HALF_PI, PI);

//circle(200, 200, 100 );
//circle(160, 160, 50);
//circle(225, 160, 50);
//rect(190, 195, 10, 10);
//arc(205, 200, 20, 30, HALF_PI, PI);
//arc(205, 200, 20, 30, PI, PI);

}

Reflection:

This recitation was fun, as always, but also a pain. I really dislike arrays. I understand that they are really useful, but I still feel as though I am not in full command of their capabilities which I hope to get better about. 

Questions:

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

The key difference between setup() and draw() is that setup() produces just one instance of the code and then terminates, while draw() will loop the code infinitely. Unless you call a for() or some other infinite loop in setup(), then the code will only run one. When there is code in draw() the code will continue to run unless there is a case in place that would allow the code to terminate after a certain number of iterations. 

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

Arrays are useful because they can create data without you having to manually input values that you want. For example, in the case where we wanted our graphic to appear at random places around the screen, then the use of a array allows us to utilize the computer to generate numbers for us. This is invaluable because it saves an infinite amount of time. I am planning to use arrays in my final project to store data of the user and then make my device do a certain action based on certain stored values that it calls upon.

Final Project Proposal Interaction Lab

1. Proposal 1: Training a New Master Element Bender

a. I, along with many others, have always had the desire to bend the elements to my will. My first proposal will consist of a project that allows me to do that. It would have 5 sensors: a color sensor in the middle to detect the color of the clothing you are wearing (this will determine what element you will be bending), and four ultrasonic sensors arranged in a diamond in front of you to understand your movements. Projected on a screen in front of you will be a silhouette that you are to mirror in order to conduct your training. The sensors will be able to detect your movements as you cross the thresholds of the sensors and thus know if you are attempting to mimic the movements. The background could be the generic color of the element. For example, blue for water, white for air, red for fire, and green for earth. If your movements are incorrect or too slow, then the background could be changed to a dark color to signal for you to get back on track.

b. Even though I have wanted to do create something like this for a while, looking at interactive displays such as the University of Dayton Interactive Wall has given me some inspiration for how it should look. With their wall, they have a massive screen of LEDs. I will not have that many LEDs at my disposal, but I am confident that I could mimic this effect with ultrasonic sensors and a projector. This project could be used for a range of ages depending on what I display on the screen. For example, if I display a recording of the figure doing the techniques for each type of bending, then this would probably be more interesting for a younger person. This idea could also be used as a program to help elderly people get active. If there was a person on the projector doing basic exercises, the person could stand up (or if they are unable then they can remain sitting and participate with their arms). Of course, a person could equally look on Youtube to try and copy the movements, but this creates an interactive version that keeps you accountable when training.

c. Sources: https://medium.com/mouth-watering-media/the-top-10-digital-interactive-display-walls-40b96066477c

d. Rough schematic of the project design:

2. Proposal 2: Mini-Me

a. This project will create an interactive mirror. Essentially there will be a piece of mirror that will be on an adjusting pole that will grow taller or shorter depending on your height. After that, this figure will have arms and legs that will follow the movement of your arms and legs as you are. There will be four motors. One to raise the neck taller or shorter depending on the person’s height, the second and third one will be to rotate the arms of the person, and the fourth and fifth motors will be to rotate the legs of the figure. Processing will be incorporated by having a display that let you know how close to get to effectively use the mirror. For example, if you are too far away, then the display will be red and there will be a circle that will grow in size as you move closer. When you are at the prime spot, the background will turn green and then arms and neck will adjust.

b. The purpose of the project is to create an interactive mirror that adjusts to you. For people who live alone, this device could be useful, in the way that it acts almost like another person in the room with them. My inspiration for this project was draw from looking at pictures of previous IMA student’s projects on the IMA website. There was a project that looked like a teddy bear with movable arms. There was not a video, so I am unclear as to what the function of the device is, but I liked the concept of creating a movable figure.

c. Sources (inspiration, Image 40/50): https://ima.shanghai.nyu.edu/en/gallery/spring-2017-ima-show

d. Rough schematic of the design:

3. Proposal 3: Interactive art Display

a. For this project, I am thinking about having a 4 by 4 grid of ultra sonic sensors. The purpose of this is to create a field that would allow me to take the distances of the objects or the hand of the user and output it into Processing. The output in processing would be fluidly interactive and would instantly update at your hand or the object in front of the sensors move.

b. This project could be designed like a puzzle which could be used like a password. Let’s say this device is actually a lock on a box and in order to unlock the box you must place a figure or your hand in a specific area in order to make the sensors read values within an acceptable range. Almost like how a face scanner senses your face, this device will be used to sense objects in space. On processing, it will show the values in grayscale how how far or close each sensor is reading. If you are farther away, then it will produce a lighter grayscale; vice versa, being closer to the sensor will produce a darker gray. When the correct code of colors is reached, meaning that the box is unlocked, then the display will turn gray and the box will in tern unlock.

c. I think this project would pose a unique and fun take on a lock that could also be used a puzzle or developed into an app for people who enjoy cognitive puzzles.
d. Inspiration: https://www.youtube.com/watch?v=ikD_3Vemkf0&feature=emb_title

i. This project does not have the idea that I had about incorporating processing to make this a game/ lock and only tracks the location of the figure’s hand. It also does not use ultrasonic sensors.

d. Rough Schematic of the Design:

When scanning through the endless pictures, I stumbled across this one and was inspired to create it in Processing. Circles are really interesting because they have so many mathematical purposes and the hard part about them, is that it is nearly impossible for a human to draw a perfect circle. Looking at this picture made me think of space and the infinite possibilities for the make-up of objects out in space(meaning that I am sure there are a plethora of objects out there that are in-fact translucent over the standard “opaque”). I was inspired to try and recreate something I would never be able to re-create by hand, but I could do a decent job at attempting to recreate with the aid of a computer.

With the help of processing, I wanted to be able to learn how to place objects on the canvas and how changing the values in turn placed the characteristics of the shape. Artistically, I struggled with creating the essence of the “glow” behind the main circle. I tried a couple of different approaches. First, I tried to blur the edges of the larger circle, but the problem was that I could not find a good balance between the circle’s main color and the starkly lighter glow on the background. When I did the blurring technique, it produced more of a “spectrum” rather than a stark contrast that is shown in the painting – resembling an ellipse. 

The other technique that I tried was using the same lines of code to make the large circle, I created a circle slightly bigger than the original and changed the color to the lighter scheme. This technique is displayed below and worked better than the original plan.

Above is what I finished with. I think that overall, my code was clunky and that there are probably more efficient ways to write it which I will learn over time. Processing was an excellent tool for this particular piece due to its geometric nature.  Having a mathematical program that allows for math functions and the ability to manipulate mathematical shapes which are then output according to your specifications is a really efficient tool to use when you are trying to do something either precisely or for the most part, mathematical. I would not enjoying trying to draw a face or a more realistic object in this program.