# Lab 7 by Shawn Zeng & Yiyi Zhang

In lab 7, we were asked to use “array” and “class” to make some interesting effects. Since our midterm projects used a lot of “array” and “class”, we were quite familiar with these two powerful tools. Shawn combined the bouncing examples and another example of showing the track of a dot, then made bouncing balls which have tracks following behind.

The following are his codes:
Ball ball;
ArrayList balls;
Random rand=new Random();

public void settings()
{
size(600, 400);
}
public void setup()
{
smooth();

ball= new Ball(width/2, height/2);

balls= new ArrayList();
}

public void draw()
{
background(255);

ball.move();
ball.bounce();
ball.display();

for(Ball temp:balls)
{
temp.move();
temp.bounce();
temp.display();
}
}

class Ball
{
int[] x=new int[50],y=new int[50];
Integer xSpeed,ySpeed;

Ball(int _x,int _y)
{
int last=x.length-1;
for(int i=0;i<x.length;i++)
{
x[i]=0;
y[i]=0;
}
x[last] =_x;
y[last] = _y;
xSpeed = 10+rand.nextInt()%4;
ySpeed = 10+rand.nextInt()%4;
}

void move()
{
int last=x.length-1;
for(int i=0;i<last;i++)
{
x[i]=x[i+1];
y[i]=y[i+1];
}
x[last] =x[last]+xSpeed*2;
y[last] =y[last]+ySpeed*2;
}

void display()
{
for(int i=0;iwidth||x[last]height||y[last]<0)
{
ySpeed*=(-1);
}
}
}
public void mouseClicked()
{
}

I combined the bouncing example with a famous art work. It is Renoir's "Dance at Bougival". I made a huge red heart over two main characters and random-size snow. If you click the mouse repeatedly, the snow will fall from your click, also the heart will be transparent until it completely disappears. I think this would be a good interaction between the audience and the picture. By clicking the mouse, the two characters will gradually appear, and the ardent love will be viewed directly as well.

Here is my code:
PImage img;
int a=255;
Ball ball;
ArrayList balls;

void setup(){
size (390,500);
smooth();

ball= new Ball(width/2, height/2);

balls= new ArrayList();
}

void draw(){
background(255);
image(img, 0, 0);
//translate(-170, -5);
//scale(8.0);
//fill(255, 0, 0,a);
//beginShape();
//vertex(50, 15);
//bezierVertex(50, -5, 100, 5, 50, 45);
//vertex(50, 15);
//bezierVertex(50, -5, 0, 5, 50, 45);
//endShape();

ball.move();
//ball.bounce();
ball.display();

for(int i=0; i<balls.size();i++){
Ball temp=balls.get(i);
temp.move();
//temp.bounce();
temp.display();
}

translate(-170, -5);
scale(8.0);
fill(255, 0, 0,a);
beginShape();
vertex(50, 15);
bezierVertex(50, -5, 100, 5, 50, 45);
vertex(50, 15);
bezierVertex(50, -5, 0, 5, 50, 45);
endShape();
}

class Ball{
int x,y;
float xSpeed,ySpeed;
float s=random(6,18);

Ball(int _x,int _y){
x =_x;
y = _y;
xSpeed = 0;
ySpeed = random(1,3);
}

void move(){
x =x+int(xSpeed);
y =y+int(ySpeed);
}

void display(){
noStroke();

fill(255,255,255);
ellipse(x,y,s,s);

}
}

void mouseClicked(){
a-=5;
}

"213b4535351307c71f0143.jpg" is exactly the background picture I have used. Once you run the project, it will look like this:

Then you can click the mouse, and you will view:

Finally, you will see the heart disappear:

But you can still play with the snow by clicking the mouse! XD

# Lab 7 Using classes, arrays and arraylists

The first time I’ve ever seen snow was in January in Shanghai, and it was not even snowing apparently only ‘flurries’. So for this lab, I wanted to try creating a night sky with snow falling. I followed the example that was posted on the schedule with the Balls and adapted it to suit snow falling.

*It would be awesome if with just one click of the mouse I made snow fall (just like on my screen).*

The code:

Snow SnowFlake;

ArrayList<Snow> Snowfall;

void setup() {
size(720,360);
SnowFlake = new Snow (width/2,height/2);
Snowfall = new ArrayList<Snow>();
noSmooth();
noStroke();
}

void draw(){
background(0);

SnowFlake.move();
SnowFlake.display();

for (int i = 0; i < Snowfall.size(); i++) {
Snow snowing = Snowfall.get(i);
snowing.move();
// snowing.bounce();
snowing.display();
}
}

class Snow{
float myX, myY;
float myXspeed, myYspeed;
float s = random(1,5);

Snow(float x, float y) {
myX = x;
myY = y;
myXspeed = random(-1,2);
myYspeed = random(1,3);
}

void move() {
myX += myXspeed;
myY += myYspeed;
}

void display() {
noStroke();
fill(255);
ellipse(myX, myY, s, s);
}
}

Screenshot:

# Midterm – Talking plant 4

More changes and improvements to the talking plant project:

So now that I am working with more than just one sensor, apparently the project becomes more complicated and I can’t seem to be able to have 2 different sensor values being sent from arduino to processing by just calling / declaring a different name variable. Thus, I am now using on the the built in examples in Arduino called SerialCallResponse which sends an ASCII to processing and works with three different sensors. So I am just currently working with 2 sensors for this midterm project and so I will just ignore the third sensor in the example and work my way with it. Here is the arduino code:

int firstSensor = 0; // first analog sensor
int secondSensor = 0; // second analog sensor
int thirdSensor = 0; // digital sensor
int inByte = 0; // incoming serial byte

void setup()
{
// start serial port at 9600 bps:
Serial.begin(9600);
while (!Serial) {
; // wait for serial port to connect. Needed for Leonardo only
}

pinMode(2, INPUT); // digital sensor is on digital pin 2
establishContact(); // send a byte to establish contact until receiver responds
}

void loop()
{
if (Serial.available() > 0) {
// get incoming byte:
// delay 10ms to let the ADC recover:
delay(10);
// read switch, map it to 0 or 255L
thirdSensor = map(digitalRead(2), 0, 1, 0, 255);
// send sensor values:
Serial.write(firstSensor);
Serial.write(secondSensor);
Serial.write(thirdSensor);
}
}

void establishContact() {
while (Serial.available() <= 0) {
Serial.print(‘A’); // send a capital A
delay(300);
}
}

—–

The example also gives the code for processing. I used the same code that is provided, however, I incorporated my own previous processing code into the example in order to make my talking plant project work. It took some tweaking here and there and playing with the original code but managed to make it work HOORAYYY 😀

There may be some pieces of code here and there that are part of the built-in example but is not used for the project and has no effect on my final midterm project.

Here is the processing code:

import processing.serial.*;
import processing.sound.*;

int bgcolor; // Background color
int fgcolor; // Fill color
Serial myPort; // The serial port
int[] serialInArray = new int[3]; // Where we’ll put what we receive
int serialCount = 0; // A count of how many bytes we receive
int xpos, ypos; // Starting position of the ball
boolean firstContact = false; // Whether we’ve heard from the microcontroller
int ser, val, wVal;
SoundFile[] file; // make an array of files
SoundFile [] wFile;

// check to see if a sound if playing
boolean isSoundPlaying = false;
boolean iswSoundPlaying = false;
int counter = 200; // make a counter

void setup() {
size(256, 256); // Stage size
noStroke(); // No border on the next thing drawn

// Set the starting position of the ball (middle of the stage)
xpos = width/2;
ypos = height/2;

// Print a list of the serial ports for debugging purposes
// if using Processing 2.1 or later, use Serial.printArray()
println(Serial.list());

// I know that the first port in the serial list on my mac
// is always my FTDI adaptor, so I open Serial.list()[0].
// On Windows machines, this generally opens COM1.
// Open whatever port is the one you’re using.
//String portName = Serial.list()[4];
// myPort = new Serial(this, portName, 9600);
println(Serial.list());
myPort= new Serial(this, “/dev/tty.usbmodem1421”, 9600); //can use [num]instead of the usb thing. 7th value on the list.

file = new SoundFile[3];
file[0] = new SoundFile(this, “Cooing.mp3”);
file[1] = new SoundFile(this, “Crying.mp3”);
file[2] = new SoundFile(this, “Laughing.mp3”);

wFile = new SoundFile[3];
wFile[0] = new SoundFile(this, “Chime.mp3”);
wFile[1] = new SoundFile(this, “Harp.mp3”);
wFile[2] = new SoundFile(this, “Fail.mp3”);

}

void draw() {
background(bgcolor);
fill(fgcolor);
// Draw the shape
ellipse(xpos, ypos, 20, 20);

if (val > 22 && val < 30) { // if val is greater than 10, play a file.
// if sound is playing, don’t play the file
if (isSoundPlaying || iswSoundPlaying) {
} else { // else play the file, make isSoundPlaying true and start counter over
file[1].play();
isSoundPlaying = true;
counter = 200;
file[1].amp(1.0);
}
} else if (val > 8 && val < 22) { // if val is greater than 10, play a file.
// if sound is playing, don’t play the file
if (isSoundPlaying || iswSoundPlaying) {
} else { // else play the file, make isSoundPlaying true and start counter over
file[0].play();
isSoundPlaying = true;
counter = 200;
}
} else if (val > 3 && val < 8) { // if val is greater than 10, play a file.
// if sound is playing, don’t play the file
if (isSoundPlaying || iswSoundPlaying) {
} else { // else play the file, make isSoundPlaying true and start counter over
file[2].play();
isSoundPlaying = true;
counter = 200;
}
}

if (wVal > 175 && wVal < 300) { // if val is greater than 10, play a file.
// if sound is playing, don’t play the file
if (isSoundPlaying || iswSoundPlaying) {
} else { // else play the file, make isSoundPlaying true and start counter over
wFile[2].play();
iswSoundPlaying = true;
counter = 200;
}
} else if (wVal > 170 && wVal < 175) { // if val is greater than 10, play a file.
// if sound is playing, don’t play the file
if (isSoundPlaying || iswSoundPlaying) {
} else { // else play the file, make isSoundPlaying true and start counter over
wFile[1].play();
iswSoundPlaying = true;
counter = 200;
}
} else if (wVal > 160 && wVal < 170) { // if val is greater than 10, play a file.
// if sound is playing, don’t play the file
if (isSoundPlaying || iswSoundPlaying) {
} else { // else play the file, make isSoundPlaying true and start counter over
wFile[0].play();
iswSoundPlaying = true;
counter = 200;
// wFile[0].amp(0.0);
}
}

counter–;
if (counter<0) {
isSoundPlaying = false;
iswSoundPlaying = false;
file[1].amp(0.0);
//make the file play and go away at a lower volume (die out)
// wFile[0].amp(1.0);
}
print(“counter= “+counter+” “);
}

void serialEvent(Serial myPort) {
// read a byte from the serial port:
// if this is the first byte received, and it’s an A,
// clear the serial buffer and note that you’ve
// had first contact from the microcontroller.
// Otherwise, add the incoming byte to the array:
if (firstContact == false) {
if (inByte == ‘A’) {
myPort.clear(); // clear the serial port buffer
firstContact = true; // you’ve had first contact from the microcontroller
}
}
else {
// Add the latest byte from the serial port to array:
serialInArray[serialCount] = inByte;
serialCount++;

// If we have 3 bytes:
if (serialCount > 2 ) {
val = serialInArray[0]; // val = serialInArray[0];
wVal = serialInArray[1]; // wval = serialInArray[1];

fgcolor = serialInArray[2];

// print the values (for debugging purposes only):
println(val + “\t” + wVal + “\t” + fgcolor);

// Send a capital A to request new sensor readings:
myPort.write(‘A’);
// Reset serialCount:
serialCount = 0;
}
}
}

—-

I am also very happy to say that Professor Dan has very nicely lended me his plant George for me to test the project and I’m glad to see that it works as well! (Hopefully nothing bad happens to George though).

Final set-up pictures: (vibration sensor on leaf and moisture sensor in pot plant on the opposite side)

There is still room for a lot of improvement to this project and it is still a piece in the making for me. For instance, I realised that the music files for the moisture sensor may be a bit too long and it would be worth cutting them down to 4 seconds instead. Also, once the moisture sensor is placed inside the plant pot, it won’t stop playing and it is hard to interact with the leaves(vibration sensor) afterwards, so maybe I could further look into that and how the different sensors could interact without overlapping over each other as well. Maybe the moisture sensor is not the best to use in that case.

I had a good time working on this project and it did take a lot of time and understanding and thinking but I am really glad that it is turning out okay. I definitely feel that things happen if you will it!

(I took some videos of myself interacting with the plant(George) that I would have loved to post, but unfortunately the size of the files are too big to be uploaded apparently and I am not quite sure how to make them smaller. )

# Dumpling Escape ~Kilian Hauser

Game Description: In this game you are in the form of a dumpling trying to “capture” or collide with floating crystals to gain points. As you are trying to collect points you will encounter some parkour like scenarios such as jumping up columns, running around  on an elevated platform, and escaping from 3 “monsters” which will try and eat you to prevent you from continuing any farther. Additionally, at first you are really fast compared to things, however, the longer you play the slower you become so it is a rush to collect everything before these “monsters” become faster than you. Involving strategy, skill, and some luck you have the chance to win the game or get the high score.

Desired Effect:

The effect I was trying to produce was to emanate the feeling of being in a desert and the emotions associated with it. At first a desert is beautiful and enjoyable to watch which correlate to starting with a great speed boost over the “monsters” that are in the far corners of the map. There much ease in moving and jumping and it appears that it is an easy game but enjoyable collecting things and easily out pacing everything. The more time that passes in a dessert, heat and other factors takes it toll on you. In relation to the game, as more time passes in the game eventually you slow down but also jump less high displaying fatigue. Every 10 seconds your speed and jumping abilities are reduced. With fatigue, eventually in the desert it overwhelms you and engulfs everything. In the end of the game the monsters are faster than you but also you cannot jump to safety anymore meaning you are rather hopeless, guessing you should have completed things faster to get a higher score. This draining emotion was my desired effect and I believe the aesthetics to everything aid in the over all feel. The far background is a sharp contrast to things showing where you want to get to but you cannot escape the desert.

Mac version

Windows version

# Dumpling Danger

In my game I tried to focus on immersing the player by making the game challenging. It uses simple colors and provides engaging background music so the player can focus. The first level is easy so the player can get the hang of the game, but the number of Jerrys doubles every level. To progress to the next level the player must collect all fifteen soy cubes before their speed runs out. The double danger of decreasing speed and increasing jerrys makes the game challenging but not too difficult, creating immersion.

# [Expressing Data]First Lab

It’s my data visualization during 10.27 and 10.28 about what i drank.

I was surprised that in two days i ONLY drank half cup of water! So I expressed it by drawing a little grey dot. Haha.

The big square means what kind of drink I drank. And the relatively small square means where I bought them. Since I only recorded for two days, so I don’t have a lot of data to do with.:P

Anyway, the drawing and visualization itself is quite fun.

# Interaction Lab Lab 7: Jiahui Wang

In today’s class I tried to make a snowy scene by using classes, arrays and arraylists. We had a sample code but it was really hard for me to understand the arrays. Later, I asked for help and then I could understand the code and changed the sample code into a snowy scene. I got to know the relationship between instance and object.

I let the white balls have random size in a range and fall with a random speed downwards. In x axis, the balls have a random speed between -3,3 so that they look more randomly falling down.

Here is the code:

Ball ball;
ArrayList<Ball> balls;

void setup() {
size(920, 640);
smooth();

ball=new Ball(width/2, height/2);
balls=new ArrayList<Ball>();
}

void draw() {
background(0);

ball.move();
ball.display();

for (int i=0; i<balls.size(); i++) {//object
Ball temp= balls.get(i);
temp.move();
temp.display();
}
}

class Ball {
float x, y;
float xSpeed, ySpeed;
float a = random(6,20);

Ball(float _x, float _y) {
x=_x;
y=_y;
ySpeed = random(1, 3);
xSpeed= random(-3,3);
}

void move() {
y += ySpeed;
x += xSpeed;
}

void display() {
stroke(0);
fill(255);
ellipse(x, y, a, a);
}
}

//void mouseClicked() {
//}

# Lab 8_10.30

In today’s lab, my goal is to set up a sketch with Processing by using classes, arrays and arraylists.

At first, I just typed the sample code in the class, and I tried to change something to understand how to use classes and arrays. The following is the code:

Ball ball;
ArrayList<Ball> balls;

void setup(){
size(480,360);
smooth();

ball = new Ball (width/5,height/5);

balls = new ArrayList<Ball>();
}

void draw(){
background(0);
ball.move();
ball.bounce();
ball.display();

for(int i = 0; i<balls.size(); i++){
Ball temp = balls.get(i);
temp.move();
temp.bounce();
temp.display();
}
}

class Ball{
int x, y;
float xSpeed, ySpeed;

Ball(int _x, int _y) {
x=_x;
y=_y;
xSpeed= random(1,3);
ySpeed= random(1,3);
}
void move(){
x=x+int(xSpeed);
y=y+int(ySpeed);
}

void bounce(){
if ((x>width) ||(x<0)){
xSpeed= xSpeed * – 1;
}
if ((y>height) ||(y<0)){
ySpeed= ySpeed * -1;
}
}

void display () {
stroke (0);
fill(245);
ellipse(x,y,5,5);
}
}

void mouseClicked() {
}

And then I tried to do design snow or Rain falling from the top of the screen. I found that I have to change the size of the balls so that they will look like the snow. And I had to design where it comes from, which is from the top of the screen. Thus, I made it appear automatically from the top, and when my mouse touches it, the snow will disappear.

# Lab 6: Serial Communication (Angela and Jamie)

Instructors: Antonius and Matt

Lab Session: 1:45-3:00 pm

We started out with the potentiometer sketch, changing the color of the background based on the potentiometer readings. We changed the background from blue to pink, and a rectangle from yellow to green. Our code was a basic serial sketch that translates data from arduino to processing. We tried to do our own wiring, but we weren’t sure if it was correct. Matt was very kind in helping us; he helped us position the potentiometer correctly after which our sketch ran smoothly. Matt also helped us with the code, changing serial.Write to serial.println to allow us to view the potentiometer values instead of bytes. He also taught us to change our serial.List based on the project.

Here is our code for this part:

Processing:

import processing.serial.*;

Serial myPort;
import processing.serial.*;

void setup() {
size(300,240);
println(Serial.list());
myPort = new Serial(this, Serial.list()[5], 9600);

}

void draw() {

while (myPort.available() > 0) {

println(inByte);

background(inByte,60,150);
//background(mouseY,60,130);

fill (inByte, 240, 89);
rect(60, 55, 60, 60);
}
Arduino:

void setup() {

Serial.begin(9600);

}

void loop() {

sensorValue = sensorValue/4;

Serial.write(sensorValue);
// Serial.println(sensorValue);

}

In our next sketch, we used processing to send data to switch on and off two leds on the breadboard. We initially wanted the mouse position to gradually change brightness of one led, however, we were warned by Aven that this may not be very possible (since the arduino only reads high and low for leds). He then suggested to do two leds that switch on and off depending on mouse position. We then rewired the breadboard and changed the code with Matt’s help. We defined each led pin as well.

Here’s the new code:

Processing:

import processing.serial.*;

Serial myPort;
import processing.serial.*;

void setup() {
size(300,240);
println(Serial.list());
myPort = new Serial(this, Serial.list()[5], 9600);

}

void draw() {

while (myPort.available() > 0) {

println(inByte);

background(inByte,60,150);
//background(mouseY,60,130);

fill (inByte, 240, 89);
rect(60, 55, 60, 60);
}

}

void mouseMoved() {
if (mouseX < width/2) {
myPort.write(0);
} else {
myPort.write(1);
}
}

Arduino:

const int greenPin = 11;
const int redPin = 10;
const int yellowPin = 9;
int inByte;

void setup() {
// put your setup code here, to run once:

Serial.begin(9600);
pinMode(greenPin, OUTPUT);
digitalWrite(greenPin,LOW);
pinMode(redPin, OUTPUT);
digitalWrite(redPin,LOW);
pinMode(yellowPin, OUTPUT);
digitalWrite(yellowPin,LOW);
}

void loop() {
// put your main code here, to run repeatedly:
if (Serial.available() > 0) {

}

if (inByte == 0) {
digitalWrite(greenPin, HIGH);
digitalWrite(redPin, LOW);
} else {
digitalWrite(greenPin, LOW);
digitalWrite(redPin, HIGH);
}

}

# Lab 7: Snowfall

Since I had already been working on classes and arrays for my midterm with the help of Aven, I kind of already knew how to create classes for a snowball. So I started on the lab earlier on Friday morning when I borrowed the school computer since my own was damaged. During the day, and in class I set about researching ways I could make my flakes more interactive and interesting for the viewer.

Initially the design was random ball sizes falling at random speeds. But then i did research on how one can make things less opaque as they change position, and I came across examples involving the map() function and the alpha variable in the fill() and stroke() functions. I used these to make my flakes reduce opacity based on where they were in their descent.

Also similar to the maze game e made for the midterm, I checked for the boundaries of the setup so that the flakes stayed within the boundaries of the screen.

In the end, after class, I thought of how this could be a game based on the wind conditions of a certain place, so I added the x = x + descentX which changes the x position of the flakes as they go down. If i increase the descent X beyond zero, it’ll look like there’s wind blowing form the left of the screen into the snow, if it’s a value less than zero then the wind is blowing from the right. I imagine this can even be controlled by a sensor with arduino. I want to explore that option soon.

PS: I also thought of turning the flakes into gold stars but I ended switching them up for th roginal white flakes cause it looked better.

Here’s the code and how it turned out: