0x5241c217…155asent to0x71aa097b…d4ca·#17,098,827·0x667b7cf0…2b6366
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script id="genart-tweaks">const tweaks = {"tweak_range":1,"tweak_range_2":1,"bool":true,"tweak_select":"sin","hex_color":"#ff005b","rgba_color":{"r":248,"g":214,"b":40,"a":1}};</script></head>
<body>
<style>html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
place-items: center;
background: #111;
}
canvas {
display: block;
}</style><script>window.METADATA = {};
function onMetadata() {
window.top?.postMessage(`genart:metadata:${JSON.stringify(window.METADATA)}`, "*");
}
function onDone(index = 0) {
window["RENDERED_INDEX"] = index;
window.top?.postMessage(`genart:done:${index}`, "*");
window.onImageRendered && window.onImageRendered(index);
}
function random_hash() {
let chars = "0123456789abcdef";
let result = "0x";
for (let i = 64; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
return result;
}
function setMetadata(prop, value) {
window.METADATA[prop] = value;
}
function getMetadata(prop) {
return window.METADATA[prop];
}
class Random {
seed;
decimals;
constructor(hash, decimals = 3) {
this.seed = parseInt(hash.slice(0, 16), 16);
this.decimals = decimals;
}
random_dec() {
this.seed ^= this.seed << 13;
this.seed ^= this.seed >> 17;
this.seed ^= this.seed << 5;
return ((this.seed < 0 ? ~this.seed + 1 : this.seed) % 10 ** this.decimals) / 10 ** this.decimals;
}
random_between(a, b) {
return a + (b - a) * this.random_dec();
}
random_int(a, b) {
return Math.floor(this.random_between(a, b + 1));
}
random_choice(x) {
return x[Math.floor(this.random_between(0, x.length * 0.99))];
}
}
function createKeyListeners(ls) {
const l = {};
const add = (ks, f) => (l[ks.join("_")] = f);
const c = (n) => l[n] && l[n]();
const d = document.body;
let ks = [];
d.addEventListener("keydown", (e) => {
ks.push(e.key);
if (ks.length == 2) c(ks.join("_"));
});
d.addEventListener("keyup", () => {
if (ks.length == 1) c(ks.join("_"));
ks = [];
});
ls.forEach((l) => add(l.keys, l.fn));
}
</script><script id="genart-options">const options = { hash: random_hash() }</script><script>let x,
y,
pixel_size,
pixels_count,
tile,
tile_size,
colors,
color_palette,
primary_color;
let func;
const rnd = new Random(options.hash);
function preload() {
tile_size = min(windowWidth, windowHeight);
tile_size = tile_size - (tile_size % 100);
loadJSON(
"https://raw.githubusercontent.com/Jam3/nice-color-palettes/master/1000.json",
(o) => (colors = Object.values(o))
);
}
function setup() {
createCanvas(tile_size, tile_size);
frameCount = -1;
x = y = 0;
pixel_size = tile_size * 0.025;
pixels_count = tile_size / pixel_size;
pickColorPalette();
primary_color = color_palette[0];
tile = createGraphics(tile_size, tile_size);
tile.background(primary_color);
setMetadata("background", primary_color);
const itr = pixels_count * min(1, int(rnd.random_int(1, 8)) / 2);
setMetadata("iterations", itr);
for (let $x = 0; $x <= itr; $x++) {
for (let $y = 0; $y <= itr; $y++) {
draw4Pixels($x, $y, tile.rect);
}
}
noLoop();
}
function draw() {
image(tile, 0, 0, tile_size, tile_size);
noFill();
stroke(primary_color);
strokeWeight(pixel_size * 2);
rect(
pixel_size / 2,
pixel_size / 2,
tile_size - pixel_size,
tile_size - pixel_size
);
onDone();
}
function pickColorPalette() {
let full_color_palette = deterministicShuffle(rnd.random_choice(colors));
color_palette = full_color_palette.slice(
0,
int(rnd.random_int(2, full_color_palette.length))
);
color_palette = deterministicShuffle([...color_palette, "#000"]);
}
function draw4Pixels($x, $y, func) {
tile.stroke((curr_color = rnd.random_choice(color_palette)));
tile.fill((curr_color = rnd.random_choice(color_palette)));
tile.strokeWeight(pixel_size * rnd.random_between(0, 1));
func($x * pixel_size, $y * pixel_size, pixel_size);
func((pixels_count - $x - 1) * pixel_size, $y * pixel_size, pixel_size);
func($x * pixel_size, (pixels_count - $y - 1) * pixel_size, pixel_size);
func(
(pixels_count - $x - 1) * pixel_size,
(pixels_count - $y - 1) * pixel_size,
pixel_size
);
}
function deterministicShuffle(array) {
let currentIndex = array.length,
randomIndex;
while (currentIndex != 0) {
randomIndex = rnd.random_int(0, array.length - 1);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [
array[randomIndex],
array[currentIndex],
];
}
return array;
}
function downloadBanner() {
const banner = createGraphics(tile_size * 3, tile_size);
banner.image(tile, 0, 0, tile_size, tile_size);
banner.image(tile, tile_size, 0, tile_size, tile_size);
banner.image(tile, tile_size * 2, 0, tile_size, tile_size);
banner.noFill();
banner.stroke(primary_color);
banner.strokeWeight(pixel_size * 2);
banner.rect(
pixel_size / 2,
pixel_size / 2,
tile_size * 3 - pixel_size,
tile_size - pixel_size
);
saveCanvas(banner, "banner", "png");
}
createKeyListeners([
{
description: "Download Banner",
keys: ["a"],
fn: downloadBanner,
},
]);</script></body>