Recitation 7: Johnny
First, I am going to show my recitation exercise and briefly talk about it.
int[] color1 = new int[100]; int[] color2 = new int[100]; int[] color3 = new int[100]; float[] x = new float [100]; float[] y = new float [100]; float[] r = new float [100]; void polygon(float x, float y, float radius, int npoints, color c) { float angle = TWO_PI / npoints; beginShape(); for (float a = 0; a < TWO_PI; a += angle) { float sx = x + cos(a) * radius; float sy = y + sin(a) * radius; vertex(sx, sy); } endShape(CLOSE); fill(c); } void myshape(float x, float y, float r, color c) { circle(x, y, 2*r+4); stroke(c); strokeWeight(3); polygon(x, y, r, 6, c ); polygon(x, y, r, 3, c ); } void setup() { size(900, 900); background(255); for (int i = 0; i < color1.length; i++) { color1[i] = int(random(255)); } for (int i = 0; i < color2.length; i++) { color2[i] = int(random(255)); } for (int i = 0; i < color3.length; i++) { color3[i] = int(random(255)); } for (int i = 0; i < x.length; i++) { x[i] = random(100, 800); } for (int i = 0; i < y.length; i++) { y[i] = random(100, 800); } for (int i = 0; i < r.length; i++) { r[i] = random(30, 80); } } void draw() { float[] m = new float [100]; float[] n = new float [100]; for (int i = 0; i < m.length; i++) { m[i] = random(-10, 10); } for (int i = 0; i < n.length; i++) { n[i] = random(-10, 10); } background(255); if ( keyPressed == true) { for (int i =0; i<100; i++) { myshape(x[i]+m[i], y[i]+n[i], r[i], color(color1[i], color2[i], color3[i])); } } else { for (int i =0; i<100; i++) { myshape(x[i], y[i], r[i], color(color1[i], color2[i], color3[i])); } } }
This the pattern I have created, a triangle in a hexagon within a circle. I get inspiration from the phone’s camera. They originally should be in reverse sequence, which the circle ought to be the smallest one. But in a reverse sequence, I still find the shape very beautiful. I use arrays to generate the r, g, b to generate a random color, its x, y position to ensure its position, and its r to control the radius and the size of other shapes. I store all the information in the setup() because all the data need to be only input once. If I put it into the draw() loop, it will continuously generate 60 times a second, which is not the ideal effect I want to achieve. And then I design the interaction part, which is also very simple as well. I use the keyPressed function, if the user clicks any key, 100 patterns randomly generated will begin to shake around its original position. I find the whole process actually is a way of decompression, making me feel relaxed.
Secondly, I would like to discuss the experience of doing additional homework. As usual, the short video and the code come first.
int x = 25; int y = 25; int total = x*y; int padding = 180; int originalsize = 10; float[] originalxposition = new float[total]; float[] originalyposition = new float[total]; float[] newxposition = new float[total]; float[] newyposition = new float[total]; float[] size_variable = new float[total]; void mycircle(float a, float b, float c) { pushMatrix(); translate(a, b); scale(c); fill(0); noStroke(); ellipse(0, 0, originalsize, originalsize); popMatrix(); } void setup() { size(800, 800); background(255); for (int i = 0; i < x; i++) { for (int j = 0; j < y; j++) { int position = i + j*y; originalxposition[position] = map(i, 0, x-1, padding, width-padding); originalyposition[position] = map(j, 0, y-1, padding, height-padding); newxposition[position] = originalxposition [position]; newyposition[position] = originalyposition [position]; size_variable[position] = 1; } } } void draw() { background(255); for (int i = 0; i < total; i++) { float distance = dist(mouseX, mouseY, newxposition[i], newyposition[i]); distance = max(distance, 0.001); float newx = originalxposition[i] - (40/distance)*(mouseX-originalxposition[i]); float newy = originalyposition[i] - (40/distance)*(mouseY-originalyposition[i]); newxposition[i] = lerp(newxposition[i], newx, 0.04); newyposition[i] = lerp(newyposition[i], newy, 0.04); size_variable[i] = 90/distance; size_variable[i] = max(size_variable[i], 0.4); size_variable[i] = min(size_variable[i], 2); mycircle(newxposition[i], newyposition[i], size_variable[i]); } }
As far as I am concerned, this homework is super difficult. Individually, I only finish the first 2 steps, for step 3 and step 4, I go to Tuesday’s workshop and eventually figure out what should we do to create the lerp effect. For the first 2 steps, the most important thing is to store every point’s X-position and Y-position in 2 arrays. And the size of the ellipse is determined by calculating the distance between the mouse and every point. But my original pattern is not as beautiful as the one I show above. This is one of the takeaways I get from the workshop, we can use the padding to make all things being positioned right in the center of the canvas. Meanwhile, using the map function to let the computer help to calculate the distance between each point. Also, I have never thought about the pushMatrix and popMatrix function. I think this is the most important step in the second step. With these functions, we can easily draw the circle without changing the (0,0) position continuously. And this also enables us to write down the number of each point so that we can refer to it late to change their size. Based on the fact that we are going to change the points’ positions in the following step, I create another 2 arrays to store the new position of the X-position and Y-position. Next, is what I have learned from the workshop. Before I go to it, I thought the movement of the points which are the closest to the mouse, are going back to their original position in a clockwise sequence. But actually, they don’t move in the way I suppose to. The underlying mechanism behind it is moving to the 4 corners when the mouse is getting closer to them. This works not only for the ones which are the closest to the mouse. This works for all the points. So in the draw loop, we need to calculate the distance between every point and the mouse so that the whole pattern can change accordingly. The last is about the lerp function. This one is super interesting and I think it might be super helpful for the coming final project. It enables the whole pattern to have a delay effect, thus making the whole picture more beautiful.
A to Q1
As previously I have mentioned in my recitation exercise, if I use for loop inside the setup() function, all the elements that I use the for loop will only be executed once. That is to say, the for loop will be only executed once, thus you can see that if I use for loop to put the values into an array. The value in that array will not change if call other functions to use these data. While if I put the for loop inside a draw function, it will be executed every time I have called the draw function. Normally, processing will call the draw function 60 times a second. So our for function, no matter for what purpose we are using it, it will also be called 60 times a second, thus making the thing inside the for loop changing quickly.
A to Q2
I might use an array when I need to remember lots of things. For example, in our homework, we need to remember every point’s position. It is going to be very difficult and messy if we give every point a name and a position, and that will also make the code unreadable. So we can use the arrays to bear lots of data of the same type. And by using the index, we can easily have access to each one of them, even revising them and then using it in other parts of our code. I think I might use arrays as the database in one potential project. What I mean here is that the arrays can store lots of information and data. So I can use them first to store lots of information and whenever I want to use something inside of it, I can also easily refers to it and then uses the data. For example, I might store hundreds of RGB groups and whenever I need to change the color, maybe I can refer to the array and randomly choose one.