# Lab 4

int i=0;
int j=1;
float rot = 0;

void setup() {
size(500, 500);
}

void draw() {
background(50, 0, 120);
frameRate(100);

point(i, i);
pushMatrix();
translate(i, i);
rotate(rot);
line(30, 20, 85, 65);
line(85, 65, 30, 110);
line(30, 20, 55, 65);
line(55, 65, 30, 110);
popMatrix();
i+=j;
if (i >=500) {
j*=-1;
}
if (i<=0) {
j*=-1;
}

pushMatrix();
rotate(rot*5);
rot += 0.1;
popMatrix();
}

lab4

I use the lines to draw the boomerang and the order”if” to let it spin within the screen. I try to fill color in it, but it did not work. And actually, I want the boomerang to spin itself, but I failed.

# Interaction Lab 4 – Tristan’s Shapes

For this lab I couldn’t think of any original designs so I used a lot of random generation.  Essentially my program generates a random number of random sized shapes that have a random color.  It does so slowly enough for you to enjoy the process before seeing the final image.  Unfortunately it isn’t very interactive, but it involves all of the various components we were meant to use.  Here is the final code:

/* Lab 4 Goals
1. Use a Conditional
2. Use an Iteration
3. Use a Function
*/

/* I will be making a program that
will draw several random shapes with a
random number of sides each */

//Declare necessary variables
int i=1;
float x, y, sides, shapes, r, g, b;

void setup() {
//Create the environment
size(640, 480);
background(255);
frameRate(2);
noStroke();

//Find out how many shapes to make (once only)
shapes = random(5, 50);
}

void draw() {
//Track our progress
print(int(shapes));
print(” “);
println(i);

//Generate a random number of sides
sides = random(3, 9);

//Generate a random color
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);

//Draw the shape with our own function
drawShape(sides, r, g, b);

if (i > shapes) {
//Break the loop when we have enough shapes
noLoop();
}

//Complete this iteration
i++;
}

//This custom function draws the shape using random vertices
void drawShape(float sides, float red, float green, float blue) {
//Color the shape
fill(red, green, blue);

//Start the shape
beginShape();

//Calculate various vertices (one for each side)
for (int j=0; j < sides; j++) {
x = random(-100, width+100); //Note: the shapes extend beyond the edge of
y = random(-100, height+100); //the screen to fill out the edges with color
vertex(x, y);
}

//Finish the shape
endShape();
}

Here’s an example of a final screen:

Some of the biggest challenges I ran into involved stopping the draw loop when it finished, and deciding where to put the shapes.

For the looping problem, essentially the draw() program would continue on to the next loop and keep drawing more shapes even when the random limit was reached.  This even occurred when the drawShape() function was called from within an if(i<shapes) condition, which I don’t quite understand.  To prevent this, I had to use a variable ‘i’ to keep track of how many shapes had been drawn, and when the limit was reached the noLoop() function was called.

As for the shape placement, I was originally going to draw a few shapes in a line, like a display or gallery.  I did this by setting the x and y to random((i – 1)*(width/shapes) , i*(width/shapes)) [obviously height for y instead of width].  This essentially divides the screen by the number of shapes, then for each shape draws the vertices within that division.  (NOTE: ‘i’ had to be a global variable to do this, which I never changed).  However, with more shapes to draw each shape becomes much smaller, so I decided to change the code to what it is now.

# Lab4-Ripple by Processing Iteration&Condition

Final Effects:

Code by Myself
int i=1;
float x=random(width);
float y=random(height);

void setup(){
size(400,400);
background(200);
frameRate(30);
}

void draw(){
i+=5;
circles(x,y,i);
if (i>200){
x=random(width/4,3*width/4);
y=random(height/4,3*height/4);
i=1;
background(200);
}
}

void circles(float x,float y,int i){
for (int n=int(random(4,8)); n>0; n–){
println(n);
noStroke();
fill(30,200-10*n,255);
}
}

# Lab3&Lab4

In lab3, I was really frustrated with processing. Drawing with vertex is hard for me at the beginning. However, I get to known that it’s a good way to draw and test at the same time so it’s not so hard to do that now!

I drew an Issac hahah

here’s the code

int x,y;

void setup(){
size(640,480);
x=0;
y=0;
background(105,71,61);
}

void draw(){
//body
strokeWeight(10);
fill(197,158,155);
beginShape();
vertex(293,198); //zuoshang
vertex(350,198);//youshang
vertex(360,250);//you1
vertex(360,270);//you2
vertex(357,290);//youxia
vertex(340,290);
vertex(340,270);
vertex(305,270);
vertex(305,290);
vertex(288,290);//zuoxia
vertex(283,270);//zuo2
vertex(283,250);//zuo1
endShape();

//arms
beginShape();
vertex(350,198);
vertex(375,230);
vertex(365,247);
vertex(360,240);
endShape();

beginShape();
vertex(293,198);
vertex(270,230);
vertex(280,247);
vertex(283,240);
endShape();

smooth();
strokeWeight(10);
fill(197,158,155);
ellipse(width/2,120,150,150);
//eyeblack
fill(0);
ellipse(280+(sin(x)*3),126,35,35);
ellipse(362+(sin(x)*3),126,35,35);
x++;
//light in his eye
fill(225);
noStroke();
ellipse(276+(sin(x)*3),120,14,14);
ellipse(358+(sin(x)*3),120,14,14);
x++;
//mouth
fill(0);
beginShape();
vertex(307,137); //shangzuo
vertex(332,137); //shangyou
vertex(338,143); //youzhong
vertex(338,155); //youxia
vertex(301,155); //zuoxia
vertex(301,143); //zuozhong
endShape();
//teeth
noStroke();
fill(225);
rect(305,145,28,5); //zuoshangdian,chang,gao
//tears
noStroke();
fill(156,200,204);
beginShape();//left
vertex(268,138);//tearzuoshang
vertex(293,138);//youshang
vertex(293,191);//youzhong
vertex(268,173);//
endShape();
fill(156,200,204);//reght
beginShape();
vertex(350,138);//tearzuoshang
vertex(376,138);//youshang
vertex(376,173);//youzhong
vertex(350,191);//
endShape();

}

(I lest some comments in Pinyin)

In lab4, I did a bouncing ball

Here’s the code

int x=0;
int speed =4;
void setup(){
size(300,300);
smooth();
}
void draw(){
background(255, mouseX+100 ,mouseX+100);//color changes with mouse
move();
bounce();
display();

}
void move(){
x=x+speed;
}
void bounce(){
if ((x>width)||(x<0)){
speed=speed*-1;
}
}
void display(){
int d=0;//trail of the ball
for(int c=225;c>0; c-=7){
fill(c);
noStroke();
rect(d,height/2,7,7);
d=d+15;
noStroke();//ball
if (speed>0){
fill(175,43,39);
}else{
fill(59,84,89);
}
ellipse(x,150,80,80);
}
}

# Lab 3 – 恭喜发财，红包拿来 (Google Translate: Kung Hei Fat Choy, red envelopes used)

So, things are starting to get pretty hectic here at Interaction lab. We are learning more and more processing codes, which can become very overwhelming for people like me, who are technologically challenged. Nevertheless, the Professors, GAFs and student helpers at IMA make life a bazillion times better. Today’s project would not have been possible without all their 帮助. Thank you to everyone who assisted me!!!

This week, we had to create a project which incorporated conditionals, loops and functions. (Yes, it is as difficult as it sounds).  At first, I just wanted to make white circles appear at different times on the screen – a modest goal for the lesson, but a challenge nonetheless. Alas, the task was harder than I thought. I ended up needing Professor Antonius’s help -as always. After figuring out how to make the white circles randomly appear, I was left to build in the conditionals and loops myself. I ended up making it so that both red and blue circles appeared on the page. The color of the circle was dependent on where the circle was located (if that makes sense).

Afterwards, I  wanted to do something more original and funky. So, I thought…hey, Chinese New Year, Hong Baos, prosperity, 土豪s. Thus, I decided to create a really 土 Chinese New Year poster/image/picture. The poster/image/picture involved gold and red (the most popular红包colors here in 中国) colored hongbaos falling from the screen – WOW, SO 土. It was a fun experience and I learnt a lot. The falling hongbaos symbolize prosperity and auspiciousness for the coming semester of Interaction Lab. <——— I am beyond cheesy.

P.S. The pictures are not very good as the hong baos fall way too fast for me to capture the process properly. Hopefully they give some idea of what went on. Best to just use the code and see for yourself though! 恭喜发财 and happy Chinese New Year.

Code:

//i want red and gold hong baos to
//fall from the sky in celebration
//of Chinese New Year

PImage bg;

void setup ( ) {
size (1040, 789);
}

void draw ( )
{
background (bg);
lightUpCircle();
loop();

}

void lightUpCircle ( )
{ int x = int(random(0,width));
int y = int(random(0, height));
rect (x,y,40,60);
if(x/300 == 0) {
fill (255,215,0);
} else {
fill (255,0,0);
}

}

# Lab 3 – Shiny Stars

I wanted to create a picture which is full of stars and I wanted to make the stars change color and start rotating once the mouse is pressed. However, though it looks easy, it is so hard to make. So I had to compromise to cut down the mouse-pressed part. Instead, I make the color change as the mouse moves, it is easier to make.

The hardest part I think should be how to make the stars all over the screen. We need to integrate one loop into the other loop. It is like, first you make a loop which can make a row of stars, then you make the other loop which make that row duplicate downwards.

And I look up the code for stars on processing.org which saved me a lot of efforts.

void setup() {
size(640, 360);
}

void draw() {
background(mouseY-100, 9 ,mouseX+50);

// make the stars all over the screen
for (int y = 8; y < height; y+=50) {// first we make a colomn of stars
for (int x = 8; x < width; x+=50) {// then we make a row of stars
// make the stars color change when the mouse moves
fill (mouseX, mouseY, 0);
//make each of the star rotate
pushMatrix();
translate(x, y);
rotate(frameCount / -100.0);
star(0, 0, 4, 7, 5);
popMatrix();
}
}
}

void star(float x, float y, float radius1, float radius2, int npoints) {
float angle = TWO_PI / npoints;
float halfAngle = angle/2.0;
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
float sx = x + cos(a) * radius2;
float sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}

# Nicholas Sanchez’s Paper Prototype

When I began this project, the I was initially challenged with coming up with an idea. After all, it seemed most of the already existing Heads-up displays were want of little, so my contribution proved discrete. I had to consider the Heads-up displays I liked better, which is to say I internalized what I liked, what I didn’t like, so as to incorporate the beneficial factors and dismiss the detrimental. For example, I really appreciated “Navdy’s” projection aspect, as it allowed the driver to see the road while driving. Aspects of Navdy that I didn’t like are the placement of Navdy, which is detrimental, and the hand-oriented command control. With these things considered, I went ahead and began designing my prototype.Here is what my process looked like:

First was the initial round of brainstorming. I decided I wanted to retain the notion of having apps on a projected dashboard. Thus, I sketched out potential designs, as well as mockups for the apps themselves

As I began to flesh out the potential apps that my Heads-up display would have, the paper trail and project grew larger and larger. Eventually, I made a large role which could be used to demonstrate the linear progression of my Heads-up display’s experience. Considering the logistics of these apps and the designs became difficult, but after a lengthy process I arrived at a semi-conclusion.

I wanted my paper prototype to be large and effective, so as to really help the audience/testers understand what made this heads-up display different. I used a large cardboard box and made everything about my project big, so that I that my Heads-up display’s features would be easily seen.

There is still quite a bit to consider about this prototype, and certainly improvements that can still be made. I suppose this whole process was a dynamic learning experience, as it allowed me to learn while doing, which certainly cannot be said for every exercise. This said, my project is not yet complete, and changes still must be made to make this prototype work to the degree it should.

# Step 1

On Wednesday February 4, 2015 we started our urban farm! After assembling the shelves we will use to hold the crops, we attached artificial lights that would serve as artificial sunlight. Then we selected which crops and flowers to plant. We first plant the seeds in temporary trays which will allow the seeds to grow into seedlings. Then we will transfer the seedlings into larger planting containers.

# Documentation of Lab 4 By Yuhan Qian

Processing by using functions, loops, conditionals is so amazing! This time, I made a short flash:a  ball dropping from the table hits a button and the button turns on the screen where shows the changing color circles. It is simply. But the sense of achievement of making moving things is surprisingly great! By the way, lots of thanks to Professor Antonius who is always so willing to help!

Code by myself with the help of Professor Antonius:

float x=100;
float y;
float speed=0;
float gravity=0.5;
boolean buttonHit = false;
void setup() {
size(600, 400);
y=height/2-15;
}

void draw() {
background(180);
//draw the table
noStroke();
fill(0);
rect(50, height/2, 180, 20);
rect(130, height/2+20, 20, 150);
rect(100, height/2+170, 80, 20);

//draw the screen
noStroke();
fill(0);
rect(300, 20, 250, 250);
noStroke();
fill(255);
rect(320, 40, 210, 210);

//draw the ball
noStroke();
fill(115, 106, 232);
ellipse(x, y, 30, 30);

//move the ball
ballMoving();

//draw the buttom
noStroke();
fill(255, 0, 0);
ellipse(280, height/2+175, 20, 20);
fill(38, 0, 0);
rect(260, height/2+175, 40, 15);
// if the button is hit, draw the circles
if (y>=350) {
buttonHit = true;
}

if (buttonHit)
{
drawCircle();
}
}

void ballMoving() {
if (x<255) {
x=x+1;
} else {
x=x+.8;
}
if (x>=255) {
y=y+speed;
speed=speed+gravity;
}
if (y>350) {
speed=speed *-0.85;
}
}

void drawCircle() {

int r=205;
int C=255;
int spacing=20;
while (r>15)
{
stroke(0);
if (r>=0) {
fill(C);
ellipse(425, 145, r, r);
C=C-28;
r=r-spacing;
println(r);
}
}
}

# Yizhang Hu’s Documentation for Lab 4

So sad, it is not beautiful and useful.

The color of the background will change through the moving of mouse, and the color of the small circles and big rectangle (or big circle) will change randomly. If you press the mouse, the big circle will change into rectangle; if not, it will keep as a circle. Moreover, the big circle or rectangle will move with mouse.

Here is the code for today’s lab:

float myColor=5;

float angle=0;

void setup(){

size(500,500);

smooth();

}

void draw(){

background (mouseX/2,mouseY/2,125);

fill(myColor,random(255),120);

myColor+=0.3;

for (int i=1;i<=height-1;i+=10){

ellipse(i,i,10,10);

}

if(mousePressed){

translate(mouseX,mouseY);

rotate(angle);

rect(-15,-15,50,50);

angle+=0.1;

}

else{

translate(mouseX,mouseY);

rotate(angle);

ellipse(-15,-15,50,50);

angle+=0.1;

}

}

Here is the video for my work:

lab 4