Skip to content

Instantly share code, notes, and snippets.

@M0nica

M0nica/grid-example-colorful-abstract-confetti-pattern-bold-knobs-randomgauassian-random.markdown

Created September 10, 2024 03:44
Show Gist options
  • Save M0nica/df2b8e3a9baa9f303932a04b415e471b to your computer and use it in GitHub Desktop.
Save M0nica/df2b8e3a9baa9f303932a04b415e471b to your computer and use it in GitHub Desktop.
Download ZIP
Grid Example - Colorful Abstract - Confetti Pattern - Bold - Knobs - randomGauassian =- random
Raw
grid-example-colorful-abstract-confetti-pattern-bold-knobs-randomgauassian-random.markdown

Grid Example - Colorful Abstract - Confetti Pattern - Bold - Knobs - randomGauassian =- random

A Pen by Monica.dev on CodePen.

License.

Raw
script.js
let xSize;
let ySize;
let noiseX = 0.1;
let noisePos = 0.1;
const standardDeviation = 25;
const margin = 20;
let baseR;
let baseG;
let baseB;
function setup() {
createCanvas(windowWidth, windowHeight);
strokeCap(ROUND);
xSize = windowWidth;
ySize = windowHeight;
baseR = random(0 + standardDeviation, 255 - standardDeviation);
baseG = random(0 + standardDeviation, 255 - standardDeviation);
baseB = random(0 + standardDeviation, 255 - standardDeviation);
}
// const colors = [
// "#ffadad",
// "#ffd6a5",
// "#fdffb6",
// "#caffbf",
// "#9bf6ff",
// "#a0c4ff",
// "#bdb2ff",
// "#ffc6ff"
// ];
function getColors() {
// x, y, w,h
let colors = [];
// background(color(baseR, baseG, baseB, .4))
for (let x = 0; x < 10; x++) {
const R = randomGaussian(baseR, standardDeviation);
const G = randomGaussian(baseG, standardDeviation);
const B = randomGaussian(baseB, standardDeviation);
const currentColor = color(R, G, B);
baseR = map(R, 0, 255, standardDeviation, 255 - standardDeviation);
baseG = map(G, 0, 255, standardDeviation, 255 - standardDeviation);
baseB = map(B, 0, 255, standardDeviation, 255 - standardDeviation);
colors.push(currentColor);
}
return colors;
}
function draw() {
clear();
noLoop();
background(250, 250, 250);
//background("#2b2135");
const colors = getColors();
let xMargin = xSize * 0.01;
let yMargin = ySize * 0.01;
let scale = 0.0009 * windowWidth;
let row = 0;
for (let x = xMargin * 2; x < xSize - xMargin; x += 70) {
row++;
for (let y = yMargin * 2; y < ySize - xMargin; y += 70) {
let opacity = map(y, 0, ySize - xMargin, 0.1, 0.6);
strokeWeight(map(y, 0, xSize - xMargin, 4 * scale, 9 * scale));
const xOffset = map(noise(noisePos + x + y), 0, 1, -35, 35);
let yOffset = map(noise(noiseX), 0, 1, 10, 20);
const rand = random(10);
const currentColor = random(colors);
fill(currentColor);
stroke(currentColor);
const shape = random(["circle", "line", "arc"]);
if (shape == "circle") {
if (rand > 5) {
circle(x, y, 15);
} else {
circle(x + xOffset, y + yOffset, 15);
}
} else if (shape === "line") {
if (rand > 5) {
line(x, y, x + xOffset, y + yOffset);
} else {
line(x + xOffset, y + yOffset, x, y);
}
} else if (shape === "arc") {
push();
noFill();
if (rand > 5) {
arc(x, y - 10, 50, 50, 0, HALF_PI);
} else {
arc(x - 10, y, 50, 50, 0, HALF_PI);
}
pop();
}
noisePos += 0.00001;
}
noiseX += 0.001;
}
}
function mousePressed() {
//redraw on mouse press or touch
redraw();
}
function keyPressed() {
const SPACEBAR = " ";
// redraw on spacebar press
if (key == SPACEBAR) {
redraw();
}
if (key === "g") {
saveGif("canvas", 5);
}
if (key === "s") {
saveCanvas("canvas");
}
}
function windowResized() {
xSize = windowWidth;
ySize = windowHeight;
resizeCanvas(windowWidth, windowHeight);
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
Raw
style.css
canvas {
/* center canvas in middle of page */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50%;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment