-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
45 lines (45 loc) · 13.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script
src="https://greggman.github.io/webgl-lint/webgl-lint.js"
data-gman-debug-helper='
{
"throwOnError": false
}
'>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.min.js"></script>
<script>
let tokenData = {"tokenId":"25","hash":"0xba2a84aab9fa26c455be67f6539cf36f3a57eb9dd0c5405f5a61aecb8380847a"}
</script>
<script>
hash=tokenData.hash;const colors0=[["#e1d6b9","#0E0E0E","#b4c10b","#cdc4ad"]],colors1=[["#343434","#0E0E0E","#1c1c1c","#e1d6b9"]],colors2=[["#0E0E0E","#ede7e0","#6e0101","#0c0c0b"]],colors3=[["#1d1d1d","#cec4b9","#810202","#0c0c0b","#0c0056"]],colors4=[["#353434","#0b0b0b","#e1d6b9","#444343","#01033d","#b56606"]],colors5=[["#1a1919","#0b0b0b","#ebe4d1","#3d3c3a","#01044e","#0c0c18","#bb6802"]],colors6=[["#040404","#0e0e0e","#323130","#161616","#0E0E0E","#c6c4bc","#84837b","#821001"]],colors7=[["#3e3556","#0E0E0E","#041037","#078581","#AB9604","#0E0E0E","#00326f"]],colors8=[["#1d1d1e","#000000","#041037","#2b8282","#973d01","#0E0E0E","#023d84"]],colors9=[["#020047","#0E0E0E","#a76a00","#a71f00","#0E0E0E","#2a1546","#943c01"]],colors10=[["#2c2c2c","#7b4807","#a76a00","#de9b1f","#101110","#aa5d00","#600202","#bd7a27"]],colors11=[["#000000","#700000","#0e086c","#08009a","#520120","#9a9797"]],colors12=[["#262523","#7a1101","#000000","#bc5e00","#0E0E0E","#1a515a","#c3b6ab"]],colors13=[["#20201f","#006455","#8d0909","#0f0f0f","#863101","#080808","#3D2E27","#36241F"]],colors14=[["#1b1246","#477475","#c1b509","#2f6f68","#285a54","#00060A","#8a2a01","#1B2428"]],colors15=[["#0f0c21","#3A4C54","#131A1D","#739793","#517671","#00060A","#9b3002","#0f1314"]],colors16=[["#0b0026","#0E0E0E","#9B0A48","#CF0E1E","#451753","#A90505","#2518af","#0E0E0E","#451753","#A90505"]],colors17=[["#08001e","#0E0E0E","#8b0941","#a70c19","#2f0c3a","#0E0E0E","#451753","#A90505"]],colors18=[["#151515","#151414","#2f2d29","#d46f0a","#741570"]],colors19=[["#191918","#feb101","#0E0E0E","#19007b","#ce8020","#a00e01","#0E0E0E"]],colors20=[["#191918","#ca8f21","#bd6404","#0E0E0E","#9f9722","#0E0E0E"]],colors21=[["#b1cbaa","#76a184","#002c93","#c2d0b2","#d43223","#adc5a2","#0E0E0E","#b0c7a9","#b1c9a5"]],colors22=[["#272626","#b5a78c","#980000","#080100","#090100"]],colors23=[["#a4aaab","#000204","#c08f1e","#c54f0a","#919694","#a4aaab","#d0c2bf","#b2b2b2"]],colors24=[["#1e1e1d","#080808","#9e9082","#7c0606","#100f0f","#b7ada1","#1f1f1f","#2f2e2d","#1e095e","#b6aca0"]],colors25=[["#1e1e1d","#1a1a1a","#afa59a","#202020","#79700c","#bbac08","#b7ada1","#31302f","#0a0a0a","#dfd9d1"]],colors26=[["#0d0d0d","#5b8179","#3b675e","#050067","#a24c0a","#650e00","#610d00","#2f2f2f"]],colors27=[["#101010","#000000","#020a74","#13365a","#bdb4a4","#790e0e","#195376","#de690a","#0d263c"]],colors28=[["#0f0f10","#000000","#010857","#425262","#070f1a","#b6b3ae"]],colors29=[["#0a003c","#ae6460","#1e1d1d","#992f08","#131313","#D99E88","#B95959","#857B92","#D0A795"]],colors30=[["#0f063b","#9e514d","#1e1d1d","#992f08","#131313","#131313","#D99E88","#B95959","#842e04","#b60404"]],colors31=[["#000000","#C3AC06","#0C0C0C","#711100","#480b02","#1B1C1B","#e3dbc8","#a88009","#c59104"]],colors32=[["#151515","#090809","#bdb8b4","#4a0e3c","#70205e","#ba7f07","#7d8c85"]],colors33=[["#090808","#080808","#2d083f","#983303","#31664b","#291f2c"]],colors34=[["#030302","#254008","#610000","#bbb29d","#477d09","#2f5107","#6b0303","#141814"]],colors35=[["#030302","#9c3414","#610000","#a98d6d","#742c0b","#510716","#6b0303","#1d1919"]],var01={varID:"Mood 01",lines:{minDist:80,maxDist:120,minThick:.7,visiblePercent:1,limitPerDot:6,maxThick:2},nFactor:250,palettes:[colors0,colors2,colors4,colors7,colors9,colors11,colors13,colors14,colors16,colors19,colors22,colors26,colors27,colors29],functions:[{name:"expImpulse",args:["n1","n2",10],nDenom:.5,nRatio:10},{name:"gain",args:["n1","n2",10],nDenom:2,nRatio:10},{name:"gain",args:["n1","n2",42],nDenom:5,nRatio:.1}]},var02={varID:"Mood 02",lines:{minDist:20,maxDist:120,minThick:.7,visiblePercent:1,limitPerDot:6,maxThick:2.2},nFactor:980,palettes:[colors1,colors3,colors5,colors6,colors8,colors9,colors12,colors15,colors17,colors23,colors28,colors30,colors32,colors33,colors34,colors35],functions:[{name:"parabola",args:["n1","n2",20],nDenom:1.1,nRatio:1},{name:"gain",args:["n1","n2",32],nDenom:2,nRatio:10},{name:"rounded",args:["n1","n2",10,"n2",10],nDenom:.5,nRatio:30},{name:"addNoise",args:["n1","n2"],nDenom:.5,nRatio:1},{name:"falloff",args:["n1",1,"1",1.2],nDenom:5,nRatio:1},{name:"expImpulse",args:["n1","n2",10],nDenom:.5,nRatio:10}]},var03={varID:"Mood 03",lines:{minDist:50,maxDist:120,minThick:.3,visiblePercent:1,limitPerDot:6,maxThick:2.3},nFactor:500,palettes:[colors5,colors8,colors10,colors12,colors13,colors35,colors15,colors17,colors20,colors21,colors23,colors25,colors26,colors27,colors31,colors32,colors33],functions:[{name:"rounded",args:["n1","n2",10,"n2",20],nDenom:.1,nRatio:10},{name:"rounded",args:["n1","n2",12,"n2",5],nDenom:1.1,nRatio:.1}]},var04={varID:"Mood 04",lines:{minDist:20,maxDist:120,minThick:.7,visiblePercent:1,limitPerDot:7,maxThick:2.1},nFactor:500,palettes:[colors1,colors3,colors6,colors8,colors10,colors13,colors15,colors17,colors18,colors20,colors23,colors24,colors28,colors27,colors30,colors31,colors32,colors33,colors34,colors35],functions:[{name:"rounded",args:["n1","n2",20,"n2",20],nDenom:.1,nRatio:1},{name:"sinus",args:["n1","1",60],nDenom:1,nRatio:1},{name:"rounded",args:["n1","n2",10,"n2",20],nDenom:.1,nRatio:10},{name:"rounded",args:["n1","n2",12,"n2",5],nDenom:1.1,nRatio:.1},{name:"rNoise",args:["n1","3",.55],nDenom:.1,nRatio:1}]};class Dot{constructor(o,n,e,t){this.pos=createVector(o,n),this.col=e,this.colInd=t,this.connections=0}}const functionLibrary={/*some of the functions are from https://iquilezles.org under the MIT license*/expImpulse:(o,n,e)=>{let t=n*e*o,r=t*exp(1-t);return constrain(r,0,1)},gain:(o,n,e)=>{let t=.5*pow(2*(o<.5?o:1-o),n*e);return o<.5?t:1-t},parabola:(o,n,e)=>pow(4*o*(1-o),n*e),rounded:(o,n,e,t,r)=>{let s=round(o*(n*e))/(t*r);return constrain(s,0,1)},addNoise:(o,n)=>constrain(o+n,0,1),falloff:(o,n,e,t)=>{let r=1/((e*t+1)*(e*t+1));return constrain((1/((o*n+1)*(o*n+1))-r)/(1-r),0,1)},sinus:(o,n,e)=>sin(o*n*e)/2+.5,rNoise:(o,n,e)=>{o>n*e&&(o=n*e-(o-n*e))<0&&(o=-o);return constrain(o/(n*e),0,1)}};console.log(tokenData.hash),console.log(tokenData.tokenId);class Random{constructor(){this.useA=!1;let o=function(o){let n=parseInt(o.substring(0,8),16),e=parseInt(o.substring(8,16),16),t=parseInt(o.substring(16,24),16),r=parseInt(o.substring(24,32),16);return function(){n|=0,e|=0,t|=0,r|=0;let o=(n+e|0)+r|0;return r=r+1|0,n=e^e>>>9,e=t+(t<<3)|0,t=t<<21|t>>>11,t=t+o|0,(o>>>0)/4294967296}};this.prngA=new o(tokenData.hash.substring(2,34)),this.prngB=new o(tokenData.hash.substring(34,66));for(let o=0;o<1e6;o+=2)this.prngA(),this.prngB()}random_dec(){return this.useA=!this.useA,this.useA?this.prngA():this.prngB()}random_num(o,n){return o+(n-o)*this.random_dec()}random_int(o,n){return Math.floor(this.random_num(o,n+1))}random_choice(o){return o[this.random_int(0,o.length-1)]}}let seed,buff,theShader,options,colors,pDensity=3;const dots=[],variations=[var01,var02,var03,var04];let R=new Random;const vertShader="#version 300 es\nin vec3 aPosition;\nin vec2 aTexCoord;\nout vec2 vTexCoord;\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n positionVec4.xy = positionVec4.xy * 2.0 - 1.0;\n gl_Position = positionVec4;\n}\n",fragShader="#version 300 es\nprecision mediump float;\nuniform sampler2D u_tex0;\nuniform vec2 u_stepSize;\nvec2 offset[9];\nfloat kernel[9] = float[9](-4.0, 1.0, 1.0, -1.0, 1.0, 5.0, 0.0, 1.0, 2.0);\nfloat kernelWeight = 0.0;\nvec4 conv = vec4(0.0);\nin vec2 vTexCoord;\nout vec4 fragColor;\n\nfloat random(vec2 uv) {\n\treturn fract(sin(dot(uv.xy ,vec2(532.1231,1378.3453))) * 53211.1223);\n}\n\n/*Copyright (c) 2011 Stefan Gustavson. All rights reserved.\nDistributed under the MIT license.\nhttps://github.com/stegu/webgl-noise*/\nvec4 mod289(vec4 x)\n{\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x)\n{\n return mod289(((x*34.0)+10.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec2 fade(vec2 t) {\n return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n\nfloat cnoise(vec2 P)\n{\n vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);\n vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);\n Pi = mod289(Pi); \n vec4 ix = Pi.xzxz;\n vec4 iy = Pi.yyww;\n vec4 fx = Pf.xzxz;\n vec4 fy = Pf.yyww;\n\n vec4 i = permute(permute(ix) + iy);\n\n vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;\n vec4 gy = abs(gx) - 0.5 ;\n vec4 tx = floor(gx + 0.5);\n gx = gx - tx;\n\n vec2 g00 = vec2(gx.x,gy.x);\n vec2 g10 = vec2(gx.y,gy.y);\n vec2 g01 = vec2(gx.z,gy.z);\n vec2 g11 = vec2(gx.w,gy.w);\n\n vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));\n g00 *= norm.x; \n g01 *= norm.y; \n g10 *= norm.z; \n g11 *= norm.w; \n\n float n00 = dot(g00, vec2(fx.x, fy.x));\n float n10 = dot(g10, vec2(fx.y, fy.y));\n float n01 = dot(g01, vec2(fx.z, fy.z));\n float n11 = dot(g11, vec2(fx.w, fy.w));\n\n vec2 fade_xy = fade(Pf.xy);\n vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);\n float n_xy = mix(n_x.x, n_x.y, fade_xy.y);\n return 2.3 * n_xy;\n}\n\nvec3 adjustContrast(vec3 color, float value) {\n\treturn 0.5 + (1.0 + value) * (color - 0.5);\n}\n\nvoid main() {\n\tvec2 uv = vTexCoord;\n\tuv.y = 1.0 - uv.y;\n uv.x += cnoise(uv*150.0)*0.0015;\n uv.y += cnoise(uv*150.0)*0.0015;\n\tuv.x -= 0.00075;\n\tuv.y -= 0.00075;\n\t\n\toffset[0] = vec2(-u_stepSize.x, -u_stepSize.y); \n\toffset[1] = vec2(0.0, -u_stepSize.y); \n\toffset[2] = vec2(u_stepSize.x, -u_stepSize.y); \n\toffset[3] = vec2(-u_stepSize.x, 0.0); \n\toffset[4] = vec2(0.0, 0.0); \n\toffset[5] = vec2(u_stepSize.x, 0.0); \n\toffset[6] = vec2(-u_stepSize.x, u_stepSize.y); \n\toffset[7] = vec2(0.0, u_stepSize.y); \n\toffset[8] = vec2(u_stepSize.x, u_stepSize.y); \n\n\tfor(int i=0; i<9; i++){\n\t\tvec4 color = texture(u_tex0, uv + offset[i] * 0.2);\n\t\tconv += color * kernel[i];\n\t\tkernelWeight += kernel[i];\n\t}\n\n\tconv.rgb /= kernelWeight;\n\tconv.rgb += random(uv)/8.0;\n\tvec3 c = conv.rgb;\n\tc = adjustContrast(c, 0.05);\n\tfragColor = vec4(c, 1.0);\n}\n";function setup(){setAttributes('preserveDrawingBuffer', true);seed=floor(99999999*R.random_dec());const o=window.location.search,n=new URLSearchParams(o);if(n.has("scale")){let o=parseInt(n.get("scale"),10);2===o?pDensity=6:3===o&&(pDensity=12)}render(pDensity)}function render(o){windowWidth<.65*windowHeight?createCanvas(windowWidth,windowWidth/.65,WEBGL):createCanvas(.65*windowHeight,windowHeight,WEBGL),theShader=createShader(vertShader,fragShader),pixelDensity(o),buff=createGraphics(650,1e3),buff.pixelDensity(o),buff.strokeCap(SQUARE),noiseSeed(seed),randomSeed(seed),options=R.random_choice(variations),colors=R.random_choice(options.palettes),buff.background(colors[0][0]);const n=colors[0].slice(1);for(let o=0;o<1e4;o++){const o=random(-15,buff.width+15),e=random(-15,buff.height+15),t=noiseProcessing(o,e,options.nFactor),r=int(11*t)%n.length,s=color(n[r]);let c=new Dot(o,e,s,r);dots.push(c)}drawConnections()}function drawConnections(){for(let o=0;o<dots.length;o++){let n=dots[o];for(let o=0;o<dots.length;o++){let e=dots[o],t=p5.Vector.dist(e.pos,n.pos);if(n!=e&&t<options.lines.maxDist&&t>options.lines.minDist&&random()<options.lines.visiblePercent&&n.colInd===e.colInd&&n.connections<options.lines.limitPerDot&&e.connections<options.lines.limitPerDot){buff.stroke(n.col);let o=random(options.lines.minThick,options.lines.maxThick);buff.fill(n.col),drawDottedLine(buff,n.pos.x,n.pos.y,e.pos.x,e.pos.y,o),n.connections++,e.connections++}}}}function drawDottedLine(o,n,e,t,r,s){let c=dist(n,e,t,r),a=floor(c/2),i=s,l=(t-n)/a,d=(r-e)/a;for(let t=0;t<=a;t++){let r=n+l*t,c=e+d*t,a=random(-i,i),f=random(-i,i);o.noStroke(),o.ellipse(r+a,c+f,s,s)}}function draw(){shader(theShader),theShader.setUniform("u_tex0",buff),theShader.setUniform("u_stepSize",[1/width,1/height]),rect(-width/2,-height/2,width,height)}function noiseProcessing(o,n,e){let t,r;t=noise((o+3e3)/e,(n+4e3)/e);for(const s of options.functions)if(s.name in functionLibrary){const c=functionLibrary[s.name],a=s.args.map((c=>"n1"===c?t:"n2"===c?(r=noise((o+3e3)/(e/(s.nDenom*s.nRatio)),(n+4e3)/(e/s.nDenom)),r):"y"===c?n/buff.height:"x"===c?o/buff.width:parseFloat(c)));t=c(...a)}return t}function windowResized(){windowWidth<.65*windowHeight?resizeCanvas(windowWidth,windowWidth/.65,WEBGL):resizeCanvas(.65*windowHeight,windowHeight,WEBGL)}function keyPressed(){"s"===key&&save("Untitled_"+tokenData.tokenId+".png")}
</script>
<style type="text/css">
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
canvas {
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
</body>
</html>