77 lines
1.9 KiB
HTML
77 lines
1.9 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 angle = 0;
|
|
let targetAngle = 0;
|
|
|
|
function setup() {
|
|
boxDiv = document.querySelector('.box');
|
|
let canvas = createCanvas(windowWidth, windowHeight, WEBGL);
|
|
canvas.position(0, 0);
|
|
canvas.style('pointer-events', 'none');
|
|
background(0, 0, 0, 0);
|
|
|
|
boxDiv.addEventListener('mouseenter', () => {
|
|
targetAngle = 0;
|
|
});
|
|
|
|
boxDiv.addEventListener('mouseleave', () => {
|
|
targetAngle = -PI/2;
|
|
});
|
|
}
|
|
|
|
function draw() {
|
|
clear();
|
|
|
|
angle += (targetAngle - angle) * 0.1;
|
|
|
|
let rect = boxDiv.getBoundingClientRect();
|
|
let boxX = rect.left;
|
|
let boxY = rect.top;
|
|
|
|
let webglX = boxX - width/2;
|
|
let webglY = boxY - height/2 + 100;
|
|
|
|
push();
|
|
translate(webglX, webglY, 0);
|
|
translate(0, 0, 0);
|
|
rotateY(PI/2 - angle);
|
|
translate(-100, 0, 0);
|
|
fill(255, 0, 0);
|
|
box(200, 200, 50);
|
|
pop();
|
|
}
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, windowHeight);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|