63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<html>
|
|
<title>Oscilations in 3D</title>
|
|
|
|
<head>
|
|
<link rel="shortcut icon" type"image/ico" href"/Media/iconImage.ico">
|
|
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
|
|
</head>
|
|
<script>
|
|
let angle = 0;
|
|
let w = 30; //amount of boxes
|
|
let ma;
|
|
let maxD
|
|
|
|
function setup() {
|
|
createCanvas(600, 600, WEBGL);
|
|
frameRate(24);
|
|
ma = atan(1 / sqrt(2)); //max angle
|
|
maxD = dist(0, 0, 200, 200); //max distance
|
|
}
|
|
|
|
function draw() {
|
|
background(100);
|
|
ortho(-400, 400, -400, 400, 0, 1000); //to set up ortho projection
|
|
directionalLight(255, 255, 255, 0, -1, 0);
|
|
|
|
rotateX(-QUARTER_PI);
|
|
rotateY(ma);
|
|
|
|
let offset = 0;
|
|
for (let z = 0; z < height; z += w) {
|
|
for (let x = 0; x < width; x += w) {
|
|
push()
|
|
let d = dist(x, z, width / 2, height / 2)
|
|
offset = map(d, 0, maxD, -PI, PI);
|
|
let a = angle + offset;
|
|
let h = floor(map(sin(a), -1, 1, 100, 350));
|
|
normalMaterial();
|
|
translate(x - width / 2, 0, z - width / 2);
|
|
box(w, h, w);
|
|
pop()
|
|
}
|
|
}
|
|
angle -= 0.1;
|
|
}
|
|
function mousePressed() {
|
|
if (w == 20) {
|
|
w = 25;
|
|
} else if (w == 25) {
|
|
w = 30;
|
|
} else {
|
|
w = 20;
|
|
}
|
|
redraw();
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
|
|
</style>
|
|
<p style="font-family: 'Black Han Sans', sans-serif;">Click me to change the number of boxes</p>
|
|
|
|
</html>
|