-
Notifications
You must be signed in to change notification settings - Fork 0
/
01_Lineart.js
83 lines (75 loc) · 2.36 KB
/
01_Lineart.js
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
const canvas = document.getElementById("her");
length = 0.80*Math.floor(Math.min(window.innerHeight,window.innerWidth));
canvas.width = length;
canvas.height = length;
const context = canvas.getContext("2d");
context.fillStyle = "#202030";
context.fillRect(0, 0, canvas.width, canvas.height);
let balls = 21;
h = 0.045*Math.min(document.body.clientWidth, document.body.clientHeight);
let text = document.getElementById("Ballcount");
text.innerHTML = "Lines : " + (balls-1);
let intID = null;
function increaser(){
clearInterval(intID);
balls+=5;
text.innerHTML = "Lines : " + (balls-1);
context.fillStyle = "#202030";
context.fillRect(0, 0, canvas.width, canvas.height);
start();
}
function decreaser(){
clearInterval(intID);
if((balls-5)>=5){balls-=5;}
text.innerHTML = "Lines : " + (balls-1);
start();
}
function fromCenter(x0,y0){
return [x0+(canvas.width/2),y0+(canvas.height/2)];
}
class Point{
constructor(number){
this.number = number;
this.r = ((number+1)*canvas.width)*(0.45/balls);
this.coXY = [this.r+(canvas.width/2),0+(canvas.height/2)];
this.circleR = 0.10*length/balls;
this.theta = 0;
}
drawPoint(){
context.beginPath();
context.fillStyle = "#E0E0E0";
context.arc(this.coXY[0],this.coXY[1],this.circleR,0,2*Math.PI);
context.fill();
}
updatePosition(){
this.coXY = [(this.r*Math.cos(this.theta))+(canvas.width/2),(this.r*Math.sin(this.theta))+(canvas.height/2)];
this.theta -= (balls-this.number)*(100/(balls+10))*Math.PI/2000;
}
}
function drawOnCanvas(points){
for(let i=0; i<balls-1;i++){
context.beginPath();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 2*canvas.width*10/(500*balls);
context.moveTo(points[i].coXY[0], points[i].coXY[1]);
context.lineTo(points[i+1].coXY[0], points[i+1].coXY[1]);
context.stroke();
}
for(let i=0; i<balls;i++){
points[i].drawPoint();
}
}
function start(){
let points = new Array();
for(let i=0; i<balls;i++){
points.push(new Point(i));
}
intID = setInterval(function(){
context.fillStyle = "#202030";
context.fillRect(0, 0, canvas.width, canvas.height);
for(let i=0; i<balls;i++){
points[i].updatePosition();
}
drawOnCanvas(points);
},34);
}