ORIGIN

JS project with code

JavaScript 3 mins536 words

The code of the bouncing all and more projects.

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* drawing a bouncing ball */

var t = 0;
var a = 0.01;
var y = 0;
var v = 38;
var x = 0;

draw= function() {
background(214, 254, 255);
noStroke();
fill(255, 255, 255);
rect(0,228,400,202);

v = -a*t+4;
y = -a*t*t+v*t;

/*shadow*/
fill(200+0.1*y, 200+0.1*y, 200+0.1*y);
ellipse(x,300,50+0.3*y,10);

/*ball*/
fill(0, 0, 0);
ellipse(x,274-y,50,50);

if (v<0) {
a=-0.02-t;
}
if (y<0) {
t=0;
a+=0.002;
}

t+=5;
x+=2;

if (a<0) {
y=0;
}
if (x > 450) {
y=0;
x=0;
a=0.01;
v=38;
t=0;
}
};

This is a cute picture I’ve seen somewhere. It’s so lovely so I drew it using JavaScript.

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
background(209, 255, 255);
var drawCuty = function() {
var x = 148;
var y = 170*x/140;
var w = 130*x/140;
var h = 50*x/140;
var a = x*30/140;

/*the first layer*/
strokeWeight(6*x/140);
stroke(59, 12, 12);
arc(x+1, y+h/2, h, h, -272, -90);//left curve
arc(x+w, y+h/2, h, h, -121, 90);//right curve
noStroke();
rect(x, y, w, h);//to make the bottom layer full
stroke(59, 12, 12);
line(x, y+h, x+w, y+h);

/*the second layer*/
noStroke();
quad(x+a, y-h*10/13, x+w-a, y-h*10/13, x+w, y, x, y);//to make the second layer full
stroke(59, 12, 12);
arc(x*54/52+a/2, y-h*5/13, h, h, -228, -85);//left curve
arc(x*51/53+w-a/2, y-h*5/13, h, h, -86, 47);//right curve

/*the top layer*/
noStroke();
fill(255, 255, 255);
quad(x+a, y-h*6/4, x+w-a, y-h*6/4, x+w-a/2, y-h*5/13, x+a/2, y-h*5/13);//to fill the third layer
stroke(59, 12, 12);
arc(x+a, y-h*(6/4-7/20), h/2, h*14/20, 124, 270);//left curve
arc(x+w-a, y-h*(6/4-7/20), h/2, h*14/20, -75, 47);//right curve
fill(255, 255, 255);
beginShape();
curveVertex(-127*x/140, 197*y/170);
curveVertex(x+a, y-h*6/4);
curveVertex(x+(w-a), y-h*6/4);
curveVertex(616*x/140, 500*y/170);
endShape();//the most top

/*eyes*/
fill(59, 12, 12);
ellipse(x+a, y*175/170, x/14, x/14);//left eye
ellipse(x+w-a,175*y/170, x/14, x/14);//right eye

/*mouse*/
noFill();
strokeWeight(4*x/140);
arc(x+w/2, 175*y/170, x/10, x/10, 10, 180);

/*the red face*/
strokeWeight(x/14);
stroke(250, 187, 223);
line(x+18*x/140, y+h/2, x+24*x/140, y+h/2);
line(x+w-18*x/140, y+h/2, x+w-24*x/140, y+h/2);
};
drawCuty();

And a design using this picture:

img

img

TOP
COMMENT
  • ABOUT
  • |
o_oyao
  The Jigsaw puzzle is incomplete with even one missing piece. And I want to be the last piece to make the puzzle complete.
Like my post?
Default QR Code
made with ❤️ by o_oyao
©o_oyao 2019-2024

|