<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 {
margin: 0;
position: relative;
min-height: 100vh;
}
canvas {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
object-fit: scale-down;
}
</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>const hash=options.hash,rnd=new Random(hash,4);function r_b($,_){return rnd.random_between($,_)}function r_i($,_){return rnd.random_int($,_)}const pltS={1:["#030303","#FFFFFF","#1A1C1D","#5D5D5D"],2:["#292107","#201803","#F5CC79","#6F5203","#43380C","#070707","#FFC246","#110601","#664A01","#25241F","#F08E19","#BB4F04"],3:["#0662C4","#021425","#FFC107","#015798","#1B2E41","#0A1621"],4:["#222222","#FFC107","#FF9800","#FF5722","#F44336","#251702"],5:["#aa0200","#FEFCFB","#3F0101","#988B88","#FA1605","#000000","#282727"],6:["#024AB0","#FCD8D9","#01193E","#C36929","#001118"],7:["#414269","#17181A","#D9C514","#C95402","#192334","#28292D","#C7CCE8","#28292D","#052464","#2E3957","#FFC107","#162E60"],8:["#29241D","#29241D","#D56B06","#1C4A68","#9D6438","#FFFAED","#1C1A17","#F4E9CA","#773D06","#055F99","#9D6438","#FFFAED"],9:["#191818","#F25C05","#F21905","#021911","#1B3D3C","#F29422","#F25C05","#F21905","#1B4133","#1B3D3C","#052D35","#FFDF73"],10:["#FF9800","#A5B605","#3D3D3D","#C09411","#E4E2CF","#4E2414","#6F4408","#3D2D2C","#7A1818","#090808","#7E7B0C","#389E00","#E5E4D4"],11:["#065264","#143238","#363636","#BB7538","#35291F","#123E47","#E1E3E4","#5C9EAC","#DFCA72","#85684E","#403125","#163A46"],12:["#191818","#F25C05","#F21905","#021911","#EFF5F5","#F29422","#F25C05","#F21905","#1B4133","#1B3D3C","#052D35","#000000"]};pL1=r_i(1,(pLT=pltS[pal=(palX=r_b(0,1))>.975?1:palX>.875?2:palX>.775?3:palX>.7?4:palX>.6?5:palX>.5?6:palX>.45?7:palX>.35?8:palX>.225?9:palX>.125?10:palX>.05?11:12]).length-1);const[cN,cN1,fS,lg]=[1080,.65,25,10];let[mA1,pS,mTex]=[r_b(10,50),r_i(1,5),r_i(0,4)];if(zM=(zMX=r_b(0,1))>.75?75:zMX>.5?100:zMX>.25?150:200,ori=(oriX=r_b(0,1))>.6?0:1,caSX=r_b(0,1),0==ori)switch(caS=caSX>.9?0:caSX>.8?1:caSX>.6?2:caSX>.45?3:caSX>.3?4:caSX>.2?5:caSX>.1?6:caSX>.05?7:8){case 0:A1=25,j1=2,ja=9;break;case 1:A1=25,j1=2,ja=13;break;case 2:A1=25,j1=1.5,ja=13;break;case 3:A1=25,j1=2,ja=25;break;case 4:A1=25,j1=2,ja=37;break;case 5:A1=25,j1=2,ja=43;break;case 6:A1=25,j1=3,ja=67;break;case 7:A1=25,j1=1,ja=21;break;case 8:A1=3,j1=1,ja=57}else switch(caS=caSX>.85?9:caSX>.65?10:caSX>.3?11:caSX>.15?12:caSX>.075?13:14){case 9:Ab1=25,j1=2,jCa=17;break;case 10:Ab1=25,j1=1.5,jCa=19;break;case 11:Ab1=25,j1=1.75,jCa=36;break;case 12:Ab1=25,j1=2,jCa=61;break;case 13:Ab1=25,j1=1,jCa=55;break;case 14:Ab1=3,j1=1,jCa=75}sat=(satX=r_b(0,1))>.75?0:satX>.25?1:2;
function setup(){colorMode(RGB,255),pixelDensity(2),createCanvas(cN,cN/cN1),m=createGraphics(cN,cN/cN1,WEBGL),m1=createGraphics(cN,cN/cN1),mShd=m.createShader(vs,vf),randomSeed(seed=1e9*r_b(0,1)),noiseSeed(seed),m.randomSeed(seed),m.noiseSeed(seed),m1.randomSeed(seed),m1.noiseSeed(seed),imageMode(CENTER),rectMode(CENTER),m.imageMode(CENTER),m.rectMode(CENTER),xx=width,yy=height}
function draw(){switch(background("#FAF7EF"),Fm(),push(),m.shader(mShd),mShd.setUniform("u_tex",m1),mShd.setUniform("zM",zM),mShd.setUniform("mag",.02),mShd.setUniform("mA1",mA1),mShd.setUniform("u_res",[xx,yy]),mShd.setUniform("u_seed",seed),m.rect(0,0,xx,yy),0==sat?drawingContext.filter="saturate(25%)":1==sat?drawingContext.filter="saturate(75%)":drawingContext.filter="saturate(100%)",translate(xx/2,yy/2),push(),scale(-1,-1),image(m,0,0,1.025*xx,1.025*yy),pop(),pop(),0==sat?drawingContext.filter="saturate(50%)":1==sat?drawingContext.filter="saturate(100%)":drawingContext.filter="saturate(125%)",1==pal||(drawingContext.shadowOffsetX=0,drawingContext.shadowOffsetY=0,drawingContext.shadowBlur=25,drawingContext.shadowColor="rgb(0,0,0)"),fill(150),noStroke(),1==pal?blendMode(DIFFERENCE):blendMode(BLEND),jb=fS,ori){case 0:for(let e=0;e<ja;e+=j1)1==pal?sR(e*(xx/(ja+1))+xx/jb/A1,-yy/2+xx/jb,xx/(ja+1)-xx/jb/A1,yy-xx/jb):(drawingContext.save(),sR(e*(xx/(ja+1))+xx/jb/A1,-yy/2+xx/jb,xx/(ja+1)-xx/jb/A1,yy-xx/jb),drawingContext.clip(),image(m,xx/2,yy/2,1.025*xx,1.025*yy),drawingContext.restore());break;case 1:for(let t=0;t<jCa;t+=j1)1==pal?sR(-xx/2+xx/jb,t*(yy/(jCa+1))+xx/jb/Ab1,xx-xx/jb,yy/(jCa+1)-xx/jb/Ab1):(drawingContext.save(),sR(-xx/2+xx/jb,t*(yy/(jCa+1))+xx/jb/Ab1,xx-xx/jb,yy/(jCa+1)-xx/jb/Ab1),drawingContext.clip(),image(m,xx/2,yy/2,1.025*xx,1.025*yy),drawingContext.restore())}1==pal&&(0==sat?drawingContext.filter="saturate(50%)":1==sat?drawingContext.filter="saturate(100%)":drawingContext.filter="saturate(125%)",push(),blendMode(OVERLAY),fill("#0188D8"),rect(xx/2,yy/2,xx,yy),pop()),noLoop(),12==pal&&filter(GRAY),onDone()}
function cALP($,_=1){var e=color($);return color("rgba("+[red(e),green(e),blue(e),_].join(",")+")")}function Fm(){let $=r_i(0,2);elem=0==$?350:1==$?500:1e3,q=[350,500,1e3];for(var _=1;_<q[$];_++){switch(shuffle(pLT,!0),m1.fill(cALP(pLT[pL1],.5)),sin(r_b(-1,1),r_b(1,-1)),mTex){case 0:m1.rect(r_b(0,xx),r_b(0,yy),xx/3,r_b(0,yy/r_b(20,10)));break;case 1:m1.rect(r_b(0,xx),r_b(0,yy),r_b(0,xx/r_b(1,5)),yy/25);break;case 2:m1.rect(r_b(0,xx),r_b(0,yy),r_b(0,xx/r_b(10,15)),yy/5);break;case 3:m1.rect(r_b(0,xx),r_b(0,yy),r_b(0,xx/r_b(50,10)),yy/3);break;case 4:m1.rect(r_b(0,xx),r_b(0,yy),xx/5,r_b(0,yy/r_b(7,5)))}m1.noFill(),m1.strokeWeight(1),m1.stroke(cALP(pLT[pL1],.75)),m1.rect(r_b(0,xx),r_b(0,yy),r_b(xx/r_b(50,100)),yy/r_b(2,200)),m1.stroke(cALP(pLT[pL1],.75)),m1.rect(r_b(0,xx),r_b(0,yy),r_b(0,2*xx)),m1.stroke(cALP(pLT[pL1],.5));for(let e=10;e<50;e+=1)m1.rect(r_b(0,xx),r_b(0,yy),r_b(0,xx/e)/(e*r_b(.75,1)))}}function sR($,_,e,r){let[t,c]=[$+e/2,_+r/2];beginShape(),vertex(t,c);for(let o=0,a,l;o<e;o+=pS)[a,l]=[t+o+map(noise(.1*o,.1*c),0,1,-lg,lg),c+map(noise(.1*t,.1*o),0,1,-lg,lg)],vertex(a,l);vertex(t+e,c);for(let s=0,f,n;s<r;s+=pS)[f,n]=[t+e+map(noise(.1*e,(c+s)*.1),0,1,-lg,lg),c+s+map(noise((t+e)*.1,.1*s),0,1,-lg,lg)],vertex(f,n);vertex(t+e,c+r);for(let i=0,k,b;i<e;i+=pS)[k,b]=[t+e-i+map(noise((e-i)*.1,(c+r)*.1),0,1,-lg,lg),c+r+map(noise((t+e)*.1,(r+i)*.1),0,1,-lg,lg)],vertex(k,b);vertex(t,c+r);for(let A=0,L,P;A<r;A+=pS)[L,P]=[t+map(noise(.1*$,(c+r-A)*.1),0,1,-lg,lg),c+r-A+map(noise(.1*A,(c+r)*.1),0,1,-lg,lg)],vertex(L,P);endShape(CLOSE)}
const vs="\n attribute vec3 aPosition;\n \n attribute vec2 aTexCoord;\n \n varying vec2 vTC;\n \n uniform float uSeed;\n \n uniform float zM;\n \n void main() {\n \n vTC = aTexCoord;\n \n vec4 positionVec4 = vec4(aPosition, 1.0);\n \n float randomValue = fract(sin(dot(positionVec4.xyz,vec3(10.0,80.0,35.0) * uSeed)) *100.0);\n \n float scaledValue = randomValue * 10.0 + zM;\n \n positionVec4.xy = positionVec4.xy * scaledValue - 10.0;\n \n gl_Position = positionVec4;} \n ";vf="\n precision highp float;\n uniform sampler2D u_tex; \n uniform float mag;\n uniform vec2 u_res; \n \n uniform float u_t; \n \n uniform float mA1; uniform float u_seed; \n \n varying vec2 vTC; \n \n float random (vec2 st) {return fract(cos(dot(st.xy,vec2(10.0,80.0)))*10000.0);} \n \n float noise (vec2 st) { \n \n vec2 i = floor(st); \n \n vec2 f = fract(st); \n \n vec2 u = f*f*(3.0-2.0*f); \n \n return mix( mix( random( i + vec2(0.0,0.0) ), random( i + vec2(1.0,0.0) ), u.x), mix( random( i + vec2(0.0,1.0) ), random( i + vec2(1.0,1.0) ), u.x), u.y);} \n \n float fbm( vec2 n ) { \n \n float total = 0.0, amp = 15.0; \n \n for (int i = 0; i < 8; i++) {total += noise(n) * amp; n += n; amp *= 0.5;} \n \n return total;} \n \n float sLex(vec2 st) { \n \n return fract(sin(dot(st, vec2(10.0, 80.0))) * 40000.0);} \n \n float s_noise(vec2 st) { \n \n vec2 i = floor(st); \n \n vec2 f = fract(st); \n \n vec2 u = f*f*(3.0-2.0*f); \n \n return mix(mix(sLex(i + vec2(0.0,0.0)), sLex(i + vec2(1.0,0.0)), u.x), mix(sLex(i + vec2(0.0,1.0)), sLex(i + vec2(1.0,1.0)), u.x), u.y);} \n \n void main() { \n \n vec2 st = vTC; \n \n st.x += fbm(vec2( st.x * mA1 , st.y * mA1) * 2.0 + u_t * 0.05) * mag; \n \n st.y += fbm(vec2(st.x*mA1,st.y*mA1)*1.0+u_t*0.097)*mag; \n \n vec4 color = texture2D(u_tex,st); \n \n gl_FragColor = color;} \n";
function getZONE(e){return 1==e?"Eclipse":2==e?"Desert Sunset":3==e?"Marine Horizon":4==e?"Volcanic Glow":5==e?"Crimson Shadow":6==e?"Deep Blue Sea":7==e?"Urban Night":8==e?"Coastal Dawn":9==e?"Tropical Fire":10==e?"Eclectic Dream":11==e?"Ocean Mystique":12==e?"Grayscale":void 0}function getOri(e){return 0==e?"Vertical":1==e?"Horizontal":void 0}function getZ(e){return 75==e?"+":100==e?"++":150==e?"+++":200==e?"++++":void 0}function getDen(e){return 0==e?"5":1==e?"7":2==e?"9":3==e?"13":4==e?"19":5==e?"22":6==e?"23":7==e?"21":8==e?"57":9==e?"9 -":10==e?"13 -":11==e?"21 -":12==e?"31":13==e?"55":14==e?"75":void 0}function getSat(e){return 0==e?"+":1==e?"++":2==e?"+++":void 0}setMetadata("Color_Zone",getZONE(pal)),setMetadata("Orientation",getOri(ori)),setMetadata("Amplitude",getZ(zM)),setMetadata("Density",getDen(caS)),setMetadata("Saturation",getSat(sat));</script></body>