In-class practice
Step 1:
void setup() {
size(700, 700);
background(200);
}
void draw() {
envelope(200, 100, width*0.5, height*0.5, color(145,207,250), color(215, 169, 229));
}
void envelope(int a, int b, float x, float y, color c, color d) {
stroke(0);
strokeWeight(3);
fill(c);
rect(x - a/2, y - b/2, a, b);
fill(255);
triangle(x - a/2, y - b/2, x + a/2, y - b/2, x, y);
fill(d);
circle(x, y, a*0.15);
}
I sketched an envelope and separated it into three shapes: a rectangle, a triangle and a circle.
Step 2:
- Putting for loop in void setup() is like setting the location of those 100 envelopes once. So it turns out to be a still graph.
void setup() {
size(700, 700);
background(200);
for (int i = 0; i < 100; i = i + 1){
envelope(200, 100, random(width), random(height), color(random(255), random(255), random(255)), color(random(255), random(255), random(255)));
}
}
void draw() {
}
void envelope(int a, int b, float x, float y, color c, color d) {
stroke(0);
strokeWeight(3);
fill(c);
rect(x - a/2, y - b/2, a, b);
fill(255);
triangle(x - a/2, y - b/2, x + a/2, y - b/2, x, y);
fill(d);
circle(x, y, a*0.15);
}
2. Putting for loop in void draw() is like continuously set the location of those 100 envelopes. void draw() is a loop, which means it repeats the action infinitely, so the graph is animated.
void setup() {
size(700, 700);
background(200);
}
void draw() {
for (int i = 0; i < 100; i = i + 1){
envelope(200, 100, random(width), random(height), color(random(255), random(255), random(255)), color(random(255), random(255), random(255)));
}
}
void envelope(int a, int b, float x, float y, color c, color d) {
stroke(0);
strokeWeight(3);
fill(c);
rect(x - a/2, y - b/2, a, b);
fill(255);
triangle(x - a/2, y - b/2, x + a/2, y - b/2, x, y);
fill(d);
circle(x, y, a*0.15);
}
Step 3:
In step 3, I used arrays to store colors, x-coordinates and y-coordinates. I encountered some problems at first, and I think I should remind myself that we can only store one type of information in each array.
color[] c = new color[100];
color[] o = new color[100];
float[] x = new float[100];
float[] y = new float[100];
void setup() {
size(700, 700);
for (int i = 0; i < 100; i++){
c[i] = color(random(255), random(255), random(255));
o[i] = color(random(255), random(255), random(255));
x[i] = random(width);
y[i] = random(height);
}
}
void draw() {
background(200);
for (int i = 0; i < 100; i = i + 1){
envelope(200, 100, x[i], y[i], c[i], o[i]);
}
}
void envelope(int a, int b, float x, float y, color c, color d) {
stroke(0);
strokeWeight(3);
fill(c);
rect(x - a/2, y - b/2, a, b);
fill(255);
triangle(x - a/2, y - b/2, x + a/2, y - b/2, x, y);
fill(d);
circle(x, y, a*0.15);
}
Comparing step 2.2 [putting the for loop in void draw()] and step 3, I gained some further understanding about arrays.
First, with the help of arrays, I don’t need to copy the functions for over and over agian.
Second, array has memory, array is like a cabinet with many storage space in it. The picture Professor Rudi showed in his slide is a great metaphor. And for instance, in void setup(), step 3, each storage space was packed with one specific data. And then void draw() repetitively showed us the stored data. Becuase the data in the arrays are memorized, and it can’t be stored without arrays, the graph of step 3 is still but the graph of step 2.2 is animated.
Step 4:
At last, I added some movement for the envelopes. If statement helped me set boundaries to the envelopes so that they won’t move out of the canvas.
color[] c = new color[100];
color[] o = new color[100];
float[] x = new float[100];
float[] y = new float[100];
float[] X = new float[100];
float[] Y = new float[100];
void setup() {
size(700, 700);
for (int i = 0; i < 100; i++){
c[i] = color(random(255), random(255), random(255));
o[i] = color(random(255), random(255), random(255));
x[i] = random(width);
y[i] = random(height);
X[i] = random(-4,4);
Y[i] = random(-4,4);
}
}
void draw() {
background(200);
for (int i = 0; i < 100; i = i + 1){
envelope(200, 100, x[i], y[i], c[i], o[i]);
if (x[i] + X[i] > width || x[i] + X[i]< 0){
X[i] = -X[i];
}
if (y[i] + Y[i] > height || y[i] + Y[i]< 0){
Y[i] = -Y[i];
}
x[i] = x[i] + X[i];
y[i] = y[i] + Y[i];
}
}
void envelope(int a, int b, float x, float y, color c, color d) {
stroke(0);
strokeWeight(3);
fill(c);
rect(x - a/2, y - b/2, a, b);
fill(255);
triangle(x - a/2, y - b/2, x + a/2, y - b/2, x, y);
fill(d);
circle(x, y, a*0.15);
}
Homework:
To be honest, this week’s homework is quite hard for me, so I attended our study session on Tuesday.
For the first 3 steps, I sought help from Milly. And I individually added up something to make step 4 work.
Step 1:
int row = 25;
int column = 25;
int total = row*column;
int padding = 150;
float[] xPosition = new float[total];
float[] yPosition = new float[total];
float[] size = new float[total];
void setup() {
size(800, 800);
for (int j = 0; j < row; j++){
for (int i = 0; i < column; i++){
int index = i + j*column;
xPosition [index] = map(i, 0, column-1, padding, width-padding);
yPosition [index] = map(j, 0, row-1, padding, height-padding);
size[index] = 1.0;
}
}
}
void draw(){
background(255);
for (int n = 0; n < total; n++){
drawCircle(xPosition[n], yPosition[n], size[n]);
}
}
void drawCircle(float x, float y, float scale){
pushMatrix();
pushStyle();
translate(x, y);
scale(scale);
fill(0);
noStroke();
circle(0, 0, 10);
popMatrix();
popStyle();
}
Here I learnt that pushMatrix() & popMatrix(), pushStyle() & popStyle() are a bit like individual command, so that the command between push and pop won’t affect other commands.
Step 2:
int row = 25;
int column = 25;
int total = row*column;
int padding = 150;
float[] xPosition = new float[total];
float[] yPosition = new float[total];
float[] size = new float[total];
void setup() {
size(800, 800);
for (int j = 0; j < row; j++){
for (int i = 0; i < column; i++){
int index = i + j*column;
xPosition [index] = map(i, 0, column-1, padding, width-padding);
yPosition [index] = map(j, 0, row-1, padding, height-padding);
size[index] = 1.0;
}
}
}
void draw(){
background(255);
for (int n = 0; n < total; n++){
float circleRadius = dist (mouseX, mouseY, xPosition[n], yPosition[n]);
circleRadius = max(circleRadius, 0.01);
size[n] = 100/circleRadius;
size[n] = max(size[n], 0.4);
size[n] = min(size[n],2);
drawCircle(xPosition[n], yPosition[n], size[n]);
}
}
void drawCircle(float x, float y, float scale){
pushMatrix();
pushStyle();
translate(x, y);
scale(scale);
fill(0);
noStroke();
circle(0, 0, 10);
popMatrix();
popStyle();
}
dist() can calculate the distance between two points. Circles that are closer to my arrow are bigger. While it’s important to let max() help us set the minimum of the circle’s size and let min() help us set the maximum of the circle’s size.
(e.g. Because max() is to choose the bigger number, so it’s for setting the lower limit. Pay attention to the logic here!)
Step 3:
int row = 25;
int column = 25;
int total = row*column;
int padding = 150;
float[] xPosition = new float[total];
float[] yPosition = new float[total];
float[] size = new float[total];
float[] xPosition1 = new float[total];
float[] yPosition1 = new float[total];
void setup() {
size(800, 800);
for (int j = 0; j < row; j++){
for (int i = 0; i < column; i++){
int index = i + j*column;
xPosition [index] = map(i, 0, column-1, padding, width-padding);
yPosition [index] = map(j, 0, row-1, padding, height-padding);
size[index] = 1.0;
}
}
}
void draw(){
background(255);
for (int n = 0; n < total; n++){
float circleRadius = dist (mouseX, mouseY, xPosition[n], yPosition[n]);
//circleRadius = max(circleRadius, 0.01);
xPosition1[n]=xPosition[n] - (25/circleRadius)*(mouseX - xPosition[n]);
yPosition1[n]=yPosition[n] - (25/circleRadius)*(mouseY - yPosition[n]);
size[n] = 100/circleRadius;
size[n] = max(size[n], 0.5);
size[n] = min(size[n],2);
drawCircle(xPosition1[n], yPosition1[n], size[n]);
}
}
void drawCircle(float x, float y, float scale){
pushMatrix();
//pushStyle();
translate(x, y);
scale(scale);
fill(0);
noStroke();
circle(0, 0, 10);
popMatrix();
//popStyle();
}
The main point here is to open two more arrays for new x- and y-coordinates.
Step 4:
int row = 25;
int column = 25;
int total = row*column;
int padding = 150;
float[] xPosition = new float[total];
float[] yPosition = new float[total];
float[] size = new float[total];
float[] xPosition1 = new float[total];
float[] yPosition1 = new float[total];
float[] xPosition2 = new float[total];
float[] yPosition2 = new float[total];
void setup() {
size(800, 800);
for (int j = 0; j < row; j++){
for (int i = 0; i < column; i++){
int index = i + j*column;
xPosition [index] = map(i, 0, column-1, padding, width-padding);
yPosition [index] = map(j, 0, row-1, padding, height-padding);
xPosition2[index] = xPosition[index];
yPosition2[index] = yPosition[index];
size[index] = 1.0;
}
}
}
void draw(){
background(255);
for (int n = 0; n < total; n++){
float circleRadius = dist (mouseX, mouseY, xPosition[n], yPosition[n]);
circleRadius = max(circleRadius, 0.01);
xPosition1[n]=xPosition[n] - (25/circleRadius)*(mouseX - xPosition[n]);
yPosition1[n]=yPosition[n] - (25/circleRadius)*(mouseY - yPosition[n]);
size[n] = 100/circleRadius;
size[n] = max(size[n], 0.4);
size[n] = min(size[n],2);
xPosition2[n] = lerp(xPosition2[n], xPosition1[n], 0.02);
yPosition2[n] = lerp(yPosition2[n], yPosition1[n], 0.02);
drawCircle(xPosition2[n], yPosition2[n], size[n]);
}
}
void drawCircle(float x, float y, float scale){
pushMatrix();
//pushStyle();
translate(x, y);
scale(scale);
fill(0);
noStroke();
circle(0, 0, 10);
//popStyle();
popMatrix();
}
There were some accidents happened. I did some change, that is, matching x/yPosition2 and x/yPosition together in void setup() so that processing can immediately know the connection between position2 and position in setup, which is before void draw(), so it won’t get confused.
lerp() can be used for delaying the action. I want to remind myself that it should the format of the function is lerp(float start, float end, percentage) and keep in mind which is the action I want to slow down. And here I would like movement between the previous position (xPosition1 & yPosition1) and the current position (xPosition2 & yPosition2) to slow down.