Lab Date: April 14, 2019
Instructor: Marcela
In the recitation, I choose to apply what we just learned in the lecture and I thought the smile picture is very interesting and cute. The most interesting code is the myFunction part, not only because it saves a lot of time but also it can produce work in a random position and size to increase the visual shock. The drawback of this function is that In JavaScript, if no return value is specified, the function will return undefined. I want to make the random smile move but it didn’t change color, only move positions. After trying a lot of times, I found the processing will produce more and more smile but not a limited number of smile which can move randomly. I try to put the myFunction{}; into the void draw part but it overlaps endless. I asked Marcela for help, she told me it requires further knowledge “array”, float posX [] and posY[] to fix the x and y and then set move function. Then I choose to use keyPressed to show the random position of the “smiles”. To make it more interesting, I add a mobile ball which will change color automatically and only move in the canvas. When you pressed “q” the smiles will appear, else the smiles will not appear in the background. The number of “smiles” is too much and makes the picture look a little bit messy. Easter recommends me to change the number of “i” and the canvas looks better. The next step of this picture, I try to move the ball based on the array key pressed.
The video:
The code is following:
float circleX = 300;
float circleY = 0;
float xSpeed = 1;
float ySpeed = 1;
float x;
float y;
float s;
color c;
float a1 = 20;
float a2 = 30;
void setup(){
size(600,600);
background(255);
//println(addition(100,37));
//println(addition(10,3));
//myFunction(130,50, 10,color(120,30,50));
// myFunction(200,200,10, color(120,30,50));
// myFunction(100,100, 10, color(120,30,50));
x = random(width);
y = random(height);
}
void myFunction(float x, float y, float s, color c){
noStroke();
fill(c);
ellipse(x,y,s,s);
fill(255);
ellipse(x-100*0.3, y-100*0.1, s*0.05, s*0.05);
ellipse(x+100*0.3, y-100*0.1, s*0.05, s*0.05);
//mouth
arc(x,y, s*0.6,s*0.6, 0, PI);
}
void draw() {
background(0);
fill(random(255),random(255),random(255));
ellipse(circleX, circleY, 100, 100);
circleX = circleX + xSpeed;
circleY = circleY + ySpeed;
if (circleX < 0 || circleX > width) {
xSpeed = xSpeed * -1;
}
if (circleY < 0 || circleY > height) {
ySpeed = ySpeed * -1;
}
}
void keyPressed (){
if(key == ‘q’){
for(float i = 0; i < 10; i ++){
myFunction(random(width), random(height), random(10,100), color(random(255),random(255),random(255)));
}
}
}
Additional homework:
The last step of additional homework is diffucult. I tried many differen approaches, including for loops, but the size of circle is changing all the time and you don’t know what is the size when it closes to the cross. Finally I remeber the size also can change with the size of the circle, and at this time, I only use one value “circle”, it is very convenient and effective.
float steps = 3;
int i=0;
float x = 300;
float y = 300;
float xs = 0;
float ys = 0;
float size = 0;
int count = 0;
int cycle = 75;
float s = 50;
void setup(){
size(600,600);
colorMode(HSB, 255);
frameRate(40);
size(600,600);
rectMode(CENTER);
}
void draw(){
if (keyPressed) {
if (keyCode == UP) {
ys=-15;
xs=0;
} else if (keyCode==DOWN) {
ys=15;
xs=0;
} else if (keyCode ==LEFT) {
xs=-15;
ys=0;
} else if (keyCode == RIGHT) {
xs=15;
ys=0;
}
}
size = 125 * sin(PI * count / cycle)+225;
if (height-y<size/2f) {
ys=-15;
xs=0;
}
if (y<size/2f) {
ys=15;
xs=0;
}
if (width-x<size/2f) {
xs=-15;
ys=0;
}
if (x<size/2f) {
xs=15;
ys=0;
}
x+=xs;
y+=ys;
translate(x,y);
background(0,0,255);
fill(0,0,255);
strokeWeight(10);
stroke(i, 255, 255);
i=i+1;
if(i>255){
i=0;
}
ellipse(0,0,s,s);
s = s + steps;
if (s < 40 || s > 300 ){
steps = -steps;
}
}