Interaction Lab 3: Working with Processing (Dan Mikesell)

For this lab, we were required to work individually and experiment with Processing. The assignment called for the use of different processing codes. Of the options given, I decided to use triangle, float, translate, rotate, pushMatrix, and popMatrix. My goal from the assignment was to implement what we learned in class the same week and play with the possibilities offered on Processing to draw something that moved, or anything that would be remotely cool, really. This project required three things– a laptop, the Processing program, and knowledge acquired from class. After an hour and fifteen minutes, I came up with the following code:  

void setup(){ //what’s going to show up as soon as it opens

size (500,500);

background(255,0,127);

}

void draw(){ //allows you to animate

strokeWeight(3);

fill (193,154,107);

triangle(60, 105, 88, 50, 116, 105);

pushMatrix(); //save the current origin of original shape

float x=random(100,100);//

float y=random(100,100);

translate(250, 250);

triangle(60, 105, 88, 50, 116, 105);

rotate(random(0,PI*2));

strokeWeight (3);

fill(193,154,107);

triangle(60,105, 88, 50, 116, 105);

popMatrix();//goes back to original origin

fill (0,0, 255);

}

My own process started out with trying to figure out how to put one triangle in the right spot in my window. That “guessing and checking” took quite a bit of time and this method probably isn’t the most reliable way to check so I’ll have to brush up on my math in the future. Afterwards, I went on and tried all the other functions or codes such as translating and rotating until I got the image that I wanted. Now, this is where the biggest challenge stopped me in my tracks. I wanted to make the new rotated and translated triangle move around in a circular motion while the original triangle stayed in the middle of that moving circle. My classmate, Efae, was sitting next to me and helped me figure out how to make the triangle move in a circular motion by adding in void draw. However, the class ended before I could figure out how to make triangle stand at the origin of the moving triangles. When I do figure it out, I’ll be sure to remember for future reference!

Lab 3-Processing

Interaction Lab 2: Arduino (Dan Mikesell)

We were required to work on three projects involving the Arduino. My goal was that by the the completion of the three projects, I would wind up more comfortable and less fearful of the process of plugging in cables and the like. All three projects involved the use of the Arduino software, a laptop, and the Arduino Starter Kit. The rest of the materials required for each project depended on the project itself.

Project 1: Temperature Alarm

The components required included the jumper cables, a buzzer, and a temperature sensor. I found this project to be easy and self-explanatory. One thing I kept in mind was to make sure to remember the positive and negative side of the buzzer. Then, when all things were plugged in the way the image suggested, the buzzer rang after adjusting the temperature level (about 20 degrees) at which it was supposed to buzz.

Lab 2_Project 1

Lab 2_Project 1

Project 2: Detecting Vibration

The components required included jumper cables, resistor 220R, 5MM LED, and the tilt switch sensor. For this project, it also seemed pretty self-explanatory if you follow the image on the instruction card. The most important thing, it seems, that I had to keep in mind was the positive and negative sides. Furthermore, at the end, when we had to test out the vibration sensor, I realized that I had to shake the breadboard a lot harder than I expected because it wouldn’t make the noise immediately.

Lab 2_Project 2

Lab 2_Project 2

Project 3: RGB Light Dimmer

This was probably the most challenging lab of all! The components included jumper cables, resistor 220R, 10K Potentiometer, and a 5 MM RGB LED. There were three main difficulties I encountered with this project. The first was realizing that there was not enough ground on the breadboard to follow the image on the instruction card. To solve that problem, I asked my partner for help and she reminded me that I could just connect a jumper cable from ground to a place on the breadboard which we could then call ground. The next obstacle I had to overcome was connecting all the wires and making sure I aligned them all in the right places. There were so many cables that it was hard to keep track of everything! Lastly, although I wouldn’t necessarily call it a struggle, it was hard to test out the light dimmer once everything was connected. The wires were everywhere so it was tough to turn the knob as you can see in the video.

Lab 2_Project 3

Lab 2_Project 3

 

Lab 3 Documentation

This lab required us to make an animation in processing using the basic commands that we had learned.

Even by the end of the week, I wasn’t sure if I had understood the uses of the different commands in processing. By this time I was just assigning random values to the shapes and hoping that something interesting would be made as result. That approach was probably not the best one that I could have taken. I ended up being confused why my animation didn’t do things that I wanted it to and even if it did end up working by luck I failed to understand the reason behind it.

Having failed at this approach, I decided to open up our class presentations and the references on processing.org to help me understand the different commands as I wrote out my code step by step.

My goal was to make a multicolored ball that would rotate around the center point of the canvas along with a second ball that I could move with my mouse.

The coding for the multi colored ball was fairly simple as I just needed to write out the code for each ball, with a different color, starting from the largest. Initially, I only knew how to make the balls red, green, or blue. However, after going through the website, I learned that I could look up the values for specific colors by using the ‘color selector’ option in processing. After about 15 minutes, I had made my multicolored ball!

The second ball that I wanted to create was of only one color. I wanted this ball to follow the cursor on the screen. The coding for this was very simple to understand and to write using the references on the processing website.

The only difficult task in this assignment was to make the multicolored ball rotate. I had never practiced with the rotate function and couldn’t figure out how to make it work properly. After trying (and failing) for 30 minutes, I asked Matt for help.

He looked over my code and told me that my ball was rotating; however since the values that I had chosen for it to rotate were too large, my ball was rotating outside of the canvas and thus wasn’t visible on screen. And as soon as he changed those values to smaller numbers, my ball was visible and rotating around the center!

The working code was as follows:

Screen Shot 2016-02-29 at 22.45.18

Screen Shot 2016-02-29 at 22.45.49

Screen Shot 2016-02-29 at 22.46.00

The result of the animation was as follows

:Screen Shot 2016-02-29 at 22.46.15

 

 

 

Animation Process Part II-Completion (Jamie)

We continued on with shooting the stop motion piece. We worked to make sure that the lighting was cooler to combat the intense orange of our classroom lighting (a suggestion made by Marianne), and also made sure to adjust the focus to always keep our main subject clear. Our movement of the pieces seemed to work quite well as we got the hang of how to create fluid motions through the frames. The addition of sound was interesting as it added a lot of life to the piece. The moving pieces felt weighty, light, fast, or slow depending on the sounds created. Our classmates were also very helpful during the critique, gently pointing out that certain sounds were too repetitive and could be changed/shortened.

This time, we did shot the part of the snake and food turning into humans. We made sure we got people to wear black and borrowed a red jacket for David to wear. We then shot the last scene we needed to do. With people, it was harder for them to stay completely still in between frames. We shot part of this scene frame by frame, and another part through video whilst dropping a couple of frames. This scene definitely added new life to our animation since the people really added character to our little snake/food chase.

Finally after much deliberation, we used the “can can” as our musical background. Typical of chase scenes, dramatic, exciting, and amusing, we decided that this best fit the feeling we were going for in this animation. Ultimately, this was a fun project to work on. I’m happy to have worked on this with Sasha.

IMG_1064

Lab 4 Documentation

For this week’s lab we were asked to create something using conditionals, iteration, functions, and keyboard and mouse interaction. I decided to link the keyboard with processing to create shapes using number digits e.g. by pressing ‘1’ one shape would appear on the screen, with ‘2’ two shapes, with ‘3’ three shapes, and with ‘4’ four shapes. And otherwise, any other key pressed would cause the stroke size to increase. I did this all using conditionals. Moreover, using variables, I made it so that with every key pressed, the sizes of the shapes would increase.

Later on, I introduced the “mouseDragged” function that allowed me to draw lines on the screen with the cursor. I programmed it so that once I drew on the screen with the cursor, the stroke size of the subsequent shapes would get back to normal and their size would start to decrease. Finally, I used iteration to create a pattern on the two corners of my screen.

The coding was as follows:

Screen Shot 2016-02-29 at 22.22.07

Screen Shot 2016-02-29 at 22.22.19


This lab was the most difficult for me so far since I had not properly understood the concepts of conditionals and iteration and had difficulty using them in my coding. I was also unsure about how to use new functions in my code. However after consulting the reference on the processing website, I was able to create my sketch. Which allowed me to make cool patterns just by pressing different keys in different orders.

Screen Shot 2016-02-29 at 22.16.41    Screen Shot 2016-02-29 at 22.18.49

Week 4: Xinye and Arianna – Blue Squares JS

http://192.168.50.184/~xj417/week4/

Last Friday, we were asked to find the mouse position. It seemed very complicated in the beginning. However, we looked through the slides and examples from previous classes and realized that we had to define positions’ opacity.

Our code looks like this:

<!DOCTYPE html>
<head>
<link rel=”stylesheettype=”text/csshref=”style.css“>
</head>
<body>
<div class=”outerrectonmousemove=”checkLocation()“>
<div class=”innerrectid=”topleft“></div>
<div class=”innerrectid=”topright“></div>
<div class=”innerrectid=”bottomleft“></div>
<div class=”innerrectid=”bottomright“></div>
<div class=”vertdivide“></div>
<div class=”horizdivide“></div>
</div>
<script>
function checkLocation() {
var inputX = event.clientX;
var inputY = event.clientY;
if (inputX<=240&&inputY<=240)
document.getElementById(“topleft”).style.opacity=1;
else
document.getElementById(“topleft”).style.opacity=0;
if (inputX>=240&&inputY<=240)
document.getElementById(“topright”).style.opacity=1;
else
document.getElementById(“topright”).style.opacity=0;
if (inputX <=240 && inputY>=240)
document.getElementById(“bottomleft”).style.opacity=1;
else
document.getElementById(“bottomleft”).style.opacity=0;
if (inputX>=240 && inputY>=240)
document.getElementById(“bottomright”).style.opacity=1;
else
document.getElementById(“bottomright”).style.opacity=0;
}
</script>
</body>

and our CSS code looks like this:

.outerrect {
width: 500px;
height: 500px;
border: solid;
border-width: 3;
border-color: black;
}

.vertdivide {
width: 0px;
height: 497px;
border: solid;
border-width: 1;
border-color: black;
position:absolute;
left: 260px;
top:10px;
}

.horizdivide {
width: 497px;
height: 0px;
border: solid;
border-width: 1;
border-color: black;
position:absolute;
top: 250px;
}

.innerrect {
width:250px;
background-color: blue;
opacity: 0;
display: none;
}

#topleft {
display:block;
opacity: 0;
height:240px;
left:1px;
top:1px;
}

#topright {
display:block;
opacity: 0;
height:240px;
position:absolute;
top:11px;
left:264px;
}

#bottomright {
display:block;
opacity: 0;
height:260px;
position:absolute;
top:254px;
left:264px;
}

#bottomleft {
display:block;
opacity: 0;
height:260px;
position:absolute;
top:254px;
left:11px;
}

We made few mistakes, for instance, we spelled “opacity” wrong; we forgot a parenthesis and etc. Many these simple mistakes will cause the code not working so everyone should be carefully with that! This work is very interesting and I hope we get more of those to work in class!

Week 3: Javascript Work

http://192.168.50.184/~xj417/week3/

After learning how to use javascript, I added 3 new buttons to my webpage. The first button is right on top of the “top ten attractions of Yunnan, which looks like “>>>>>>>>>” this. By clicking this button, the image above the button will switch to another one. The second button that I made can change the color for the words “top ten attractions of Yunnan. In order to do so, you just need to click on the words itself, which is very simple. The last button is located on the bottom of the page, which says “click me to sign up for the trip”. Once you click that button, it will tell you where to sign up. Although I only added three buttons to my page,I think javascript is a very amazing tool to use for creating webpages and I really hope to learn more about it!

Week 4 Interaction Lab: Serena Uy

Last week’s lab challenged me to step out of my comfort zone (coding simple geometric shapes) and use function, iteration, conditionals, and mouse and keyboard interactions.

For the longest time, I was boggled as to what project to create (or even how to get started on it) as I am still in the process of learning processing. However, with the guidance of my peers and the Getting Started with Processing book, I managed to complete said task.

Screen Shot 2016-02-29 at 18.32.07

The animation I created is a simple one; I focused on understanding what I was inputting into my code and learning the importance of coordinates, etc. This way, I can create more complex codes in the future (my goal is to make a flower animation).

Screen Shot 2016-02-29 at 22.30.48

Above is my code.

IMG_8924

I really hope that working continuously on processing will improve my skills and that it will show in the succeeding labs.

Week 3 Interaction Lab: Serena Uy

This particular week’s lab challenged me to  use the processing skills I learned in class. Because I am a beginner at processing, I wanted to create a simple animation that fulfilled all the necessary requirements for said lab.

Initially, I was unsure as to what animation I wanted to do. After much thought, I decided to try combining different geometric shapes to see what animation I could make. Screen Shot 2016-02-29 at 17.11.47

Here is how my animation looks like. I believe that after this exercise, I have more confidence (step by step) to accomplish more complex and creative works with processing.

Screen Shot 2016-02-29 at 17.11.55

This is my code. As you can tell from the title, I am still looking for ways to continually improving my processing skills.

IMG_8923

Week 4 – February 24, 2016 – Project Brainstorming

The robot idea that I came up with this week is: BroBot-Your Personal Laundry Botler.

Purpose: to create a robot that folds laundry

Sensors needed: light sensor (x4)

Materials needed: Servo Motors (x6), clear laser cut plastic, bread board (x4), Arduino Uno, Resistors (x4), wires, connectors between servo and plastic (x4)

Basic concept: BroBot has four light sensors that will be placed under a clear, hard plastic. Each of these light sensors correspond to a plastic panel attached to a servo. When a piece of clothing is set over a light sensor, the light sensor senses complete darkness. In turn, the servo associated with that light sensor, sweeps once, and folds the clothing covering the sensor. When the clothing has been folded, the light sensor can once again sense the presence of light, and the servo will sweep the panel back to its original position. BroBot works by first folding the right side of a shirt, then the left, followed by the bottom of the shirt, and finally the top.

BroBot’s example logic:

IMAG0980

Top view of BroBot:

IMAG0978Parameters to consider: T-shirt size

Isometric view of Brobot:

IMAG0979

Flow chart for last week: functions of robotic carflowchart