For this recitation, we tried to do more practices with Processing. It’s also a really good revision for Thursday’s lecture. By using parts of the codes we did during the lecture individually, I get to understand the codes more.
I first created a easy one based on what Professor Andy taught us during the lecture. I used the code and simply changed the graph and background. This graph and the color of the background were inspired by a nail art that I really like recently, but sadly due to the lockdown I’m not able to do the nails, I can only achieve the nails in this way😭
This is the nail art:
This is my code:
int count=10; float x[] = new float[count]; float y[] = new float[count]; float size[] = new float[count]; float r[] = new float[count]; float g[] = new float[count]; float b[] = new float[count]; color flowerColor[] = new color[count]; float xspeed[] = new float[count]; float yspeed[] = new float[count]; void setup(){ size(800,800); background(252,251,240); for ( int i=0; i < x.length; i++) { x[i] = random (100, width-100); y[i] = random (100, height-100); size[i]=random (50,80); r[i] = random(50,255); g[i] = random(100,255); b[i] = random(100,255); flowerColor[i] = color(r[i], g[i], b[i]); xspeed[i] = random (2, 5); yspeed[i] = random (2, 5); } } void draw() { background(252,251,240); for ( int i=0; i < x.length; i++) { Flower(x[i], y[i], size[i], flowerColor[i]); } move(); bounce(); } void move() { for ( int i=0; i < x.length; i++) { x[i] += xspeed[i] ; y[i] += yspeed[i] ; } } void bounce() { for ( int i=0; i < x.length; i++) { if ( x[i] <= 0 + size[i]/2 || x[i]>= width - size[i]/2 ) { xspeed[i] = -xspeed[i]; } if ( y[i] <= 0+ size[i]/2 || y[i]>= height - size[i]/2 ) { yspeed[i] = -yspeed[i]; } } } void Flower(float x, float y, float size, color c) { fill(0); ellipse(x, y, size, size); fill(0); ellipse(x+size/2, y-size/2, size, size); fill(0); ellipse(x+size, y, size, size); fill(0); ellipse(x+size/2-size/3, y+size/2, size, size); fill(0); ellipse(x+size/2+size/3, y+size/2, size, size); fill(c); ellipse(x+size/2, y+5, size, size); }
This is how it looks like:
However, I wanted to challenge myself more, so I wanted to make one with a heart shape and are listed in a grid with blinking colors. This was pretty hard. I first came up with something like this:
Though it was quite pretty, it wasn’t what I wanted. Then I wanted to study how exactly does the codes for a heart shape works and how it was composited. I reached out to Professor Andy for help and learnt how to code for a heart as well as how to control its size and position, and I also learnt how to make it blink.
After that, I attended the workshop about functions and arrays and learnt how to list the hearts in a grid.
This is my result:
int count=13; int number =10; float[] xPositions =new float[number]; float[] yPositions =new float[number]; float x[] = new float[count]; color random1; color random2; int delay = 1000;// ONE SEC int now; //a flag boolean red = false; void setup(){ size(800,800); background (203,253,255); for ( int i=0; i < x.length; i++) { x[i] = random (100, width-100); now = millis(); random1 = color(random(255),random(255),random(255)); random2 = color(random(255),random(255),random(255)); } for(int i=0; i<number; i++){ for (int j=0; j<number;j++){ xPositions[i]=i*100-150; yPositions[j]=j*100-90; } } } void draw() { background (203,253,255); for(int i=0;i<number;i++){ for (int j=0;j<number;j++){ pushMatrix(); translate(xPositions[i],yPositions[j]); if (millis() - now > delay) { //change flag red = !red; //reset counter now = millis(); } if (red) fill(random1); else fill(random2); heart( 100, 100, 2); popMatrix(); } } } void heart (float x, float y, float size) { translate(x, y); scale(size); noStroke(); beginShape(); vertex(50, 15); bezierVertex(50, -5, 90, 5, 50, 40); vertex(50, 15); bezierVertex(50, -5, 10, 5, 50, 40); endShape(); }
- Q1: In the reading “Art, Interaction and Engagement” by Ernest Edmonds, he identifies four situations in an interactive artwork: ‘Static’, ‘Dynamic-Passive’, ‘Dynamic-Interactive’ and ‘Dynamic-Interactive(Varying)’. From the exercise you did today which situations you identify in every part you executed? Explain.
Static: The part that I design the graph. After I code for the graph and click play, I can see the graph, but it doesn’t change and it doesn’t interact with me.
Dynamic-Passive: It might be like the bouncing and moving movements I had in my first try. Here, the internal mechanism is the code.
Dynamic-Interactive: I think it’s the part that we assigned random color to the graph. Because every time we click play, the color will be shown randomly. It’s a kind of interaction between the viewer and we do have “an active role in influencing the changes in the art project”(3).
Dynamic-Interactive(Varying): Because that the color is randomly assigned, it has the sense of unpredictability in it. Also, in my blinking hearts, the art object changes color as well. So I think it fits in the varying dynamic-interactive concept.
- Q2: What is the benefit of using arrays? How might you use arrays in a potential project?
In my case, I think listing the graphs in a grid is really tidy and visually comforting. It also reminds me of the game of whack-a-mole, maybe I can design a similar game in a potential project with some of the graphs in the grid blinking and others having other movements. The grid gives a sense of unity and solidity despite the fact that there are a lot of changes and therefore provides balance to the project as a whole.