Question

Have to make a self-portrait but am done with the portrait but need animations such as blinking, color change, smiling, etc. Need at least 3 animations. Can anyone help me ASAP? It doesn't have to be hard, it can also be like simple codes. Using CodeHs btw.

function start(){


var face = new Circle(130);
face.setPosition(x , y - 80);
face.setColor("#f1c27d");
add(face);

var leftEye = new Circle(30)
leftEye.setPosition(x - 50, y - 120);
leftEye.setColor("white");
add(leftEye);

var RightEye = new Circle(30)
RightEye.setPosition(x + 50, y - 120);
RightEye.setColor("white");
add(RightEye);

var RighteyeBalls = new Circle(15)
RighteyeBalls.setPosition(x + 50, y - 120);
RighteyeBalls.setColor("#603101");
add(RighteyeBalls);

var LefteyeBalls = new Circle(15)
LefteyeBalls.setPosition(x - 50, y - 120);
LefteyeBalls.setColor("#603101");
add(LefteyeBalls);

var hair = new Oval(250,100);
hair.setPosition(x, y - 200);
hair.setColor("#7B3F00");
add(hair);

var neck = new Rectangle(50, 50);
neck.setPosition(x - 25, y + 40);
neck.setColor("#f1c27d");
add(neck);

var body = new Rectangle(260,260);
body.setPosition(x - 130, y + 80);
body.setColor("#15ACA5");
add(body);

var leftshoulder = new Rectangle(70, 70);
leftshoulder .setPosition(x - 200,y + 80);
leftshoulder.setColor("#15ACA5");
add(leftshoulder);

var rightshoulder = new Rectangle(70, 70);
rightshoulder .setPosition(x + 130,y + 80);
rightshoulder.setColor("#15ACA5");
add(rightshoulder);

var rightarm = new Rectangle(70, 90);
rightarm .setPosition(x + 130,y + 150);
rightarm.setColor("#f1c27d");
add(rightarm);

var leftarm = new Rectangle(70, 90);
leftarm .setPosition(x - 200,y + 150);
leftarm.setColor("#f1c27d");
add(leftarm);




}
var x = getWidth()/ 2
var y = getHeight()/ 2

Answer 1

I've added 3 animation to your code: mouth moving up/down, eyes looking left/right, and shirt changing colors.

I've use only what's given in the CodeHS doc (If/Else, Oval, and Timers). Could've made something better without the restriction, since Javascript doesn't use setTimer/stopTimer but use setInterval. Oh well, this one is simple enough :)

I've moved some code around and rename a couple variables, so it's best to copy+paste the new code.

//Will be called in other function

var x = getWidth()/ 2;

var y = getHeight()/ 2;

var mouth = new Oval(100, 50);

var rightEyeBall = new Circle(15);

var leftEyeBall = new Circle(15);

var body = new Rectangle(260,260);

function start(){

var face = new Circle(130);

face.setPosition(x , y - 80);

face.setColor("#f1c27d");

add(face);

var leftEye = new Circle(30)

leftEye.setPosition(x - 50, y - 120);

leftEye.setColor("white");

add(leftEye);

var rightEye = new Circle(30)

rightEye.setPosition(x + 50, y - 120);

rightEye.setColor("white");

add(rightEye);

rightEyeBall.setPosition(x + 50, y - 120);

rightEyeBall.setColor("#603101");

add(rightEyeBall);

leftEyeBall.setPosition(x - 50, y - 120);

leftEyeBall.setColor("#603101");

add(leftEyeBall);

var hair = new Oval(250,100);

hair.setPosition(x, y - 200);

hair.setColor("#7B3F00");

add(hair);

var neck = new Rectangle(50, 50);

neck.setPosition(x - 25, y + 40);

neck.setColor("#f1c27d");

add(neck);

body.setPosition(x - 130, y + 80);

body.setColor("#15ACA5");

add(body);

var leftshoulder = new Rectangle(70, 70);

leftshoulder .setPosition(x - 200,y + 80);

leftshoulder.setColor("#15ACA5");

add(leftshoulder);

var rightshoulder = new Rectangle(70, 70);

rightshoulder .setPosition(x + 130,y + 80);

rightshoulder.setColor("#15ACA5");

add(rightshoulder);

var rightarm = new Rectangle(70, 90);

rightarm .setPosition(x + 130,y + 150);

rightarm.setColor("#f1c27d");

add(rightarm);

var leftarm = new Rectangle(70, 90);

leftarm .setPosition(x - 200,y + 150);

leftarm.setColor("#f1c27d");

add(leftarm);

//Added Mouth

mouth.setPosition(x, y);

mouth.setColor("red");

add(mouth);

//Animation: timer is set to check and alternate directions.

//Mouth animation

setTimer(talk, 1000);//1000=1seconds

//Eyeball animation

setTimer(look, 1000);

//Change body color

setTimer(randomColor, 100);

}

function talk(){//alternates between up and down

if(mouth.getY() >= y-10){//check if rightEyeBall has moved passed 10px

stopTimer(mouthDown);

setTimer(mouthUp, 50);//50=50ms. decrease to speed up.

} else{

stopTimer(mouthUp);

setTimer(mouthDown, 50);

}

}

function mouthDown(){

mouth.move(0,1);//move 1px down

}

function mouthUp(){

mouth.move(0,-1);//move 1px up

}

function look(){

if(rightEyeBall.getX() <= x +55){//check if rightEyeBall has moved passed 5px offset

stopTimer(lookLeft);

setTimer(lookRight, 50);

} else {//move it back

stopTimer(lookRight);

setTimer(lookLeft, 50);

}

}

function lookLeft(){

rightEyeBall.move(-1,0);

leftEyeBall.move(-1,0);

}

function lookRight(){

rightEyeBall.move(1,0);

leftEyeBall.move(1,0);

}

function randomColor(){

body.setColor(Randomizer.nextColor());

}