Canvas-Competition/index.html at master · vsdevaraddi/Canvas-Competition · 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
<html>

<body onload="canvas.setup()">

    <canvas id="canvasArea1" style="position: absolute; left: 0; top: 0; z-index: 0; width:100%;height:100%; background:#000"></canvas>
    <canvas id="canvasArea2"
        style="visibility: hidden; position: absolute; left: 0; top: 0; z-index: 0; width:100%;height:100%; background:#000"></canvas>

    <script src="./canvas.js"></script>
</body>

</html>
<script>

    // Declare all global variables here
    var innerWidth,innerHeight,radius,starsIndex,stars=[],
        centerX,centerY,focalLength,starRadius,starX,starY,numStars,
        mouse={},starX_dir,starY_dir;
    function setup() {
        // Initialize variables here\
        innerwidth=canvas.width;
        innerHeight=canvas.height;
        radius=1;
        starsIndex=0;
        stars=[],
        centerX=innerWidth/2;
        centerY=innerHeight/2;
        focalLength=100;
        starX=null;
        starY=null;
        numStars=2000;
        mouse={};
        starX_dir=2;//initial direction
        starY_dir=200;
        var s;
        for(s = 0; s < numStars; s++){
	        x = Math.random() * innerWidth;
	        y = Math.random() * innerHeight;
	        z = Math.random() * innerWidth;
	        new star(x,y,z);
        }
        animate();
    }

    // Declare custom functions here
// Function for create new start
function star(x,y,z){
    this.x = x;
	this.y = y;
	this.z = z;
	this.radius = radius;
	this.color = "#ffffff";
	starsIndex++;
	stars[starsIndex] = this;
	this.id = starsIndex;

	this.update = function(){
	    starX=(this.x-centerX)*(focalLength /this.z);
	    starX=starX+centerX;
	    starY=(this.y-centerY)*(focalLength/this.z);
	    starY=starY+centerY;
	    starRadius=radius*(focalLength/this.z);
	    starX=starX+starX_dir;
	    starY=starY+starY_dir;
	    this.z=this.z-5;
        //console.log(starX,starY);
	    if(this.z<=0){
	        this.z=parseInt(innerWidth);
	    }
            this.draw();
    }
    this.draw=function(){
        canvas.drawMode="fill";
        canvas.setColor('#fff');
        canvas.drawCircle(starX,starY,starRadius);
    }
}

function animate(){
    canvas.setColor("rgb(0,0,0)");
    canvas.drawMode="fill";
    canvas.drawRectangle(0,0,innerWidth,innerHeight);
	var s=0;
    for(var i in stars){
	    stars[i].update();
	}
}
    // Function while will be called repeatedly
    function main() {
        animate();
        if(canvas.mouseDown){
        centerX=canvas.mouseX;
        centerY=canvas.mouseY-200;
        }

    }

    // Override functions here;
    canvas.mainFunction = main;
    canvas.keyUpCallback = function(e){
        if(e.code==="ArrowUp"){
            focalLength=focalLength*1.2;
        }else if(e.code==="ArrowDown")
        {
            focalLength=focalLength/1.2;
        }else if(e.code==="ArrowLeft"){
            starX_dir=starX_dir+10;
            starY_dir=starY_dir-10;
        }
        else if(e.code==="ArrowRight"){
            starX_dir=starX_dir-10;
            starY_dir=starY_dir+10;
        }
    }


    var timeStep = 50;
    canvas.startMain(timeStep);
    canvas.setupFunction = setup;

</script>