<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Generative Art - Voronoi Diagram</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>Voroni Diagrams</h1>
<canvas id="canvas" width="800" height="600"></canvas>
<br />
<input
id="seedInput"
type="text"
placeholder="Enter block"
style="font-size: 16px; padding: 5px; width: 200px;"
/>
<br />
<div>
<button id="generateButton" style="font-size: 16px; padding: 5px 10px;">Generate</button>
<button id="downloadButton" style="font-size: 16px; padding: 5px 10px;">Download Image</button>
</div>
<script>
!function(f,a,c){var s,l=256,p="random",d=c.pow(l,6),g=c.pow(2,52),y=2*g,h=l-1;function n(n,t,r){function e(){for(var n=u.g(6),t=d,r=0;n<g;)n=(n+r)*l,t*=l,r=u.g(1);for(;y<=n;)n/=2,t/=2,r>>>=1;return(n+r)/t}var o=[],i=j(function n(t,r){var e,o=[],i=typeof t;if(r&&"object"==i)for(e in t)try{o.push(n(t[e],r-1))}catch(n){}return o.length?o:"string"==i?t:t+"\0"}((t=1==t?{entropy:!0}:t||{}).entropy?[n,S(a)]:null==n?function(){try{var n;return s&&(n=s.randomBytes)?n=n(l):(n=new Uint8Array(l),(f.crypto||f.msCrypto).getRandomValues(n)),S(n)}catch(n){var t=f.navigator,r=t&&t.plugins;return[+new Date,f,r,f.screen,S(a)]}}():n,3),o),u=new m(o);return e.int32=function(){return 0|u.g(4)},e.quick=function(){return u.g(4)/4294967296},e.double=e,j(S(u.S),a),(t.pass||r||function(n,t,r,e){return e&&(e.S&&v(e,u),n.state=function(){return v(u,{})}),r?(c[p]=n,t):n})(e,i,"global"in t?t.global:this==c,t.state)}function m(n){var t,r=n.length,u=this,e=0,o=u.i=u.j=0,i=u.S=[];for(r||(n=[r++]);e<l;)i[e]=e++;for(e=0;e<l;e++)i[e]=i[o=h&o+n[e%r]+(t=i[e])],i[o]=t;(u.g=function(n){for(var t,r=0,e=u.i,o=u.j,i=u.S;n--;)t=i[e=h&e+1],r=r*l+i[h&(i[e]=i[o=h&o+t])+(i[o]=t)];return u.i=e,u.j=o,r})(l)}function v(n,t){return t.i=n.i,t.j=n.j,t.S=n.S.slice(),t}function j(n,t){for(var r,e=n+"",o=0;o<e.length;)t[h&o]=h&(r^=19*t[h&o])+e.charCodeAt(o++);return S(t)}function S(n){return String.fromCharCode.apply(0,n)}if(j(c.random(),a),"object"==typeof module&&module.exports){module.exports=n;try{s=require("crypto")}catch(n){}}else"function"==typeof define&&define.amd?define(function(){return n}):c["seed"+p]=n}("undefined"!=typeof self?self:this,[],Math);
</script>
<script id="preview" mint="MINT_INSCRIPTION_ID">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const seedInput = document.getElementById('seedInput');
const generateButton = document.getElementById('generateButton');
const downloadButton = document.getElementById('downloadButton');
const appData = {
seed: 0
}
const colorSchemes = [
{ name: 'Warm Shades', colors: ['#d9ed92', '#b5e48c', '#99d98c', '#76c893'] },
{ name: 'Pastel Dreams', colors: ['#f7f5dd', '#d5ecc2', '#7fcd91', '#5ca4a9'] },
{ name: 'Autumn Vibes', colors: ['#ee6055', '#60d394', '#aaf683', '#ffd97d'] },
{ name: 'Ocean Breeze', colors: ['#1b262c', '#0f4c75', '#3282b8', '#bbe1fa'] },
{ name: 'Berry Blend', colors: ['#d8e2dc', '#ffe5d9', '#ffcad4', '#f4acb7'] },
{ name: 'Sunset Hues', colors: ['#ff8b94', '#ffaaa6', '#ffd3b5', '#dcedc1'] },
{ name: 'Earthy Tones', colors: ['#7d8491', '#9e768f', '#9fa4c4', '#b3cdd1'] },
{ name: 'Lavender Fields', colors: ['#e2d1c3', '#bbc7c4', '#a3b18a', '#588157'] },
{ name: 'Retro Flair', colors: ['#fd5e53', '#f9fcfb', '#32e0c4', '#2a2d34'] },
{ name: 'Citrus Punch', colors: ['#ffbe0b', '#fb5607', '#ff006e', '#8338ec'] },
{ name: 'Tropical Paradise', colors: ['#0e9aa7', '#3da4ab', '#f6cd61', '#fe8a71'] },
{ name: 'Mint Chocolate', colors: ['#4a4e4d', '#0e9aa7', '#3da4ab', '#f6cd61'] },
{ name: 'Vintage Charm', colors: ['#cb997e', '#eddcd2', '#fff1e6', '#f0efeb'] },
{ name: 'Rustic Charm', colors: ['#e76f51', '#f4a261', '#e9c46a', '#2a9d8f'] },
{ name: 'Serene Sky', colors: ['#e0ece4', '#e9f5db', '#fefee3', '#fcf5c7'] },
{ name: 'Golden Hour', colors: ['#f8edeb', '#fcd5ce', '#fec89a', '#f9dcc4'] },
{ name: 'Peacock Feathers', colors: ['#003049', '#d62828', '#f77f00', '#fcbf49'] },
{ name: 'Cozy Cabin', colors: ['#606c38', '#283618', '#fefae0', '#dda15e'] },
{ name: 'Vivid Violet', colors: ['#7400b8', '#6930c3', '#5e60ce', '#4ea8de'] },
{ name: 'Desert Oasis', colors: ['#1a535c', '#4ecdc4', '#f7fff7', '#ff6b6b'] },
{ name: 'Coastal Getaway', colors: ['#e0f8f7', '#c9fdd7', '#79d1c3', '#6892d5'] },
{ name: 'Sunset Shore', colors: ['#ffe3e3', '#ffc2c2', '#ffa1a1', '#ff8080'] },
{ name: 'Enchanted Forest', colors: ['#191A19', '#1E5128', '#4E9F3D', '#D8E9A8'] },
{ name: 'Midnight Bloom', colors: ['#0B0C10', '#1F2833', '#C5C6C7', '#66FCF1'] },
{ name: 'Vintage Violet', colors: ['#7B1E7A', '#B33F62', '#F9564F', '#F3C677'] },
{ name: 'Rustic Sunset', colors: ['#9C6615', '#D79922', '#F8B500', '#EDD59E'] },
{ name: 'Serene Sage', colors: ['#ECFFFB', '#B4F1F1', '#7FDFD4', '#5B9279'] },
{ name: 'Terracotta Dreams', colors: ['#EF6F6C', '#F9A46F', '#FAD6A5', '#E9ECE5'] },
{ name: 'Aqua Splash', colors: ['#00B8A9', '#F8F3D4', '#F6416C', '#FFDE7D'] },
{ name: 'Sunkissed Coral', colors: ['#FFD7BA', '#FFC6A5', '#E26D5C', '#C9CBA3'] },
{ name: 'Botanical Bliss', colors: ['#DAD7CD', '#A3B18A', '#588157', '#3A5A40'] },
{ name: 'Electric Plum', colors: ['#6F1E51', '#B53471', '#EE5A24', '#F79F1F'] },
{ name: 'Arctic Frost', colors: ['#E3F6F5', '#BAE8E8', '#8AAAE5', '#354458'] },
{ name: 'Golden Harvest', colors: ['#FFE000', '#799F0C', '#00416A', '#FFE000'] },
{ name: 'Rose Quartz', colors: ['#F5E5E5', '#FFC0CB', '#FF69B4', '#C71585'] },
{ name: 'Emerald Envy', colors: ['#50C878', '#8FBC8F', '#C1FFC1', '#E0FFFF'] },
{ name: 'Nautical Vibes', colors: ['#2C3E50', '#34495E', '#E74C3C', '#ECF0F1'] },
{ name: 'Lilac Luster', colors: ['#E0B0FF', '#C38EC7', '#957DAD', '#6C5B7B'] },
{ name: 'Sunshine Melody', colors: ['#FFDB58', '#FFB200', '#FF8C00', '#FF5733'] },
{ name: 'Minty Fresh', colors: ['#E6EBE0', '#9ED9CC', '#008C76', '#005249'] },
{ name: 'Cosmic Fusion', colors: ['#FF00FF', '#8A2BE2', '#0000FF', '#00008B'] },
{ name: 'Roasted Almond', colors: ['#EDC9AF', '#DCBCAC', '#C4A484', '#A68B6A'] },
{ name: 'Teal Zeal', colors: ['#008080', '#40E0D0', '#48D1CC', '#00CED1'] },
{ name: 'Blush Blossom', colors: ['#FFAFAF', '#FCE4EC', '#F3E5F5', '#E1BEE7'] },
{ name: 'Ochre Opulence', colors: ['#CC7722', '#EEAA00', '#FFCC33', '#FFDDAA'] },
{ name: 'Mermaid Lagoon', colors: ['#120078', '#9F2B68', '#F3E3C3', '#FCFAF1'] },
{ name: 'Verdant Oasis', colors: ['#8ACDEA', '#6C9A8B', '#E8DDB5', '#E4BE9E'] },
{ name: 'Crimson Charm', colors: ['#990000', '#FF0000', '#FF6666', '#FFCCCC'] },
{ name: 'Denim Divine', colors: ['#1560BD', '#0072B5', '#4F86C6', '#91B2C7'] }
];
function generateVoronoiDiagram(points, width, height) {
const diagram = [];
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let minDist = Infinity;
let closestPoint = null;
for (const point of points) {
const dist = Math.hypot(x - point.x, y - point.y);
if (dist < minDist) {
minDist = dist;
closestPoint = point;
}
}
diagram.push(closestPoint);
}
}
return diagram;
}
function generateArt() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Set the seed for pseudo-random number generation
Math.seedrandom(appData.seed);
// Choose a random color scheme
const colorScheme = colorSchemes[Math.floor(Math.random() * colorSchemes.length)];
// Generate background color
ctx.fillStyle = colorScheme.colors[0];
ctx.fillRect(0, 0, canvas.width, canvas.height);
const numPoints = 100;
const points = [];
for (let i = 0; i < numPoints; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const color = colorScheme.colors[Math.floor(Math.random() * (colorScheme.colors.length - 1)) + 1];
points.push({ x, y, color });
}
const diagram = generateVoronoiDiagram(points, canvas.width, canvas.height);
for (let i = 0; i < diagram.length; i++) {
const point = diagram[i];
ctx.fillStyle = point.color;
ctx.fillRect(i % canvas.width, Math.floor(i / canvas.width), 1, 1);
}
}
function setup() {
const urlParams = new URLSearchParams(window.location.search);
let id = urlParams.get("id");
let override_id = document
.getElementById("preview")
.getAttribute("mint");
if (!override_id.includes("MINT_INSCRIPTION_ID")) {
id = override_id;
}
if (id) {
// Fetch inscription id's content's and set seed to blk
fetch("/content/" + id)
.then((response) => response.json())
.then((data) => {
appData.seed = Number(data.blk);
generateArt();
});
} else {
generateArt();
}
}
function handleGenerateClick() {
const seedValue = seedInput.value.trim();
if (seedValue !== '') {
appData.seed = seedValue;
} else {
appData.seed = Math.floor(Math.random() * 1000000);
}
generateArt();
}
function handleDownloadClick() {
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = `generative-art-${appData.seed}.png`;
link.click();
}
generateButton.addEventListener('click', handleGenerateClick);
downloadButton.addEventListener('click', handleDownloadClick);
setup()
</script>
</body>
</html>