59 lines
1.3 KiB
HTML
59 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.2/lib/p5.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.box {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: red;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box">Hello</div>
|
|
|
|
<script>
|
|
let boxDiv;
|
|
let boxX, boxY;
|
|
let angle = 0;
|
|
|
|
function setup() {
|
|
boxDiv = document.querySelector('.box');
|
|
let rect = boxDiv.getBoundingClientRect();
|
|
boxX = rect.left;
|
|
boxY = rect.top;
|
|
boxDiv.remove();
|
|
|
|
let canvas = createCanvas(windowWidth, windowHeight, WEBGL);
|
|
canvas.position(0, 0);
|
|
canvas.style('pointer-events', 'none');
|
|
background(0, 0, 0, 0);
|
|
}
|
|
|
|
function draw() {
|
|
clear();
|
|
|
|
angle += 0.02;
|
|
|
|
push();
|
|
fill(255, 0, 0);
|
|
box(200, 200, 50);
|
|
pop();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|