You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.4 KiB
57 lines
1.4 KiB
<head>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>
|
|
<script src="https://unpkg.com/p5.js-svg@1.5.1"></script>
|
|
|
|
<script>
|
|
let coords = []
|
|
let width = 500
|
|
let mag = width * 1.4
|
|
let contrast = 20
|
|
let white = 255
|
|
const pad = width / 2
|
|
|
|
function setup() {
|
|
createCanvas(width, width, SVG);
|
|
background(white);
|
|
fill(150);
|
|
stroke(contrast);
|
|
|
|
while (coords.length < 60) {
|
|
coords.push(p5.Vector.random2D())
|
|
}
|
|
}
|
|
|
|
function mouseWheel(event) {
|
|
mag += event.delta
|
|
return false;
|
|
}
|
|
|
|
function draw() {
|
|
// var r = frameCount % 200 * Math.sqrt(2);
|
|
|
|
background(white - contrast);
|
|
coords.forEach(({ x, y }) => {
|
|
const anchor = {
|
|
x: constrain(mouseX, 0 + pad, width - pad),
|
|
y: constrain(mouseY, 0 + pad, width - pad)
|
|
}
|
|
line(
|
|
anchor.x,
|
|
anchor.y,
|
|
mouseX + x * mag,
|
|
mouseY + y * mag
|
|
)
|
|
})
|
|
// ellipse(0, 0, r, r);
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: beige;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body> |