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.
85 lines
2.2 KiB
85 lines
2.2 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 scaling = 2
|
|
let width = 432 * scaling
|
|
let height = 297 * scaling
|
|
let magnitude = Math.sqrt(width * width + height * height) / 7
|
|
let contrast = 20
|
|
let white = 255
|
|
const pad = width / 2
|
|
let start = {x: width/2, y: height/2}
|
|
let coords = []
|
|
let flowers = []
|
|
let flower = []
|
|
|
|
function setup() {
|
|
createCanvas(width, height, SVG);
|
|
background(white);
|
|
fill(150);
|
|
stroke(contrast);
|
|
coords = randomCoords()
|
|
}
|
|
|
|
function randomCoords(points = 60) {
|
|
return (new Array(points))
|
|
.fill(0)
|
|
.map(() => p5.Vector.random2D())
|
|
}
|
|
|
|
function mouseWheel(event) {
|
|
magnitude += event.delta
|
|
return false;
|
|
}
|
|
|
|
function mousePressed() {
|
|
flowers.push(flower)
|
|
}
|
|
|
|
function makeFlower(mouseX, mouseY) {
|
|
coords = randomCoords()
|
|
|
|
return coords.map(({ x, y }) => {
|
|
const anchor = {
|
|
x: constrain(mouseX, 0 + pad, width - pad),
|
|
y: constrain(mouseY, 0 + pad, width - pad)
|
|
}
|
|
return [
|
|
anchor.x,
|
|
anchor.y,
|
|
mouseX + x * magnitude,
|
|
mouseY + y * magnitude
|
|
]
|
|
})
|
|
}
|
|
|
|
function drawFlower(flower) {
|
|
flower.forEach(([x, y, a, b]) => line(x, y, a, b))
|
|
}
|
|
|
|
function draw() {
|
|
// var r = frameCount % 200 * Math.sqrt(2);
|
|
// ellipse(0, 0, r, r);
|
|
|
|
background(white - contrast);
|
|
flower = makeFlower(mouseX, mouseY)
|
|
drawFlower(flower)
|
|
|
|
flowers
|
|
.slice(0, flowers.length)
|
|
.forEach(flower => drawFlower(flower))
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: beige;
|
|
}
|
|
main { display: flex; justify-content: center; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body> |