DEV Community

loading...
Cover image for My Very First JavaScript Khan Academy Challenge

My Very First JavaScript Khan Academy Challenge

saikiran profile image Sai Kiran ・2 min read

5 years ago when I was just getting into programming world, I started with khan academy JavaScript. One of the challenge i got was to design a character.
I thought of making something unique and searched kids drawing on google and found this frog image and started working my way through.

Alt Text

After Completing the frog, I wanted to make it a little interactive.

View the project here

var draw = function() {
   background(1, 0, 5);
   textSize(17);
   fill(97, 143, 125);
   text("The only limit is your imagination", 30, 82);
   var positionF = pmouseX;
   var eyeY = pmouseY;
   var eyeSize = 100;
   var eyeBall1 = 70;
   var eyeBall2 = 50;
   var eyeBall3 = 35;
   var eyeBall4 = 15;
   stroke(7, 61, 2);
   strokeWeight(5);
   fill(45, 135, 27);
   ellipse(positionF,eyeY+80,278,200);// face
   ellipse(positionF-75,eyeY,eyeSize,eyeSize);// left eye
   ellipse(positionF+75,eyeY,eyeSize,eyeSize);// right eye
   strokeWeight(2);
   fill(247, 250, 250);
   ellipse(positionF-80,eyeY,eyeBall1,eyeBall1);//eyeball 1 white
   ellipse(positionF+80,eyeY,eyeBall1,eyeBall1);//eyeball 1 white
   noStroke();
   fill(16, 204, 54);
   ellipse(positionF-76,eyeY+5,eyeBall2,eyeBall2);//eyeball 2 light green
   ellipse(positionF+76,eyeY+5,eyeBall2,eyeBall2);//eyeball 2 light green
   fill(0, 0, 0);
   ellipse(positionF-80,eyeY+10,eyeBall3,eyeBall3);//eyeball 3 black
   ellipse(positionF+80,eyeY+10,eyeBall3,eyeBall3);//eyeball 3 black
   fill(252, 249, 249);
   ellipse(positionF-89,eyeY+3,eyeBall4,eyeBall4);//eyeball 4 white
   ellipse(positionF+89,eyeY+3,eyeBall4,eyeBall4);//eyeball 4 white
   //face dots
   stroke(208, 219, 123);
   strokeWeight(10);
   point(positionF+17,eyeY+44);
   strokeWeight(7);
   point(positionF+36,eyeY+64);
   strokeWeight(10);
   point(positionF+-36,eyeY+61);
   strokeWeight(9);
   point(positionF+-11,eyeY+59);
   strokeWeight(12);
   point(positionF+-1,eyeY+33);
   strokeWeight(8);
   point(positionF+-24,eyeY+83);
   //Smile
   noFill();
   stroke(0, 0, 0);
   strokeWeight(10);
   arc(positionF,eyeY+40,227,208,34,146);
   strokeWeight(7);
   arc(positionF+182,eyeY+40,206,190,137,154);
   arc(positionF-182,eyeY+40,206,190,29,43);
   fill(86, 230, 14);
   textSize(39);
   text("Kiran Animations inc.", 30, 53);


    eyeSize = eyeSize+1;
};

Another work

Discussion

pic
Editor guide