Created
February 10, 2024 16:21
-
-
Save ejfox/da826d138fa344240711a5a4fb673782 to your computer and use it in GitHub Desktop.
p5_canvassketch_circles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const canvasSketch = require("canvas-sketch"); | |
// Grab P5.js from npm | |
const p5 = require("p5"); | |
// Attach p5.js it to global scope | |
new p5(); | |
const settings = { | |
p5: true, | |
dimensions: "A4", | |
pixelsPerInch: 600, | |
attributes: { | |
antialias: true, | |
}, | |
}; | |
// Optionally preload before you load the sketch | |
window.preload = () => { | |
// Preload sounds/images/etc... | |
}; | |
canvasSketch(() => { | |
// Inside this is a bit like p5.js 'setup' function | |
// ... | |
// a random number between 300 and 700 | |
const k = random(300, 700); | |
// another random number between 1.9 and 2.1 | |
const j = random(1.9, 2.1); | |
const r = random(25, 55000); | |
const c1 = random(15, 1000); | |
const c2 = random(1, 250); | |
const g = random(1, 500); | |
const o1 = random(0.01, 1.1); | |
const o2 = random(0.01, 1.1); | |
const strokeWidth = random(0.5, 2); | |
// Attach events to window to receive them | |
window.mouseClicked = () => { | |
console.log("Mouse clicked"); | |
}; | |
// Return a renderer to 'draw' the p5.js content | |
return ({ width, height }) => { | |
// Draw with p5.js things | |
clear(); | |
// draw a big ol black rectangle | |
background(0); | |
// fill white | |
// fill(255); | |
// fill black | |
// fill(0); | |
noFill(); | |
for (let i = 0; i < c1; i++) { | |
const t = i / c1; | |
const x = width * t + k + g * noise(t * o1 * j); | |
const y = height * o1 + k + g * noise(t * o2 * j); | |
const radius = r * noise(t * j) + random(0, c2); | |
ellipse(x, y, radius); | |
// Set stroke color | |
// Set stroke weight | |
strokeWeight(strokeWidth); | |
stroke(255); | |
} | |
}; | |
}, settings); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment