In Class
Our goal for this recitation is to get familiar with for loops, self-designed functions and arrays. We will use for loops and arrays to mass produce similar figures in our animation. And I create a function to draw ice-creams. This is the final work and codes:
float a=0; float b=0; int k=0; int numberOfInstances = 100; float[] xPos = new float[numberOfInstances]; float[] yPos = new float[numberOfInstances]; int[] col = new int[numberOfInstances]; void setup() { size(600, 600); background(255); for(int index = 0; index < numberOfInstances; index++) { xPos[index]=random(0,width); yPos[index]=random(0,height); col[index]=k; k=color(255, 185, random(100,255)); } } void draw(){ background(255); for(int index = 0; index < numberOfInstances; index++) { //background(255); xPos[index]=xPos[index]+random(-3,3); display(xPos[index], yPos[index],col[index]); if(xPos[index]+10>width){ xPos[index]-=15;} if(xPos[index]-10<0){ xPos[index]+=15;} if(yPos[index]+40>height){ yPos[index]-=45;} if(yPos[index]-10<0){ yPos[index]+=15;} if(mousePressed==true){ if(dist(mouseX,mouseY,xPos[index],yPos[index])<=16){ yPos[index]=yPos[index]+random(-10,10); display(xPos[index],yPos[index],color(165,227,184));} } } } void display(float x, float y, color c) { stroke(150); fill(255, 223, 152); triangle(x-10, y, x+10, y, x, y+40); fill(c); arc(x, y, 20, 20, PI, 2*PI, CLOSE); fill(200, 241, 247); rectMode(CENTER); rect(x, y-13, 2, 2); }
It’s not a challenging task, the only point stuck me for a while is when I’m creating movement for my ice-creams, the former figures will be left on the background. I put the background() function at the end of my for loop, but it turns out that only one ice-cream can be painted on the screen. I tried different positions to put the function, and finally find out that it should be put at the beginning of the for loop, so that the background can be printed first and won’t cover the following figures.
I also get more deeper insight into functions and loops through practice. For loops are really useful to generate clear and efficient codes. Self-designed functions also help to shorten the codes. Arrays gather a bunch of information which make it more convenient for us to dispatch them.
Homework
Version 1 (Independent work)
This is the original version developed by myself. Bur it is not that perfect:
The Original Code:
int rows=22; int columns=22; float x0=100; float y0=100; float r0=8; float d0=28; float[] xPoints=new float[rows]; float[] yPoints=new float[columns]; float[] xNew=new float[rows]; float[] yNew=new float[columns]; float t=0; float m=0; float k=0;
void setup(){
size(800,800);
smooth();
background(255);
for(int a=0;a<xPoints.length;a++){
xPoints[a]=x0;
x0+=d0;
//xNew[a]=xPoints[a]+(mouseX-xPoints[a])*m;
}
for(int b=0;b<yPoints.length;b++){
yPoints[b]=y0;
y0+=d0;
//yNew[b]=yPoints[b]+(mouseY-yPoints[b])*m;}
}}
void draw(){
background(255);
// for(int a=0;a<xPoints.length;a++){
// xNew[a]=xPoints[a]+(xPoints[a]-mouseX)*m;
// }
//for(int b=0;b<yPoints.length;b++){
// yNew[b]=yPoints[b]+(yPoints[b]-mouseY)*m;}
for(int a=0;a<xPoints.length;a++){
for(int g=0;g<xPoints.length;g++){
xNew[g]=xPoints[g]+(xPoints[a]-mouseX)*m;
}
for(int b=0;b<yPoints.length;b++){
for(int h=0;h<yPoints.length;h++){
yNew[h]=yPoints[h]+(yPoints[b]-mouseY)*m;}
t=dist(mouseX,mouseY,xPoints[a],yPoints[b]);
if(t<60){t=60;}
if(t>200){t=200;}
k=dist(mouseX,mouseY,xPoints[a],yPoints[b]);
if(k<10){k=10;}
m=40/k;
noStroke();
fill(0);
circle(xNew[a],yNew[b],r0*180/t);
}
}
// for(int a=0;a<xPoints.length;a++){
// xNew[a]=xPoints[a]+(xPoints[a]-mouseX)*m;
// }
//for(int b=0;b<yPoints.length;b++){
// yNew[b]=yPoints[b]+(yPoints[b]-mouseY)*m;}
}
Version 2 (take reference from the study session)
To improve my codes, I discussed it with friends who has joined the study session, and this is the final version:
The Final Codes:
int row=23; int column=23; int totalNum=row*column; int padding=150; float lerpNum = 0.045; float[]xPosition= new float[totalNum]; float[]yPosition= new float[totalNum]; float[]scaleFactor= new float[totalNum]; float[]xPosition1= new float[totalNum]; float[]yPosition1= new float[totalNum]; 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); xPosition1[index]=xPosition[index]; yPosition1[index]=yPosition[index]; scaleFactor[index]=1.0; } } } void drawCircle(float x,float y,float scale){ pushMatrix(); pushStyle(); translate(x,y); scale(scale); fill(0); noStroke(); circle(0,0,10); popMatrix(); popStyle(); } void draw(){ background(255); for (int n=0;n<totalNum;n++){ float circleRadius=dist(mouseX,mouseY,xPosition[n],yPosition[n]); circleRadius=max(circleRadius,0.01); float xNewPos=xPosition[n]-(25/circleRadius)*(mouseX-xPosition[n]); float yNewPos=yPosition[n]-(25/circleRadius)*(mouseY-yPosition[n]); xPosition1[n] = lerp (xPosition1[n],xNewPos, lerpNum); yPosition1[n] = lerp (yPosition1[n],yNewPos, lerpNum); scaleFactor[n]=100/circleRadius; scaleFactor[n]=max(scaleFactor[n],0.4); scaleFactor[n]=min(scaleFactor[n],2); drawCircle(xPosition1[n],yPosition1[n],scaleFactor[n]); } }
Q&A
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().
Setup() is like the preparation part of the codes, so codes put into setup() will remain unchanged. Draw() is the active part of the codes, so the functions in draw() will be execute every frame. So the for loop put into setup() will create random but unchanged ice-creams on the canvas, while for loop in draw() will create 100 ice-creams changing their position every frame.
Question 2: What is the benefit of using arrays? How might you use arrays in a potential project?
Using arrays can easily gather a bunch of data and make them a set. So if there’s a function associated to a set of data, it will be convenient to use arrays to draw specific data for it. I might use arrays in designing a turntable game. The turntable is divided into several parts and each part stand for one specific prize. So that the content of prizes can be generated as an array, and come up with random results from the array each time when the turntable is rolling.