Lab 3 – An attempt at processing.

This is the first times I am getting introduced to processing and learning about it. I feel that there is so much that I can learn and do with processing and coding and I hope to be able to improve and do more things in the future.

This first attempt was just playing around with some shapes, notably ellipses and rectangles. There is not much happening on the page but I did my best to incorporate the little things that we had covered so far in the class and just a little bit of experimenting.

I want to learn and do a lot more things, but this is just my first times posting about using processing and some basic ground work.

I thought that it was quite hard figuring out the spacing and the trial&error style of placing elements on your page. There is also something about the whole aesthetic and the things happening on the page. I think there is quite some thinking to be done when doing processing. I really enjoyed the process of finding the correct tint of colours I wanted for my spheres and playing around with rotating wheels. So here is my basic processing code:

//I want to be able to draw basic shapes such as spheres and experiment placing them on my page.

int myPos = 100;

void setup () {
size(800, 800);
background(0);

}

void draw() {
stroke(0);
background(0);

fill(255,182,193); //draw a pink circle
ellipse(myPos, 50, 100, 100);
fill(174,238,238); //draw a blue circle
ellipse(myPos+300, 50, 100, 100);
fill(250,250,210); //draw a yellow circle
ellipse(myPos+600, 50, 100, 100);

//make a triangle using ellipses and push and pop matrix
pushMatrix();
translate(width/5,height/6);
fill(255,182,193);
ellipse(myPos, 50, 100, 100);
popMatrix();

pushMatrix();
scale(0.8); //making this blue circle smaller
translate(myPos,400);
fill(174,238,238);
ellipse(myPos+300, 50, 100, 100);
popMatrix();

pushMatrix();
translate(-170,height/6);
fill(250,250,210);
ellipse(myPos+600, 50, 100, 100);
popMatrix();
//}

//I found an example on the processing website that created a colourful spinwheel,
//and I wanted to give it a try so I used the same type of code on the page,
//but changed it in order to personalise it the way I wanted it displayed on my page.
//void draw(){
//making a rotating ellipse in the smaller blue circle, like a multicoloured timer
smooth();
if (frameCount % 1 == 0) {
fill(frameCount * 3 % 255, frameCount * 5 % 255,
frameCount * 7 % 255);
pushMatrix();
translate(myPos+300,360); //make the multicoloured ellipse rotate in smaller blue ellipse
ellipse(0, 0, 80, 15);
popMatrix();
}

//extending this timer rotating ellipse to other circles.
smooth();
if (frameCount % 1 == 0) {
fill(frameCount * 3 % 255, frameCount * 5 % 255,
frameCount * 7 % 255);
pushMatrix();
translate(myPos, 50);
ellipse(0, 0, 100, 15);
popMatrix();
}

smooth();
if (frameCount % 1 == 0) {
fill(frameCount * 3 % 255, frameCount * 5 % 255,
frameCount * 7 % 255);
pushMatrix();
translate(myPos+300, 50);
ellipse(0, 0, 100, 15);
popMatrix();
}

smooth();
if (frameCount % 1 == 0) {
fill(frameCount * 3 % 255, frameCount * 5 % 255,
frameCount * 7 % 255);
pushMatrix();
translate(myPos+600, 50);
ellipse(0, 0, 100, 15);
popMatrix();
}

//making rotating squares in two of the circles
smooth();
if (frameCount % 1 == 0) {
fill(frameCount * 1 % 255, frameCount * 3 % 255,
frameCount * 5 % 255); //I wanted to make the speed of colours change a bit more slowly.
pushMatrix();
translate(width/3, height/4);
rect(50, 50, 50, 50);
popMatrix();
}

smooth();
if (frameCount % 1 == 0) {
fill(frameCount * 1 % 255, frameCount * 3 % 255,
frameCount * 5 % 255);
pushMatrix();
translate(myPos+450, height/4);
rect(50, 50, 50, 50);
popMatrix();
}
//instead turns out that they rotate around the ellipses, but I still find the colours cool.
}

Assignment 4: Response to the Medium is the Message

Considering a medium as an entity within itself seems an uncommon idea. A medium is usually there to translate abstract processes into almost a tangible form. The movie was used as an example in the reading. The movie’s message is to translate “lineal connections to configurations”. By itself, the movie has a purpose and meaning. However this message, when done seamlessly, will cause the medium and its message to go unnoticed. Thus, the reading’s reference to the poignant phrase “if it works, its obsolete” makes sense in light of the relationship of the medium to content. The interesting part of this confusing read is how it tries to focus on something that is generally dismissed.

The example of the light bulb helped me understand the concept behind the reading better. I liked the new take on the light bulb as a medium which molds the range of activities that happens under it, such as a night sporting activities or delicate surgery. I found it interesting to look at the light bulb in this manner. The electric bulb, while an integral part of the activities it lights up, often goes unnoticed. It seems a huge step to even consider the bulb as responsible for the way the event goes, yet these activities would not be occurring without the help of the light bulb. I think that the reading’s careful separation of the content from the medium was a nice way to understand the importance of the medium’s message. The reading still made sure not to diminish the importance of the content.

Response to The Medium Is the Message

Marshall Mcluhan was a pioneer in the media field, who thought that all new technologies are message. They are not medium. His most famous sentence was “the content of any medium is always another medium”(151). People nowadays focus more on the medium rather than the content itself. He later discussed the difference between the different medium and concluded that these mediums were all rooted in people’s senses.

These new technologies were creative but they rooted in people’s feelings and emotions. They were messages, which somehow illustrated our senses. For example, GoPro is a brand new creation that combine camera with a metal stick, which enables us to shoot video easily and to capture moments. According to Mcluhan’s viewpoints, GoPro is also a message itself, which illustrates our senses to share funny moments with friends and to stay confident.

Lab 4: Vomiting Rainbow by Jack Zhu Hua (Interaction with mouse & keyboard in Processing)

(Interaction Lab | Professor: Antonius Wiriadjaja)

Using mouse and keyboard gives more opportunities of interaction between a user and a computer. This time, I added both function into my processing code where

1. When you keep pressing the SPACE bar, 5 rectangles will change the color.
2. When you move your mouse, 2 ellipses will follow (with boundaries).

The result of the code is a little guy vomiting rainbow who also looks around. The following are some insights:

1. The eyeballs following the mouse is actually constrained in a square area, instead of the circle area. The original code of this effect is from: https://processing.org/examples/constrain.html . It will need formulas to constrain the eyeballs in a circle area. But the current effect works fine, so let’s let it be this way. (However, the “easing” effect works really well.)
2. The 5 rectangles are not changing colors in a completely random way. They were, but that created some very disgusting color patterns. So I randomized the RGB (using a,b,c) in a certain range (from 150 to 255). For example, the first rectangle’s color is (a, 255-b, 255-c) which gives it high volume in Red, and low volumes in Green and Blue.

The code below will enable you to witness a flamboyant vomit, enjoy (or you may not).

float mx1 = 145;
float mx2 = 235;
float my = 140;
float easing=0.05;

void setup(){
size(400,400);
background(255);
mx1 = 145;
my = 140;
mx2 = 235;
textSize(16);
fill(20);
text(“1. Press SPACE to start vomiting rainbow!”,10,30);
text(“2. Move your mouse to look around!”,10,50);
}

void draw(){
//body
strokeWeight(2);
line(145,254,100,400);
line(255,254,300,400);
line(60,210,135,280);
line(330,210,265,280);

ellipse(200,170,200,200);

//eyes
fill(0);
ellipse(150,150,35,35);
ellipse(240,150,35,35);

//mouth
noFill();
ellipse(190,215,100,70);
line(143,205,238,205);
line(160,188,160,205);
line(175,183,175,205);
line(191,180,191,205);
line(207,183,207,205);
line(223,189,223,205);

//eye balls tracking Mouse
fill(255);
noStroke();
if(abs(mouseX – mx1)>0.1){
mx1 = mx1 + (mouseX – mx1)*easing;
}
if(abs(mouseX – mx2)>0.1){
mx2 = mx2 + (mouseX – mx2)*easing;
}
if(abs(mouseY – my)>0.1){
my = my + (mouseY – my)*easing;
}
mx1 = constrain(mx1,141,159);
mx2 = constrain(mx2,231,249);
my = constrain(my,141,159);
ellipse(mx1,my,10,10);
ellipse(mx2,my,10,10);

//blush
fill(#FFC4D9);
ellipse(145,175,30,10);
ellipse(238,175,30,10);
}

//rainbow vomit/puke/throw up
void keyPressed(){
int a = int(random(150,255));
int b = int(random(150,255));
int c = int(random(150,255));
noStroke();
fill(a,255-b,255-c);
rect(155,206,15,200);
fill(b,355-a,255-c);
rect(170,206,15,200);
fill(255-c,a-30,255-b);
rect(185,206,15,200);
fill(275-c,b,a+30);
rect(200,206,15,200);
fill(b-20,255-a,b-30);
rect(215,206,15,200);
}

Response to The Medium is the Message–Weiyu

At first, I have to admit that Mcluhan’s work is quite abstruse for me to read. I am not sure whether I have understand this work correctly and thoroughly. So I am just sharing my personal shallow response on this blog.

I think Mcluhan mainly illustrates on his argument “the ‘content’ of any medium is always another medium”(151). And he further uses a simple example, the bulb and the electric light to explain this idea. The electric light itself cannot convey message, but when people using electric lights to support different activities itself become message too. I really like this example, it is simple enough, yet it is persuasive enough.

Personally, I understand McLuhan’s argument from two perspectives. The first is different media can convey different messages to people even though they are talking about the same event. The other is medium and the social progress.

I want to particularly talk about media and social progress. Medium itself’s existence changes the way people knowing the world, feeling the world and using their own actions to affect the world. The message conveyed by media compared with the media itself’s great influence on social progress, is relatively minor. I am not sure whether I have concluded McLuhan correctly, but through my own interpretation, I really like this idea. I have never seen a perspective link media with social changes before. Movies and Cubism’s appearing is not merely an emergence of new media, but also marking the change of how people achieve message.

The effect of media on the whole human society maybe subtle, but finally the quantitative changes will result in qualitative changes. Just as McLuhan says, finally people do not ask is there first existing chicken or first existing eggs but have the feeling that: “A chicken is an egg with the idea of having more eggs.”

–Wendy

Free frame solar circuit–Wendy

I have to say that I really had a hard time in doing the free frame circuit. When doing the circuit with a white board, I finished the circuit quite quickly. However, I spent more than four hours in making the free frame circuit. I know most of my classmates finished their free frame circuit in class, but I stayed alone till nearly eight to finish it. I cannot describe my feeling when I finally saw the circuit worked and the red led blinked. I am so proud of myself that I did not give up in doing it even I failed so many times.

At the beginning, I intended to make a quite complicated free frame circuit. I thought I had connected the circuit correctly, but the circuit was too difficult for me to check. It could not work no matter how many times I checked and revised it. I spent three hours in order to make it work. In the end, I gave up that idea. I used a solder to melt what I have connected in order to have a new start. The second time I decided to make a rather simple circuit, (as you can see from the picture) finally it worked.

I still feel a little bit regretful for not having finished my initial beautiful structured free frame circuit.

Finally, I made some adjustments to make my circuit looks more beautiful (actually reconstruct it). It looks like this(my pet) :

–Weiyu Wang

Lab 4: Mari and Mary Kate

Our goal in this lab was to make an interactive sketch in the spirit of the Mid Autumn Festival. The sketch features three buttons, and when you click on them, an image of either mooncakes, the Chinese flag, or fireworks appears. In addition to clicking the buttons with the mouse, you can also use the keyboard and press ‘r’ for red, ‘b’ for blue, or ‘p’ for purple, and the same effect will occur. In order to create this sketch, we learned about a new variable type called PImage. This can be either a jpg or png file that you upload to processing, and afterwards, the image is available to use in your sketch. When using this, you have to be careful because the name of the image file has to be exact and is case sensitive.

To make the mouse clicks work as a button, when writing our mouseClicked() function, we used conditionals so that the image only display if the mouse is clicked while mouseX and mouseY are within a certain threshold aka where the circles are located. Antonius explained a more precise way to describe the location of the buttons which involved using the radius of the buttons, but we did not have time to implement this.

PImage img1; //mooncakes
PImage img2; //Chinese flag
PImage img3; //Fireworks
void setup() {
size(500, 500);
background(212, 175, 55);
}
void draw() {
textSize(32);
fill(0);
text(“Happy Mid-Autumn Festival!”, 25, 40);
fill(100, 0, 100); //Purple Button keycode: 80
ellipse(400, 120, 100, 100); //
fill(0, 0, 150); // Blue Button keycode: 66
ellipse(250, 120, 100, 100);
fill(140, 30, 30); //Red Button keycode: 82
ellipse(100, 120, 100, 100);
}
void mouseClicked() { // you can click with the mouse
if (mouseX>40 && mouseX<150 && mouseY>80 && mouseY<260) {
image(img1, 130, 200, width/2, height/2); //mooncake when you click red button!
}
if (mouseX>190 && mouseX<300 && mouseY>80 && mouseY<260) {
image(img2, 130, 200, width/2, height/2); //Chinese flag
}
if (mouseX>340 && mouseX<450 && mouseY>80 && mouseY<260) {
image(img3, 130, 200, width/2, height/2); //fireworks!
}
}
void keyPressed() { //or use r, b, p to activate the images
if (keyCode == 82) {
image(img1, 130, 200, width/2, height/2);
}

if (keyCode == 66) {
image(img2, 130, 200, width/2, height/2);
}
if (keyCode == 80) {
image(img3, 130, 200, width/2, height/2);
}
}

Response to The Machine Stops

In this fiction, Foster lets us see a future world where everyone lives in the cold bubbles and lives on everything they provide.Instead of being fed up with it and seeking for new way to create, they are satisfied with the current situation, even worship the machine, which is really pathetic.
However, it’s not merely a fiction that describes the relationship between machine and human.Referring to the technology, environment, religion, humanity, blindness worship and rebellion.The overall situation is so big that we can find the shadow even after a hundred year.
Let’s think about the reason why people create the machine and move to underground.As for machine, people create it for our own sake and make it more convenient.We are pleased with ourselves and use technology to do everything. The desire to be advanced pushes us to improve while destroying our environment. Finally, humans think they find a good way to balance,moving down to the ground and use technology to live.
We can’t say that the full use of technology is pessimistic and pathetic.Nevertheless, the unreasonable reliance on the machine could cause the defective in humanity. At first, people worship the nature and revere it, which is because we are born in nature and we don’t have to power to go against it.This volition makes us to coexist with each other peacefully.
But when people start to worship machine,it’s kind of a disaster.They might forget the machine is created by the immortalized human beings.In the fiction, the majority of people refuse to create new idea because they regard machine as god and god can’t be changed. Therefore, the innovation is literally based on the former creation.People are controlled by the machine willingly and go after it blindly.
It’s like a mirror reflecting the contemporary problems. People fight against people who have different ideology. They are keen about the machine’s power and forget the fantastic internal humanity. Technology helps us a lot while shielding and depriving the most significant thing around us.
It’s amazing that the author could have this foresight to warn people of the potential dangerous.The same situation may not happen, but the implication could be a common problem in other aspects in the future.

Interaction Lab Document by Hailun Bai

For this lab, I decided to create a small game of Snake. Because this game needs the strategy of keyboard interaction that we learned this week. However when I started to make this snake, I found it was difficult to draw a vivid image. Therefore, I chose the element that Professor Antonius had used for class. I changed the square’s color and added four new ellipses near the square. What’s more, I added a black ellipse above my “snake”. I wished my final program could let it disappear when the snake covered or near it. I found that if you want to change the color, you just need to change the stroke color rather than the whole color of your object.

Here is my screen capture.

However it was hard for me to use conditional to control my black ellipse. I only could let it turn white when my snake moved below it rather than near or cover it. There was something wrong with the coordinates of my black ellipse and the stroke color.

Here is my screen capture and a video.

IMG_8119

Here is my code and I want to improve it later.

int y=200;
int x=50;
//int creature;
int pointycolor = 0;

void setup() {
size(320, 240);
background(255);
}
void creature() {
fill(255);
stroke(#2280F0);
rect(x, y, 30, 30);
fill(255);
stroke(#D1EA18);
ellipse(x, y, 10, 10);
ellipse(x+30, y+30, 10, 10);
ellipse(x, y+30, 10, 10);
ellipse(x+30, y, 10, 10);
}

//void pointycolor() {
// fill (0);
//}
void pointy() {
stroke(0);
fill(pointycolor);
ellipse(70, 50, 20, 20);
}

void draw() {
creature ();

if (key==CODED) {
if (keyCode == UP)
y–;
}
if (keyCode == DOWN) {
y++;
}

if (keyCode == RIGHT) {
x++;
}

if (keyCode == LEFT) {
x–;
}
pointy();

if (x>50 && x<90 && y>50 && y< 90)
{ //the creature is over the ellipse
pointycolor = 255;
println(“creature is over ellipse!”);
} else {
stroke(0);
fill(0);
pointycolor = 0;
}

// println(x);

// use your mouse location as a tool
println(“mouse is at “+mouseX+” “+mouseY);
}

Lab 4 by Shi Zeng & Yiyi Zhang

Our project is going to imitate the “Flappy Bird” and try to make the effects by using the function of our keyboards and mouse.

First, we achieved the goal of making a “jumping” cube. This is done by changing its y-axis. We write y+=3 when keyboard is pressed, else y-=2.

Then comes the part of the “moving” pillars. This part was harder than what we have expected. Antonius helped us and taught us a new function: Array. The aim of Array is to make a set of something which acts somehow the same way.

Here is Shi’s code:

int yh=50;
int wid=600;
int hei=height;
int[] xArray = new int[6];
float[] hArray = new float[6];

void setup()
{
size(600,600);
for(int i=0;i<6;i++)
{
xArray[i]=600+i*100;
hArray[i]=random(0,height/2);
}
}
void draw()
{
background(0);
rect(30,yh,30,30);
if(keyPressed)
{
yh-=8;
}
else
{
yh++;
}
fill(255);
//float h=random(0,height/2);
for(int i=0;i<6;i++)
{
if(xArray[i]<=-30)
{
xArray[i]=600+20;
hArray[i]=random(height/3,height/3*2);
}
rect(xArray[i],0,30,hArray[i]);
rect(xArray[i],hArray[i]+60,30,height-hArray[i]-60);
xArray[i]–;
}

// if player hits block

}

Here is my code:
int t=320;
int[] x;

// make array of x's

// array of h's
int[] h;

void setup() {
size(640, 640);
h = new int[10];
x = new int[10];

for (int i = 0; i < 10; i++) {
h[i]=int(random(height/3, height/2));
x[i]= 640+i*100;
}
}

void draw() {
background(0);
rect(30, t, 30, 30);
if (keyPressed) {
t-=4;
} else {
t++;
}
// int h=int(random(320,640));
for (int i = 0; i < 10; i++) {
if (x[i]<-50){
x[i]=640+400;
h[i]=int(random(height/3, height/2));
}

rect(x[i]–, 0, 50, h[i]);
rect(x[i]–,h[i]+140,50,640-50-h[i]);
}
}

We are going to improve it in the next few weeks.