DemoJS/2.html at master · Utkarsh51/DemoJS · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
	<title>background</title>
</head>
<body>

<p>
	<canvas id="canvas1" style="background-color: white;"></canvas>
</p>

</body>
<script src="processing.min.js"></script>


<script>
     var utkarsh = function(utkarshcreated)
     {
          with (utkarshcreated)
          {
            size(1400,600);
            frameRate(50);
            //code for animation
        var ballCycle = {
    numBalls: 65,
    ballSize: 5,
    positions: [],
    movements: [],
    maxSpeed: 7,
    minSpeed: 2,
    a:0,
    p: function(){
        for(this.a = 0;this.a < this.numBalls;this.a++){

            this.movements.push([floor(random(this.minSpeed,this.maxSpeed + 1)),floor(random(this.minSpeed,this.maxSpeed + 1))]);
            this.positions.push([floor(random(0,1400)),floor(random(0,600))]);
        }
    },
    draw:function(){
        fill(0, 255 - 183, 255,15);
        rect(0,0,1400,600);
        fill(0, 255, 0);
        noStroke();
        for(this.a = 0;this.a < this.numBalls;this.a++){
            //draw the balls
            ellipse(this.positions[this.a][0], this.positions[this.a][1], this.ballSize, this.ballSize);

            //increment the x positions of the balls
            this.positions[this.a][0] += this.movements[this.a][0];

            //check if the ball has reached the edge of the screen
            if(this.positions[this.a][0] + this.ballSize / 2 >= 1400){
                this.movements[this.a][0] = -floor(random(this.minSpeed,this.maxSpeed + 1));
            }else if(this.positions[this.a][0] - this.ballSize / 2 <= 0){
                this.movements[this.a][0] = floor(random(this.minSpeed,this.maxSpeed + 1));
            }

            //increment the y positions of the balls
            this.positions[this.a][1] += this.movements[this.a][1];

            //check if the ball has reached the edge of the screen
            if(this.positions[this.a][1] + this.ballSize / 2 >= 600){
                this.movements[this.a][1] = -floor(random(this.minSpeed,this.maxSpeed + 1));
            }else if(this.positions[this.a][1] - this.ballSize / 2 <= 0){
                this.movements[this.a][1] = floor(random(this.minSpeed,this.maxSpeed + 1));
            }

            //make sure the ball has not collided with any other balls
            for(var b = 0;b < this.numBalls;b++){
                if(this.a === b){
                    continue;
                }
                if(dist(this.positions[this.a][0], this.positions[this.a][1], this.positions[b][0], this.positions[b][1]) < this.ballSize){
                    this.movements[this.a][0] *= -1;
                    this.movements[this.a][1] *= -1;
                }
            }
        }
    }
};


ballCycle.p();
frameRate(0);
var frame = {
    count: 0,
    lastm: second(),
    frameR: 0,
    find: function(){
        this.count++;
        if(this.lastm !== second()){
            this.frameR = this.count;
            this.count = 0;
            this.lastm = second();
        }
    }
};
var find = function(){
    var c = createGraphics(20,20,JAVA2D);
    c.beginDraw();
    c.fill(255, 0, 0);
    c.textAlign(CENTER,CENTER);
    c.text(frame.frameR,10,10);
    c.endDraw();
    return c;
};

var draw = function(){
    image(find(),0,0);
    ballCycle.draw();
    frame.find();
    if(frame.frameR > 100){
        frameRate(100);
    }else{
        frameRate(0);
    }
};

}};
 var canvas = document.getElementById("canvas1");
     var utkarshcreated = new Processing(canvas, utkarsh);
     </script>
</html>