Processing Documentations
In this recitation, I created a hexagram, looks like a snowflake, as the basic graph. According to the instructions, I used several different arrays to store positions, colors, speed and size. After displaying the 100 shapes on the screen, I added movements just like in the previous class, the snowflakes would move randomly and bounce back once they touch the bound. I also added two keyboard functions such that when pressing ‘c’, all the snowflakes would change color randomly. And when pressing UP and DOWN, the size of snowflakes would change within a certain range.
int n = 100; float s3 = sqrt(3); float x[] = new float [n]; float y[] = new float [n]; float xs[] = new float [n]; float ys[] = new float [n]; float s[] = new float [n]; color ct[] = new color [n]; color cc[] = new color [n]; void setup(){ size(600, 600); background(255); for (int i = 0; i < 100; i ++){ x[i] = random(width); y[i] = random(height); s[i] = 10; xs[i] = random(-1, 1); ys[i] = random(-1, 1); ct[i] = color(random(255), random(255), random(255), 50); cc[i] = color(random(255), random(255), random(255), 50); } } void draw(){ background(255); for (int i = 0; i < 100; i ++){ if (x[i] <= 0 || x[i] >= width){ xs[i] *= -1; } if (y[i] <= 0 || y[i] >= width){ ys[i] *= -1; } x[i] += xs[i]; y[i] += ys[i]; shape(i); } } void shape(int i){ fill(ct[i]); triangle(x[i], y[i]-2*s3*s[i]/3, x[i]-s[i], y[i]+s3 * s[i] /3, x[i] + s[i], y[i] + s3 * s[i] /3); triangle(x[i] - s[i], y[i] - s3*s[i]/3, x[i] + s[i], y[i] - s3*s[i]/3, x[i], y[i] + 2*s3*s[i]/3); fill(cc[i]); circle(x[i] , y[i], 2*s[i]/s3); } void keyPressed(){ if (key == 'c'){ for (int i = 0; i < 100; i ++){ ct[i] = color(random(255), random(255), random(255), 50); cc[i] = color(random(255), random(255), random(255), 50); } } if (key == CODED){ if (keyCode == UP){ for (int i = 0; i < 100; i ++){ if (s[i] < 50){ s[i] ++; } } }else if (keyCode == DOWN){ for (int i = 0; i < 100; i ++){ if (s[i] > 10){ s[i] --; } } } } }
For the additional homework, I first tried to code it by myself. I finished part of the homework as mapping the different dots and having them changing size and position. But it turns out that my code doesn’t present the animation in the exact way of the example, and the animation can’t deal with dots too close to the mouse.
Thus, I attended the workshop for this homework. Im the workshop, I learned about the min, max function along with other codes that helped a lot in polishing the animation. I also used functions to rewrite the code provided in the workshop in my own style.
int row = 25; int column = 25; int total = row * column; int padding = 140; float[] R = new float [total]; float[] x = new float [total]; float[] y = new float [total]; float[] xs = new float [total]; float[] ys = new float [total]; float[] xn = new float [total]; float[] yn = new float [total]; float[] s = new float [total]; void setup(){ size(800, 800); background(255); for (int j = 0; j < row; j++){ for (int i = 0; i < column; i++){ int index = i + j * column; x[index] = map(i, 0, column - 1, padding, width - padding); y[index] = map(j, 0, row - 1, padding, width - padding); xs[index] = map(i, 0, column - 1, padding, width - padding); ys[index] = map(j, 0, row - 1, padding, width - padding); s[index] = 1; } } } void draw(){ background(255); for ( int i = 0; i < total; i ++){ calculatePosition(i); //changePosition(i); changePositionWithLerp(i); changeSize(i); drawCircle(i); } } void drawCircle(int i){ pushMatrix(); pushStyle(); translate(xs[i], ys[i]); scale(s[i]); fill(0); noStroke(); circle(0, 0, 10); popMatrix(); popStyle(); } void calculatePosition(int i){ R[i] = dist(mouseX, mouseY, x[i], y[i]); R[i] = max(R[i], 0,01); } void changeSize(int i){ s[i] = 100 / R[i]; s[i] = max(s[i], 0.4); s[i] = min(s[i], 2); } void changePosition(int i){ xs[i] =x[i] - (35 / R[i]) * (mouseX - x[i]); ys[i] =y[i] - (35 / R[i]) * (mouseY - y[i]); } void changePositionWithLerp(int i){ xn[i] =x[i] - (35 / R[i]) * (mouseX - x[i]); yn[i] =y[i] - (35 / R[i]) * (mouseY - y[i]); xs[i] = lerp(xs[i], xn[i], 0.05); ys[i] = lerp(ys[i], yn[i], 0.05); }
Answers to the Questions
1. In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().
In the setup(), the code provides one image with 100 random snowflakes on the screen. It is because that code in the setup() would be processed only once.
While when putting the loop in the draw(), the code produces an animation with snowflakes appearing with different positions and colors all the time on the screen. Since the processing will run codes in the draw() all the time, the loop would assign different positions and colors to dots every time draw() is processed. So, the snowflakes are having random data all the time and shown as strange animations.
2.What is the benefit of using arrays? How might you use arrays in a potential project?
By using arrays in processing, I can deal with a large amount of data at same time without manually assign data to every variable. Arrays make it convenient to copy and present similar shapes with slight differences.
For the project, I might face the situation where I have to input a large amount of information or assign various of data to different variables for a visual presentation. In these cases, using arrays can greatly reduce my time in coding as well as make the codes tidy and easy to read.