let canvassize;
let m
let i
let j
let m1
let t1
let t
let baseSquareSize
let canvas;
let canvasWidth, canvasHeight;
let currentPaletteIndex, colMode
let patternChoice;
let OceanBreeze = ["#005f73", "#0a9396", "#94d2bd", "#e9d8a6", "#ee9b00"];
let SunsetGlow = ["#ff9f1c", "#ffbf69", "#ffffff", "#cbf3f0", "#2ec4b6"];
let VintageCharm = ["#6d6875", "#b5838d", "#e5989b", "#ffb4a2", "#ffcbf2"];
let SoothingLavender = ["#b56576", "#e56b6f", "#eaac8b", "#c3aed6", "#d4a5a5"];
let CitrusBurst = ["#ffba08", "#faa307", "#f48c06", "#e85d04", "#dc2f02"];
let IcyElegance = ["#d8f3dc", "#b7e4c7", "#95d5b2", "#74c69d", "#52b788"];
let DesertSpice = ["#cc8b86", "#f5d0c5", "#e6b8a2", "#c2948a", "#c46d5e"];
let MintyFreshness = ["#b5e48c", "#99d98c", "#76c893", "#52b69a", "#34a0a4"];
let WarmAndCool = ["#FF6B6B", "#F7B801", "#FDE74C", "#C5E4E7", "#DBE2EF"];
let EarthyTones = ["#264653", "#2A9D8F", "#E9C46A", "#F4A261", "#E76F51"];
let MutedElegance = ["#355070", "#6D597A", "#B56576", "#E56B6F", "#EAAC8B"];
let FreshAndVibrant = ["#1A535C", "#4ECDC4", "#F7FFF7", "#FF6B6B", "#FFE66D"];
let PastelSunset = ["#FAE1DD", "#FAD2E1", "#C5DEDD", "#B8B3E9", "#A3C4BC"];
let OceanDreams = ["#D9F0FF", "#B6E2D3", "#9FD8D3", "#8ECAE6", "#219EBC"];
let SpringAwakening = ["#FFCAD4", "#B0D0D3", "#C08497", "#F7AF9D", "#F7E3AF"];
let GoldenSands = ["#F9DC5C", "#F4D35E", "#EE964B", "#F95738", "#C89B7B"];
let RoseGarden = ["#E2BCB7", "#A2A79E", "#B2C8DF", "#B98389", "#A6798C"];
let SereneSky = ["#B4CFE0", "#A9D6E5", "#89C2D9", "#61A5C2", "#468FAF"];
let TropicalParadise = ["#034748", "#008C83", "#00BFB2", "#5EFCE8", "#D2FCEF"];
let AutumnLeaves = ["#FFB703", "#FB8500", "#F9844A", "#F9C74F", "#E9D8A6"];
let palettes = {
PastelSunset,
OceanDreams,
SpringAwakening,
GoldenSands,
RoseGarden,
SereneSky,
TropicalParadise,
AutumnLeaves,
OceanBreeze,
SunsetGlow,
VintageCharm,
SoothingLavender,
CitrusBurst,
IcyElegance,
DesertSpice,
MintyFreshness,
WarmAndCool,
EarthyTones,
MutedElegance,
FreshAndVibrant
};
let currentPaletteName
let scriptElement = document.getElementById('gridtryScript');
let seed = scriptElement ? scriptElement.getAttribute('blk') : 'defaultSeedValue';
function setup() {
pixelDensity(2);
imageMode(CENTER);
rectMode(CENTER);
noLoop();
drawGrid();
}
function drawGrid() {
randomSeed(seed);
noiseSeed(seed);
canvassize = random(["square", "landscape", "portrait"]);
let bg = random(["#D9CCC1","#f2eddc","#D9D9D9"])
let paletteNames = Object.keys(palettes);
let consistentIndex = floor(random() * paletteNames.length);
currentPaletteName = paletteNames[consistentIndex];
currentPaletteIndex = palettes[currentPaletteName];
switch (canvassize) {
case "square":
canvasWidth = 830;
canvasHeight = 830;
break;
case "landscape":
canvasWidth = 830;
canvasHeight = 690;
break;
case "portrait":
canvasWidth = 690;
canvasHeight = 830;
break;
}
if (canvas) {
canvas.remove();
}
canvas = createCanvas(canvasWidth, canvasHeight);
background(bg);
colMode = random(["Columns", "Rows", "Flower", "CentralWave", "Diagonal", "DiagonalRL", "Noise"]);
v = createGraphics(canvasWidth - 40, canvasHeight - 40);
v.imageMode(CENTER);
v.background(bg);
v.noStroke();
noStroke();
let percent = 40 / 100;
graphics = createGraphics(width, height);
graphics.stroke(255, 10 / 100 * 255);
for (i = 0; i < graphics.width * graphics.height * percent; i++) {
graphics.point(random(graphics.width), random(graphics.height));
}
patternChoice = random(["Ripple", "Diamond", "Noise", "Normal"]);
if (patternChoice === "Ripple" && colMode === "CentralWave") {
let colModesExcludingCentralWave = ["Flower", "Diagonal", "DiagonalRL", "Columns", "Rows", "Noise"];
colMode = random(colModesExcludingCentralWave);
}
if (patternChoice === "Noise" && colMode === "CentralWave") {
let colModesExcludingCentralWave = ["Flower", "Diagonal", "DiagonalRL", "Columns", "Rows", "Noise"];
colMode = random(colModesExcludingCentralWave);
}
recty(patternChoice);
image(v, width / 2, height / 2);
image(graphics, width / 2, height / 2);
}
function recty(patternChoice) {
let cols, rows;
switch (canvassize) {
case "square":
cols = 23;
rows = 23;
break;
case "landscape":
cols = 23;
rows = 19;
break;
case "portrait":
cols = 19;
rows = 23;
break;
}
let baseSquareSize = 20;
let xOffset = (v.width - (cols * baseSquareSize)) / (cols + 1);
let yOffset = (v.height - (rows * baseSquareSize)) / (rows + 1);
let noiseScale = 0.1;
let rippleScale = random([1,3,5,10]);
let piselect = random([PI, HALF_PI, TWO_PI])
let rippleSpeed = piselect / random([2,3]);
let colorsForRows = [];
let colorsForColumns = [];
let wavecolor, flowercolor, noisecolor, diagonalColor, diagonalRLColor;
if (colMode === "Rows") {
for (let j = 0; j < rows; j++) {
let colorIndex = floor(random(currentPaletteIndex.length));
colorsForRows[j] = currentPaletteIndex[colorIndex];
}
} else if (colMode === "Columns") {
for (let i = 0; i < cols; i++) {
let colorIndex = floor(random(currentPaletteIndex.length));
colorsForColumns[i] = currentPaletteIndex[colorIndex];
}
}
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
let x = xOffset + i * (baseSquareSize + xOffset);
let y = yOffset + j * (baseSquareSize + yOffset);
let squareSize = baseSquareSize;
let diamondSize = Math.min(cols, rows) / 1.7;
let distance = (Math.abs(i - cols / 2) + Math.abs(j - rows / 2)) / diamondSize;
if (patternChoice === "Noise") {
let noiseValue = noise(i * noiseScale, j * noiseScale);
squareSize *= map(noiseValue, 0, 1, 0.3, 1.5);
} else if (patternChoice === "Ripple") {
let distanceFromCenter = dist(i, j, cols / 2, rows / 2);
squareSize *= (1 + 0.5 * sin(distanceFromCenter * rippleScale + seed * rippleSpeed));
} else if (patternChoice === "Diamond") {
let distance = (Math.abs(i - cols / 2) + Math.abs(j - rows / 2)) / diamondSize;
if (distance <= 1) {
squareSize *= (1 - distance);
}
}
if (colMode === "CentralWave") {
let centerX = cols / 2;
let centerY = rows / 2;
let maxDistance = dist(0, 0, centerX, centerY);
let colorIndex1 = Math.floor(random(currentPaletteIndex.length));
let colorIndex2 = colorIndex1;
while (colorIndex2 === colorIndex1) {
colorIndex2 = Math.floor(random(currentPaletteIndex.length));
}
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
let x = xOffset + i * (baseSquareSize + xOffset);
let y = yOffset + j * (baseSquareSize + yOffset);
let distance = dist(i, j, centerX, centerY);
let frequency = 2 * Math.PI / maxDistance;
let waveValue = (Math.sin(distance * frequency) + 1) / 2;
let color1 = color(currentPaletteIndex[colorIndex1]);
let color2 = color(currentPaletteIndex[colorIndex2]);
wavecolor = lerpColor(color1, color2, waveValue);
v.fill(wavecolor);
v.rect(x, y, baseSquareSize, baseSquareSize);
}
}
} else if (colMode === "Flower") {
let angle = atan2(j - rows / 2, i - cols / 2) + PI;
let distance = dist(i, j, cols / 2, rows / 2);
let colorIndex = (angle / (2 * PI)) * currentPaletteIndex.length;
let gradientIndex = (distance / max(cols / 2, rows / 2)) * currentPaletteIndex.length;
colorIndex = floor(colorIndex) % currentPaletteIndex.length;
gradientIndex = floor(gradientIndex) % currentPaletteIndex.length;
if (currentPaletteIndex[colorIndex] && currentPaletteIndex[gradientIndex]) {
flowercolor = lerpColor(color(currentPaletteIndex[colorIndex]), color(currentPaletteIndex[gradientIndex]), 0.5);
} else {
flowercolor = color('#000000');
}
} else if (colMode === "Diagonal") {
let diagonalIndex = (i + j) % currentPaletteIndex.length;
diagonalColor = currentPaletteIndex[diagonalIndex];
} else if (colMode === "DiagonalRL") {
let diagonalIndex = (cols - i + j - 1) % currentPaletteIndex.length;
diagobalRLcolor = currentPaletteIndex[diagonalIndex];
} else if (colMode === "Noise") {
noiseVal = noise(x * 0.01, y * 0.01);
colorIndex = Math.floor(noiseVal * currentPaletteIndex.length);
noisecolor = currentPaletteIndex[colorIndex];
}
let fillColor;
switch (colMode) {
case "Rows":
fillColor = colorsForRows[j]
break;
case "Columns":
fillColor = colorsForColumns[i]
break;
case "CentralWave":
fillColor = wavecolor
break;
case "Flower":
fillColor = flowercolor
break;
case "Diagonal":
fillColor = diagonalColor
break;
case "DiagonalRL":
fillColor = diagobalRLcolor
break;
case "Noise":
fillColor = noisecolor
break;
}
v.fill(50);
v.rect(x + 5, y + 5, squareSize, squareSize);
v.fill(fillColor);
v.rect(x, y, squareSize, squareSize);
}
}
}