Process
In this interactive poster, I used the float code and implemented it at the beginning to make only one hexagon move on the screen, but because I want to have a grid screen, I need to determine how a hexagon moves under the control of the mouse first.
float[] posx=new float[100]; float[] posy=new float[100]; void setup() { size(820, 820); colorMode(HSB, 360, 100, 100); for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { } } } void draw() { background(100); for (int i=0; i<100; i++) { drawShape( posx[i], posy[i], i); } if (!mousePressed) { for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { } } } else { for (int i=0; i<100; i++) { posx[i]=lerp(posx[i], mouseX, 0.03); posy[i]=lerp(posy[i], mouseY, 0.03); } } } void drawShape(float x, float y, int i) { pushMatrix(); noStroke(); beginShape(); translate(x, y); rotate(radians(30)); for (float angle=0; angle<360; angle+=60) { float vx=sin(radians(angle))*30; float vy=cos(radians(angle))*30; vertex(vx, vy); } endShape(CLOSE); beginShape(); rotate(radians(30)); for (float angle=0; angle<360; angle+=120) { float vx=sin(radians(angle))*20; float vy=cos(radians(angle))*20; vertex(vx, vy); } endShape(CLOSE); popMatrix(); }
Then I tried to make two hexagons move from the directions of the diagonals. Finally, let the two hexagons overlap with each other.
float[] posx=new float[100]; float[] posy=new float[100]; void setup() { size(820, 820); colorMode(HSB, 360, 100, 100); int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=map(i, -1, 10, 0, width); posy[index]=map(j, -1, 10, 0, width); } } } void draw() { background(100); for (int i=0; i<100; i++) { drawShape( posx[i], posy[i], i); } if (!mousePressed) { for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { } } } else { for (int i=0; i<100; i++) { posx[i]=lerp(posx[i], mouseX, 0.03); posy[i]=lerp(posy[i], mouseY, 0.03); } } } void drawShape(float x, float y, int i) { pushMatrix(); noStroke(); beginShape(); translate(x, y); rotate(radians(30)); for (float angle=0; angle<360; angle+=60) { float vx=sin(radians(angle))*30; float vy=cos(radians(angle))*30; vertex(vx, vy); } endShape(CLOSE); beginShape(); rotate(radians(30)); for (float angle=0; angle<360; angle+=120) { float vx=sin(radians(angle))*20; float vy=cos(radians(angle))*20; vertex(vx, vy); } endShape(CLOSE); popMatrix(); }
Later I tried to improve the code
float shapeSize=80; float[] posx=new float[100]; float[] posy=new float[100]; float[] startposx=new float[100]; float[] startposy=new float[100]; color[] col1=new color[100]; color[] col2=new color[100]; void setup() { size(820, 820); colorMode(HSB, 360, 100, 100); for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { } } } void draw() { background(100); for (int i=0; i<100; i++) { drawShape( posx[i], posy[i], i); } if (!mousePressed) { int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=lerp(posx[index], startposx[index], 0.03); posy[index]=lerp(posy[index], startposy[index], 0.03); index++; } } } else { for (int i=0; i<100; i++) { posx[i]=lerp(posx[i], mouseX, 0.03); posy[i]=lerp(posy[i], mouseY, 0.03); } } } void drawShape(float x, float y, int i) { pushMatrix(); noStroke(); beginShape(); translate(x, y); rotate(radians(30)); for (float angle=0; angle<360; angle+=60) { float vx=sin(radians(angle))*30; float vy=cos(radians(angle))*30; vertex(vx, vy); } fill(col1[i]); endShape(CLOSE); beginShape(); rotate(radians(30)); for (float angle=0; angle<360; angle+=120) { float vx=sin(radians(angle))*20; float vy=cos(radians(angle))*20; vertex(vx, vy); } fill(col2[i]); endShape(CLOSE); popMatrix(); }
float shapeSize=80; float[] posx=new float[100]; float[] posy=new float[100]; float[] startposx=new float[100]; float[] startposy=new float[100]; color[] col1=new color[100]; color[] col2=new color[100]; void setup() { size(820, 820); colorMode(HSB, 360, 100, 100); int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=map(i, -1, 10, 0, width); posy[index]=map(j, -1, 10, 0, width); startposx[index]=map(i, -1, 10, 0, width); startposy[index]=map(j, -1, 10, 0, width); } } } void draw() { background(100); for (int i=0; i<100; i++) { drawShape( posx[i], posy[i], i); } if (!mousePressed) { int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=lerp(posx[index], startposx[index], 0.03); posy[index]=lerp(posy[index], startposy[index], 0.03); index++; } } } else { for (int i=0; i<100; i++) { posx[i]=lerp(posx[i], mouseX, 0.03); posy[i]=lerp(posy[i], mouseY, 0.03); } } } void drawShape(float x, float y, int i) { pushMatrix(); noStroke(); beginShape(); translate(x, y); rotate(radians(30)); for (float angle=0; angle<360; angle+=60) { float vx=sin(radians(angle))*30; float vy=cos(radians(angle))*30; vertex(vx, vy); } fill(col1[i]); endShape(CLOSE); beginShape(); rotate(radians(30)); for (float angle=0; angle<360; angle+=120) { float vx=sin(radians(angle))*20; float vy=cos(radians(angle))*20; vertex(vx, vy); } fill(col2[i]); endShape(CLOSE); popMatrix(); }
float shapeSize=80; float[] posx=new float[100]; float[] posy=new float[100]; float[] startposx=new float[100]; float[] startposy=new float[100]; color[] col1=new color[100]; color[] col2=new color[100]; void setup() { size(820, 820); colorMode(HSB, 360, 100, 100); int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=map(i, -1, 10, 0, width); posy[index]=map(j, -1, 10, 0, width); startposx[index]=map(i, -1, 10, 0, width); startposy[index]=map(j, -1, 10, 0, width); col1[index]=color(random(360), 60, 100); col2[index]=color(random(360), 80, 100); index++; } } } void draw() { background(100); for (int i=0; i<100; i++) { drawShape( posx[i], posy[i], i); } if (!mousePressed) { int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=lerp(posx[index], startposx[index], 0.03); posy[index]=lerp(posy[index], startposy[index], 0.03); index++; } } } else { for (int i=0; i<100; i++) { posx[i]=lerp(posx[i], mouseX, 0.03); posy[i]=lerp(posy[i], mouseY, 0.03); } } } void drawShape(float x, float y, int i) { pushMatrix(); noStroke(); beginShape(); translate(x, y); rotate(radians(30)); for (float angle=0; angle<360; angle+=60) { } fill(col1[i]); endShape(CLOSE); beginShape(); rotate(radians(30)); for (float angle=0; angle<360; angle+=120) { float vx=sin(radians(angle))*20; float vy=cos(radians(angle))*20; vertex(vx, vy); } fill(col2[i]); endShape(CLOSE); popMatrix(); }
float shapeSize=80; float[] posx=new float[100]; float[] posy=new float[100]; float[] startposx=new float[100]; float[] startposy=new float[100]; color[] col1=new color[100]; color[] col2=new color[100]; void setup() { size(820, 820); colorMode(HSB, 360, 100, 100); int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=map(i, -1, 10, 0, width); posy[index]=map(j, -1, 10, 0, width); startposx[index]=map(i, -1, 10, 0, width); startposy[index]=map(j, -1, 10, 0, width); col1[index]=color(random(360), 60, 100); col2[index]=color(random(360), 80, 100); index++; } } } void draw() { background(100); for (int i=0; i<100; i++) { drawShape( posx[i], posy[i], i); } if (!mousePressed) { int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=lerp(posx[index], startposx[index], 0.03); posy[index]=lerp(posy[index], startposy[index], 0.03); index++; } } } else { for (int i=0; i<100; i++) { posx[i]=lerp(posx[i], mouseX, 0.03); posy[i]=lerp(posy[i], mouseY, 0.03); } } } void drawShape(float x, float y, int i) { pushMatrix(); noStroke(); beginShape(); translate(x, y); rotate(radians(30)); for (float angle=0; angle<360; angle+=60) { float vx=sin(radians(angle))*30; float vy=cos(radians(angle))*30; vertex(vx, vy); } fill(col1[i]); endShape(CLOSE); beginShape(); rotate(radians(30)); fill(col2[i]); endShape(CLOSE); popMatrix(); }
float shapeSize=80; float[] posx=new float[100]; float[] posy=new float[100]; float[] startposx=new float[100]; float[] startposy=new float[100]; color[] col1=new color[100]; color[] col2=new color[100]; void setup() { size(820, 820); colorMode(HSB, 360, 100, 100); int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=map(i, -1, 10, 0, width); posy[index]=map(j, -1, 10, 0, width); startposx[index]=map(i, -1, 10, 0, width); startposy[index]=map(j, -1, 10, 0, width); col1[index]=color(random(360), 60, 100); col2[index]=color(random(360), 80, 100); index++; } } } void draw() { background(100); for (int i=0; i<100; i++) { drawShape( posx[i], posy[i], i); } if (!mousePressed) { int index=0; for (float i=0; i<10; i+=1) { for (float j=0; j<10; j+=1) { posx[index]=lerp(posx[index], startposx[index], 0.03); posy[index]=lerp(posy[index], startposy[index], 0.03); index++; } } } else { for (int i=0; i<100; i++) { posx[i]=lerp(posx[i], mouseX, 0.03); posy[i]=lerp(posy[i], mouseY, 0.03); } } } void drawShape(float x, float y, int i) { pushMatrix(); noStroke(); beginShape(); translate(x, y); rotate(radians(30)); for (float angle=0; angle<360; angle+=60) { float vx=sin(radians(angle))*30; float vy=cos(radians(angle))*30; vertex(vx, vy); } fill(col1[i]); endShape(CLOSE); beginShape(); rotate(radians(30)); for (float angle=0; angle<360; angle+=120) { float vx=sin(radians(angle))*20; float vy=cos(radians(angle))*20; vertex(vx, vy); } fill(col2[i]); endShape(CLOSE); popMatrix(); }
QUESTIONS
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 do you identify in every part you executed? Explain.
In the first part, the repeating patterns are static because they remain stationary and do not change due to time or the user. The random changes in the colors can be seen as dynamic-passive because the coding provides an internal mechanism for their changes.
In the second part, in addition to what is shown in the first part, the periodic left-right motion also changes according to the internal mechanism of linear motion, which reflects dynamic-passive.
In the optional part, dynamic interaction is included. Mouse clicks affect the color change, adding a variable factor controlled by the human “viewer”. There is also dynamic interaction (Varying) because the color after a mouse click is unpredictable due to the “random” function.
Q2: What is the benefit of using arrays? How might you use arrays in a potential project?
A significant advantage of arrays is that they can be declared once and reused many times. So using arrays in code can make the code look cleaner and easier for me to check and modify. Also, an array is considered to be a homogeneous collection of data. Here, the word collection means that it helps to store multiple values under the same variable. For any purpose, if the user wants to store multiple values of similar types, arrays are the best choice that can be used. When I am designing a potential project, I intentionally use more arrays because it significantly improves my productivity and makes my work more goal-oriented. I will probably use collections more often for color design because I will do better at it.