60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
let num_of_line = 4;
|
|
let curr_frame = 0;
|
|
let speed = 1;
|
|
|
|
function keyPressed() {
|
|
if (keyCode === LEFT_ARROW) {
|
|
console.log("left_arrow");
|
|
speed = speed - 1;
|
|
if (speed <= 0) speed = 1;
|
|
} else if (keyCode === RIGHT_ARROW) {
|
|
console.log("right_arrow");
|
|
speed = speed + 1;
|
|
if (speed >= 3600) speed = 3600;
|
|
}
|
|
}
|
|
|
|
function setup() {
|
|
createCanvas(400, 400);
|
|
background(220);
|
|
frameRate(30);
|
|
}
|
|
|
|
function draw() {
|
|
background(220);
|
|
|
|
if (curr_frame < 3600) {
|
|
curr_frame += speed;
|
|
} else {
|
|
curr_frame = 0;
|
|
}
|
|
|
|
var boundary = 100 * abs(sin(curr_frame / 10));
|
|
console.log(speed);
|
|
|
|
var top_left = -20 + boundary;
|
|
var bottom_right = 420 - boundary;
|
|
var top_right = 420 - boundary;
|
|
var bottom_left = -20 + boundary;
|
|
|
|
var line_xys = [
|
|
[top_left, 0, bottom_right, 400],
|
|
[top_right, 0, bottom_left, 400],
|
|
];
|
|
|
|
if (num_of_line > 0) line(...line_xys[0]);
|
|
if (num_of_line > 1) line(...line_xys[1]);
|
|
|
|
if (num_of_line > 2) {
|
|
var need_to_draw = num_of_line - 2;
|
|
for (var i = 1; i <= need_to_draw; i++) {
|
|
var top_width = top_right - top_left;
|
|
var step = top_width / (need_to_draw + 1);
|
|
var top_x = top_left + step * i;
|
|
var bottom_x = bottom_right - step * i;
|
|
|
|
line(top_x, 0, bottom_x, 400);
|
|
}
|
|
}
|
|
}
|