For this recitation, I got the inspiration from one of the slides in class, with a red background and eyes on it. The eyeball moves freely. And I came up with the idea that I can connect the movement of eyeballs and the mouse so that the eyeballs will move in the same direction of the mouse, while always staying in the eye sockets.
I set the background red and eradicated the stroke of the circles representing eye sockets. I filled the two big circles with red like the background so that they can convey a sense of hollowness. To make the code shorter and simpler, I created a “drawcircle()” function so that I didn’t need to repeat the same long code for two eyes. I then drew two small circles to represent the eyeballs. To make the eyeballs respond to the movement of the mouse, I employed the map function, limiting the eyeballs range of activity within these two big hollow circles.
Then I created a rectangle with the four corners of it rounded. I also filled the rectangle with white color to make it compatible with the eyes. I typed “CLICK ME” in red in the center of the rectangle to inform the audience the correct way to interact with the rectangle is to use the mouse to click it. The red color also makes the characters striking. I also mimicked what the normal website and programs will do, which was to alter the icon of the cursor. Therefore, I set a range in which the icon of the mouse will change from an arrow to hand. At first, I only typed in the code which changed the arrow to hand, but when I ran it, I realized that it was a one-way change, and once the icon has altered to hand, it would not change back to arrow again, so I adjusted the code by adding the “else” function. By clicking the rectangle, I wanted to draw a mouth using “bezier” function.
To also include the keyboard in my project, I drew a nose and tried to move it by pressing the direction keys. I also filled the nose with white color. Applying this code was probably the most difficult part of my process. Because I put the “background” function in the setup loop, so every time I pressed the direction key, the white circle would not move along but always left its trace behind it. After seeking help from peers, I transferred the “background” function into the “keyPressed” loop and this alternation successfully achieved my purpose.
<script src=”https://gist.github.com/KayceeCC/178d86fcd149951ae380d8032ad5bf11.js”></script>
String[] lines;
int xpos=300;
int ypos=350;
void setup() {
size(600, 600);
background(200, 50, 50);
rectMode(CENTER);
}
void drawcircle(int x, int y, int c, int d) {
stroke(255);
strokeWeight(5);
fill(200, 50, 50);
ellipse(x, y, c, d);
}
void draw() {
drawcircle(200, 250, 100, 100);
drawcircle(400, 250, 100, 100);
float ex1= map (mouseX, 0, width, 170, 230);
float ey1= map (mouseY, 0, height, 220, 280);
noStroke();
fill(255);
ellipse(ex1, ey1, 25, 25);
float ex2= map (mouseX, 0, width, 370, 430);
float ey2= map (mouseY, 0, height, 220, 280);
noStroke();
fill(255);
ellipse(ex2, ey2, 25, 25);
noStroke();
fill(255);
rect(300, 500, 150, 50, 25);
String a= “CLICK ME”;
fill(200, 50, 50);
text(a, 350, 520, 150, 50);
if (mouseX>225 && mouseX<375 &&mouseY>475 &&mouseY<525==true) {
cursor(HAND);
if (mousePressed==true) {
stroke(255);
strokeWeight(5);
bezier(200,450,300,500,600,400,200,450);
}
} else {
cursor(ARROW);
}
}
void keyPressed() {
background(200, 50, 50);
fill(255);
ellipse(xpos,ypos,100,100);
if (keyCode==UP) {
ypos=ypos-5;
}
if (keyCode==DOWN) {
ypos=ypos+5;
}
if (keyCode==RIGHT) {
xpos=xpos+5;
}
if (keyCode==LEFT) {
xpos=xpos-5;
}
}
Additional homework:
For the third step, I first applied random function in all three indexes for RGB, but it turned out to be changing colors fiercely, which didn’t fulfill the requirement of smooth change. Therefore, I employed i++ to let the color change in a small range each time.
For the last step which required us to move the circle by the direction keys within the canvas limitation, I used many “if” functions to let it compare the numbers of the real-time center point position plus the circle’s radian and the width or height of the canvas.
<script src=”https://gist.github.com/KayceeCC/00dbd103200d90fd3d8bbc6329362a57.js”></script>
int r = 80;
int i = 1;
int a = 300;
int b = 300;
int c = 0;
void setup(){
size(600,600);
frameRate(150);
colorMode(HSB);
}
void draw(){
background(255);
strokeWeight(20);
stroke(c,c,200);
if(c < 255){
c ++;
}
ellipse(a,b,r,r);
r+= i;
if(r >= 300){
i*= -1;
r+= i;
}
if(r <= 80){
i = 1;
r += i;
}
if (keyCode==UP) {
b=b-5;
}
if (keyCode==DOWN) {
b=b+5;
}
if (keyCode==RIGHT) {
a=a+5;
}
if (keyCode==LEFT) {
a=a-5;
}
if(a+r>width){
a=width-r;
}
if(a-r<0){
a=r;
}
if(b+r>height){
b=height-r;
}
if(b-r<0){
b=r;
}
}
Things I’ve learned:
· String function
· Cursor function
