Question 1: In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().
Having a for loop in setup() means that once the processing starts to work, the for loop will finish at once and display all the outcomes directly on the screen/canvas. However, when putting the for loop in draw(), although we human beings may not be able to observe very obvious distinctions, the function is actually running round by round after the processing starts. So, the outcomes are actually changing, or to say, adding to the previous one all the time.
Question 2: What is the benefit of using arrays? How might you use arrays in a potential project?
By using arrays, we can simply and directly have many different but also well-organized values of variables. Before having an array, if we want to create two different circles moving in different directions or speeds, we have to create each variable two times. However, with the use of an array, we can simply create one array instead, and reach the same outcomes.
In my project, I will potentially use arrays to store the continuous values that are extracted from the sensors on the Arduino so as to give users continuous changing feedback to make the experience richer.
Below are my code and video-documentation:
int n = 100; float[] x = new float[n]; float[] y = new float[n]; float[] d = new float[n]; int[] r = new int[n]; int[] g = new int[n]; int[] b = new int[n]; float speedX[] = new float[n]; float speedY[] = new float[n]; void setup(){ size(1000,600); background(255); for(int i =0; i<n; i=i+1){ x[i] = random(width); y[i] = random(height); d[i] = random(10,200); r[i] = int(random(0,255)); g[i] = int(random(0,255)); b[i] = int(random(0,255)); speedX[i] = random(2,10); speedY[i] = random(6,12); } } void draw(){ for (int i=0; i<n; i++){ display(x[i], y[i], d[i],r[i],g[i],b[i]); //face (posX[i], posY[i], color(random(255),random(255),random(255)),size[i]) } move(); bounce(); } void display(float x, float y, float d, int r, int g, int b) { //Use these parameters to create your graphics fill(r,g,b); noStroke(); circle(x,y,d); fill(r,g,b+d); noStroke(); rect(x=d,y-d,x+d,y+d); fill(r,g,b+d); noStroke(); triangle(x-d,y+d,x+d,y-d,x-d,y=d); } void move(){ for (int i=0; i<n; i++){ x[i] = x[i] + speedX[i]; y[i] = y[i] + speedY[i]; } } void bounce(){ for (int i=0; i<n; i++){ if(x[i]>(width-10/2) || x[i]<(0+10/2)){ speedX[i] = -speedX[i]; } if(y[i]>(height-10/2) || y[i]<(0+10/2)){ speedY[i] = -speedY[i]; } } }
Below are the code and video-documentation for the additional homework:
//how many circles are there int col=25, row=25; int totalNum = col*row; int padding = 140; int defaultSize = 10; //in the outcomes we can see that the positions of the circles have slightly changed float [] xPositionsOriginal = new float [totalNum]; float [] yPositionsOriginal = new float [totalNum]; //currentlt changing positions of th circles float [] xPositions = new float [totalNum]; float [] yPositions = new float [totalNum]; float [] sizeFactors = new float [totalNum]; //lerp value float lerpFactors = 0.05; void setup(){ size(800,800); for (int i = 0; i<col; i++){ for (int j = 0; j< row; j++){ //i = j, value: 0-24 int index = i + j * row; xPositionsOriginal [index] = map (i, 0, col-1, padding, width-padding); yPositionsOriginal [index] = map (j, 0, row-1, padding, height-padding); //set positions to the original ones xPositions [index] = xPositionsOriginal [index]; yPositions [index] = yPositionsOriginal [index]; sizeFactors[index] = 1.0; } } } void draw(){ background(255); for (int i= 0; i<totalNum; i++){ //distance between the mouse and circle positions float offset = dist(mouseX, mouseY, xPositions[i], yPositions[i]); //make sure offset will not be 0 offset = max(offset, 0.001); //how to change the offset based on the mousePosition //offset value based on the mouse position >> for further calculation float newX = xPositionsOriginal[i] - (25/offset)*(mouseX-xPositionsOriginal[i]); float newY = yPositionsOriginal[i] - (25/offset)*(mouseY-yPositionsOriginal[i]); xPositions[i] = lerp(xPositions[i], newX, lerpFactors); yPositions[i] = lerp(yPositions[i], newY, lerpFactors); //dist smaller > closer > size bigger sizeFactors[i] = 100/offset; //narrow sizeFactors down so calculation won't be affected sizeFactors[i] = max (sizeFactors[i], 0.4); sizeFactors[i] = min (sizeFactors[i], 2); //draw circles drawCircles(xPositions[i], yPositions[i], sizeFactors[i]); } } void drawCircles(float x, float y, float size){ pushMatrix(); translate(x,y); scale(size); fill(0); noStroke(); ellipse(0, 0, defaultSize, defaultSize); popMatrix(); }
