<div id="natstviewer" width="512" height="512"></div>
<input id="blk" type="number" style="display:none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
const root=document.getElementById('natstviewer')
root.parentElement.style.width='100%'
root.parentElement.style.height='100%'
root.parentElement.style.padding='0px'
root.parentElement.style.margin='0px'
const Wimg=512
const Himg=512
let scaleW=1
let scaleH=1
let blknum="10"
var howmanysym=0
var vunpaired=[]
var nodd=0
var zeroSym=false
var vColors=[]
var vPalette=[]
const sc=`,`
const sp=` `
const vsparkles=[];
vsparkles.push(150,222,7,32)
vsparkles.push(244,100,6,18)
vsparkles.push(127,320,5,12)
vsparkles.push(321,407,8,21)
vsparkles.push(415,180,5,0)
vsparkles.push(350,244,7,17)
vsparkles.push(221,360,3,27)
// Resize window
window.addEventListener('resize',resize,true)
resize()
// Retrieve content inscription id
let mintText=document.getElementById('preview').getAttribute('mint')
// Check no mint provided
if(mintText.includes('MINT_INSCRIPTION_ID')) {
let input=document.getElementById('blk')
input.style.display='none'
input.style.position='absolute'
input.style.fontSize='20px'
input.style.margin='20px'
input.style.top='0'
input.value=blknum
input.addEventListener('input',(event)=> {
blknum=input.value
update()
})
update()
}
// Mint was provided
else {
const request=new XMLHttpRequest()
try {
request.open('GET','/content/'+mintText)
request.responseType='text'
request.addEventListener('load',()=> initialize(request.response))
request.addEventListener('error',()=> console.error('XHR error'))
request.send()
} catch (error) {
console.error(`XHR error ${request.status}`)
}
}
function initialize(result) {
if(result) {
data=JSON.parse(result)
blknum=data.blk
}
update()
}
function resize(event) {
root.width=window.innerWidth
root.height=window.innerHeight
scaleW=root.width / Wimg
scaleH=root.height / Himg
offsetX=0
offsetY=0
if(scaleH < scaleW) {
scaleW=scaleH
offsetX=(root.width-Wimg * scaleW) / 2
}
else {
scaleH=scaleW
offsetY=(root.height-Himg * scaleH) / 2
}
root.style.zoom=scaleW / 2
update('resize')
}
function update() {
generateHtmlBasedOnBlockNumber(blknum)
}
function generateHtmlBasedOnBlockNumber(blknum) {
if(blknum<0){
return
}
vPalette=[]
const blkNumStr=blknum.toString()
lenStrblk=blkNumStr.length
howmanysym=0
vret=calcSym(blkNumStr,lenStrblk)
vunpaired=vret[0]
howmanysym=vret[1]
nodd=0
for(k=0;k<vunpaired.length;k+=2){
dd=Math.abs(vunpaired[k+1]-vunpaired[k])
nodd+=dd
}
bkgcol="#00000000" // transparent
bcol="#999"
fl2=Math.floor(lenStrblk/2)
ratioSym=lenStrblk==1 ? true :howmanysym/(fl2)
maxSym=howmanysym==Math.floor(fl2) || lenStrblk==1
zeroSym=howmanysym==0
natdiam=null
if(blknum % 1000==0){
natdiam=drawPearl()
}else if(blknum % 100==0 ){
bcol="#567"
createPaletteGems()
vpal=vPalette
natdiam=drawGem(blknum,vpal)
}else if(blknum % 10==0 ){
createPaletteBlackDiam()
vpal=vPalette
natdiam=drawBlackDiam(blknum,vpal,howmanysym,ratioSym)
} else {
iMod4=blknum%10
if(iMod4<=3){ // emerald [1,2,3]
createPaletteEmerald()
vpal=vPalette
natdiam=drawEmerald(blknum,vpal,howmanysym ,ratioSym)
}else if(iMod4<=6){ // ruby [4,5,6]
createPaletteRuby()
vpal=vPalette
natdiam=drawRuby(blknum,vpal,howmanysym,ratioSym)
}else{ // sapphire [7,8,9]
createPaletteSapphire()
vpal=vPalette
natdiam=drawSapphire(blknum,vpal,howmanysym,ratioSym)
}
}
document.getElementById('natstviewer').innerHTML=natdiam
}
function drawPearl(){
atime1="5"
atime2=atime3="7"
sparkles=addSparkles(vsparkles)
var natdiam=`<div style="position:absolute; top:0px; left:0px;">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradSphere" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#eee;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f60;stop-opacity:1" />
</radialGradient>
</defs>
<rect width="512" height="512" fill="`+bkgcol+`"/>
<circle cx="256" cy="256" r="221" fill="#9EB2B9" />
<circle cx="246" cy="242" r="200" fill="#CFDED7" />
<circle cx="220" cy="200" r="136" fill="#EDEFEE" />
<circle cx="164" cy="180" r="64" fill="url(#gradSphere)" />
<circle cx="136" cy="350" r="24" fill="#fff" />
<g transform="translate(140,156)">
<ellipse class="dAnim1" rx="24" ry="24" cx="24" cy="24" fill="#f60" stroke="#777"/>
</g>
</svg>`+sparkles+fillStyle(atime1,atime2,atime3)
return natdiam
}
function drawGem(blk,vc){
const pE1={x:252,y:24}
const pE2={x:372,y:56}
const pE3={x:460,y:146}
const pE4={x:492,y:264}
const pE5={x:462,y:384}
const pE6={x:374,y:470}
const pE7={x:252,y:506}
const pE8={x:132,y:472}
const pE9={x:44,y:384}
const pE10={x:10,y:264}
const pE11={x:42,y:146}
const pE12={x:132,y:56}
const pC1={x:332,y:124}
const pC2={x:422,y:266}
const pC3={x:334,y:406}
const pC4={x:172,y:404}
const pC5={x:82,y:266}
const pC6={x:170,y:124}
const pC={x:252,y:266}
strGrad1="\"url(#gradLin1)\""
strGrad2="\"url(#gradLin2)\""
strGrad3="\"url(#gradLin3)\""
strGrad4="\"url(#gradLin4)\""
opac=0.08
var pathStella=genStella(vc[6],opac)
var polE=a3p(pE1,pE2,pC1,vc[3])
polE+=a3p(pE2,pE3,pC1,vc[4])
polE+=a3p(pE3,pE4,pC2,vc[1])
polE+=a3p(pE4,pE5,pC2,vc[0])
polE+=a3p(pE5,pE6,pC3,vc[0])
polE+=a3p(pE6,pE7,pC3,vc[1])
polE+=a3p(pE7,pE8,pC4,vc[1])
polE+=a3p(pE8,pE9,pC4,vc[0])
polE+=a3p(pE9,pE10,pC5,vc[4])
polE+=a3p(pE10,pE11,pC5,vc[3])
polE+=a3p(pE11,pE12,pC6,vc[4])
polE+=a3p(pE12,pE1,pC6,vc[3])
var polI=a3p(pE1,pC1,pC6,vc[7])
polI+=a3p(pE3,pC1,pC2,vc[2])
polI+=a3p(pE5,pC2,pC3,vc[1])
polI+=a3p(pE7,pC3,pC4,vc[0])
polI+=a3p(pE9,pC4,pC5,vc[1])
polI+=a3p(pE11,pC5,pC6,vc[6])
var polC=a3pg(pC,pC6,pC1,strGrad2,bcol)
polC+=a3pg(pC,pC1,pC2,strGrad3,bcol)
polC+=a3pg(pC,pC2,pC3,strGrad1,bcol)
polC+=a3pg(pC,pC3,pC4,strGrad2,bcol)
polC+=a3pg(pC,pC4,pC5,strGrad1,bcol)
polC+=a3pg(pC,pC5,pC6,strGrad3,bcol)
hstroke=bcol
atime1="5"
atime2=atime3="7"
sparkles=addSparkles(vsparkles)
var natdiam=`<div style="position:absolute; top:0px; left:0px;">
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradLin1">
<stop offset="0" stop-color="`+vc[0]+`"/>
<stop offset="1" stop-color="`+vc[2]+`"/>
</linearGradient>
<linearGradient id="gradLin2">
<stop offset="0" stop-color="`+vc[1]+`"/>
<stop offset="1" stop-color="`+vc[3]+`"/>
</linearGradient>
<linearGradient id="gradLin3">
<stop offset="0" stop-color="`+vc[4]+`"/>
<stop offset="1" stop-color="`+vc[6]+`"/>
</linearGradient>
<linearGradient id="gradLin4">
<stop offset="0" stop-color="`+vc[5]+`"/>
<stop offset="1" stop-color="`+vc[7]+`"/>
</linearGradient>
</defs>
<rect width="512" height="512" fill="`+bkgcol+`"/> `
+polE+polI+polC+pathStella+sparkles+`
</svg>`+fillStyle(atime1,atime2,atime3)+`
</div>`;
return natdiam
}
function drawRuby(blk,vc,howmanysym,ratioSym){
const pE1={x:256,y:28}
const pE2={x:442,y:70}
const pE3={x:482,y:256}
const pE4={x:442,y:442}
const pE5={x:256,y:482}
const pE6={x:70,y:442}
const pE7={x:28,y:256}
const pE8={x:70,y:70}
var pI1={x:256,y:118}
var pI2={x:400,y:256}
var pI3={x:256,y:400}
var pI4={x:118,y:256}
var pC1={x:200,y:200}
var pC2={x:310,y:200}
var pC3={x:310,y:310}
var pC4={x:200,y:310}
// ruby
if(vunpaired.length >=6 ){
pC1.x=pC1.x+nodd * 4
pC2.y=pC2.y-nodd* 4
pC3.x=pC3.x+nodd* 4
pC4.y=pC4.y-nodd* 4
pI1.x=pI1.x+nodd* 4
pI2.y=pI2.y-nodd* 4
pI3.x=pI3.x+nodd* 4
pI4.y=pI4.y-nodd* 4
} else if(vunpaired.length >=4 ){
pC1.x=pC1.x+nodd* 2
pC2.y=pC2.y-nodd* 2
pC3.x=pC3.x+nodd* 2
pC4.y=pC4.y-nodd * 2
} else if(vunpaired.length >=2){
pI1.x=pI1.x+nodd
pI2.y=pI2.y-nodd
pI3.x=pI3.x+nodd
pI4.y=pI4.y-nodd
}
opac=0.21
var pathStella=genStella(vc[6],opac)
var pathA="<path d='M 120 300 A 256 206 20 0 0 386 210' stroke='"+vc[5]+"' stroke-width='60' fill='none' />"
var polE=a3p(pE1,pE2,pI1,vc[2])
polE+=a3p(pE2,pE3,pI2,vc[1])
polE+=a3p(pE3,pE4,pI2,vc[0])
polE+=a3p(pE4,pE5,pI3,vc[0])
polE+=a3p(pE5,pE6,pI3,vc[1])
polE+=a3p(pE6,pE7,pI4,vc[2])
polE+=a3p(pE7,pE8,pI4,vc[4])
polE+=a3p(pE8,pE1,pI1,vc[5])
var polI=a3p(pI1,pE2,pC2,vc[4])
polI+=a3p(pC2,pE2,pI2,vc[3])
polI+=a3p(pI2,pE4,pC3,vc[2])
polI+=a3p(pC3,pE4,pI3,vc[1])
polI+=a3p(pI3,pE6,pC4,vc[2])
polI+=a3p(pC4,pE6,pI4,vc[3])
polI+=a3p(pI4,pE8,pC1,vc[5])
polI+=a3p(pC1,pE8,pI1,vc[4])
var polC=a3p(pC1,pC2,pI1,vc[5])
polC+=a3p(pC2,pC3,pI2,vc[1])
polC+=a3p(pC3,pC4,pI3,vc[3])
polC+=a3p(pC4,pC1,pI4,vc[4])
atime1=atime2=atime3="5"
if(ratioSym < 1){
atime1= Math.floor(5 * ratioSym)
atime2= Math.floor(7 * ratioSym)
atime3= Math.floor(9 * ratioSym)
}
if(ratioSym==0){
atime1=atime2=atime3="0"
}
sparkles=addSparkles(vsparkles)
var natdiam=`<div style="position:absolute; top:0px; left:0px;">
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" fill="`+bkgcol+`"/>`
+pathA+polE+polI+polC+pathStella+sparkles+`
</svg>`+fillStyle(atime1,atime2,atime3)+`
</div>`;
return natdiam
}
function drawEmerald(blk,vc,howmanysym,ratioSym){
// perim ext
const pe1={x:420,y:46}
const pe2={x:464,y:70}
const pe3={x:464,y:450}
const pe4={x:420,y:476}
const pe5={x:86,y:476}
const pe6={x:42,y:450}
const pe7={x:42,y:70}
const pe8={x:86,y:46}
const ph1={x:450,y:50}
const ph2={x:450,y:470}
const ph3={x:52,y:470}
const ph4={x:52,y:50}
// perim int
const pi1={x:432,y:68}
const pi2={x:432,y:458}
const pi3={x:70,y:458}
const pi4={x:68,y:68}
var pC1={x:252,y:92}
var pC2={x:350,y:116}
var pC3={x:390,y:256}
var pC4={x:350,y:412}
var pC5={x:252,y:432}
var pC6={x:152,y:410}
var pC7={x:114,y:256}
var pC8={x:152,y:116}
lelps=80+howmanysym * 15
helps=12-howmanysym * 2
// emerald
if(vunpaired.length >=6 ){
pC1.x=pC1.x+nodd*2
pC2.y=pC2.y-nodd*2
pC3.x=pC3.x+nodd*2
//pC4.y=pC4.y-nodd* 2
pC5.y=pC5.y+nodd*2
pC6.y=pC6.y-nodd*2
pC7.y=pC7.y+nodd*2
pC8.y=pC8.y-nodd*2
}else if(vunpaired.length >=2 ){
pC1.x=pC1.x+nodd*2
pC2.x=pC2.x+nodd
pC3.y=pC3.y-nodd*2
//pC4.x=pC4.x+nodd
pC5.x=pC5.x+nodd*2
pC6.x=pC6.x+nodd
pC7.y=pC7.y-nodd*2
pC8.y=pC8.y-nodd
}else if(vunpaired.length >=2){
pC2.x=pC2.x+nodd
pC4.y=pC4.y-nodd
pC6.x=pC6.x+nodd
pC8.y=pC8.y-nodd
}
opac=0.21
var pathStella=genStella(vc[6],opac)
var pathA="<path d='M 82 400 A 236 256 20 0 0 426 230' stroke='"+vc[5]+"' stroke-width='80' fill='none' />"
var pathB="<path d='M 80 330 A 256 206 20 0 0 384 80'' stroke='"+vc[6]+"' stroke-width='100' fill='none' />"
var polE=add7pt(pe1,ph1,pi1,pC1,pi4,ph4,pe8,vc[6])
polE+=add7pt(ph1,pe2,pe3,ph2,pi2,pC3,pi1,vc[2])
polE+=add7pt(ph2,pe4,pe5,ph3,pi3,pC5,pi2,vc[2])
polE+=add7pt(ph3,pe6,pe7,ph4,pi4,pC7,pi3,vc[4])
var polT=a3p(pC1,pC2,pi1,vc[4])
polT+=a3p(pi1,pC3,pC2,vc[0])
polT+=a3p(pC3,pi2,pC4,vc[1])
polT+=a3p(pC4,pi2,pC5,vc[0])
polT+=a3p(pC5,pi3,pC6,vc[4])
polT+=a3p(pC6,pi3,pC7,vc[1])
polT+=a3p(pC7,pi4,pC8,vc[5])
polT+=a3p(pC8,pi4,pC1,vc[4])
atime1=atime2=atime3="5"
if(ratioSym < 1){
atime1= Math.floor(5 * ratioSym)
atime2= Math.floor(7 * ratioSym)
atime3= Math.floor(9 * ratioSym)
}
if(ratioSym==0){
atime1=atime2=atime3="0"
}
sparkles=addSparkles(vsparkles)
var natdiam=`<div style="position:absolute; top:0px; left:0px;">
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" fill="`+bkgcol+`"/>`
+pathB+pathA+polE+polT+pathStella+sparkles+`
</svg>`+fillStyle(atime1,atime2,atime3)+`
</div>`;
return natdiam
}
function drawSapphire(blk,vc,howmanysym,ratioSym){
var pe1={x:256,y:36}
var pe2={x:354,y:60}
var pe3={x:416,y:120}
var pe4={x:456,y:200}
var pe5={x:464,y:262}
var pe6={x:456,y:328}
var pe7={x:420,y:406}
var pe8={x:356,y:466}
var pe9={x:256,y:492}
var pe10={x:154,y:470}
var pe11={x:85,y:406}
var pe12={x:50,y:326}
var pe13={x:40,y:262}
var pe14={x:50,y:200}
var pe15={x:86,y:122}
var pe16={x:154,y:62}
var pC1= {x:296,y:188}
var pC2= {x:340,y:242}
var pC3= {x:338,y:298}
var pC4= {x:296,y:340}
var pC5= {x:210,y:338}
var pC6= {x:158,y:296}
var pC7= {x:166,y:230}
var pC8= {x:210,y:188}
var pC= {x:252,y:262}
// sapphyr
if(vunpaired.length >=6 ){
pC1.x=pC1.x+nodd * 2
pC2.y=pC2.y-nodd* 2
pC3.x=pC3.x+nodd* 2
//pC4.y=pC4.y-nodd* 2
pC5.y=pC5.y+nodd* 2
pC6.y=pC6.y-nodd* 2
pC7.y=pC7.y+nodd* 2
pC8.y=pC8.y-nodd* 2
}else if(vunpaired.length >=2 ){
pC1.x=pC1.x+nodd* 2
pC2.x=pC2.x+nodd
pC3.y=pC3.y-nodd* 2
//pC4.x=pC4.x+nodd
pC5.x=pC5.x+nodd* 2
pC6.x=pC6.x+nodd
pC7.y=pC7.y-nodd * 2
pC8.y=pC8.y-nodd
}else if(vunpaired.length >=2){
pC2.x=pC2.x+nodd
pC4.y=pC4.y-nodd
pC6.x=pC6.x+nodd
pC8.y=pC8.y-nodd
}
opac=0.21
var pathStella=genStella(vc[6],opac)
var polE=a3p(pe1,pe2,pC1,vc[7])
polE+=a3p(pe2,pe3,pC1,vc[4])
polE+=a3p(pe3,pe4,pC2,vc[7])
polE+=a3p(pe4,pe5,pC2,vc[1])
polE+=a3p(pe5,pe6,pC3,vc[3])
polE+=a3p(pe6,pe7,pC3,vc[1])
polE+=a3p(pe7,pe8,pC4,vc[0])
polE+=a3p(pe8,pe9,pC4,vc[3])
polE+=a3p(pe9,pe10,pC5,vc[0])
polE+=a3p(pe10,pe11,pC5,vc[2])
polE+=a3p(pe11,pe12,pC6,vc[3])
polE+=a3p(pe12,pe13,pC6,vc[1])
polE+=a3p(pe13,pe14,pC7,vc[3])
polE+=a3p(pe14,pe15,pC7,vc[6])
polE+=a3p(pe15,pe16,pC8,vc[7])
polE+=a3p(pe16,pe1,pC8,vc[6])
var polC=a4p(pC,pC8,pe1,pC1,vc[4],bcol,"")
polC+=a4p(pC,pC1,pe3,pC2,vc[6],bcol,"")
polC+=a4p(pC,pC2,pe5,pC3,vc[0],bcol,"")
polC+=a4p(pC,pC3,pe7,pC4,vc[3],bcol,"")
polC+=a4p(pC,pC4,pe9,pC5,vc[2],bcol,"")
polC+=a4p(pC,pC5,pe11,pC6,vc[4],bcol,"")
polC+=a4p(pC,pC6,pe13,pC7,vc[6],bcol,"")
polC+=a4p(pC,pC7,pe15,pC8,vc[7],bcol,"")
atime1=atime2=atime3="5"
if(ratioSym < 1){
atime1= Math.floor(5 * ratioSym)
atime2= Math.floor(7 * ratioSym)
atime3= Math.floor(9 * ratioSym)
}
if(ratioSym==0){
atime1=atime2=atime3="0"
}
sparkles=addSparkles(vsparkles)
var natdiam=`<div style="position:absolute; top:0px; left:0px;">
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" fill="`+bkgcol+`"/>`
+polE+polC+pathStella+sparkles+`
</svg>`+fillStyle(atime1,atime2,atime3)+`
</div>`;
return natdiam
}
function drawBlackDiam(blk,vc,howmanysym,ratioSym){
//fixed points
var pl={x:6,y:170}
const pc= {x:256,y:170}
var pr= {x:506,y:170}
const pb= {x:256,y:482}
const p0= {x:48,y:110}
const p1={x:100,y:82}
const p2={x:132,y:172}
const p3={x:128,y:170}
var p4={x:180,y:122}
const p5={x:168,y:170}
var p6={x:256,y:97}
const p7={x:332,y:122}
const p8={x:464,y:110}
const p9={x:412,y:82}
const p10={x:380,y:172}
const p11={x:384,y:170}
const p12={x:332,y:122}
const p13={x:344,y:170}
var pT1={x:236,y:390}
var pT2={x:276,y:390}
const pA={x:70,y:170}
const pB={x:442,y:170}
const pC={x:196,y:170}
const pD={x:316,y:170}
var pCl={x:50,y:40}
var pCr={x:462,y:40}
// upper left
var polL=a3p(pl,p2,p0,vc[0],bcol,"")
polL+=a4p(p0,p1,p4,p3,vc[1],bcol,"")
polL+=a3p(p3,p4,p5,vc[2],bcol,"")
polL+=a3p(p4,p5,pc,vc[3],bcol,"")
polL+=a3p(p1,p4,p6,vc[4],bcol,"")
// upper central
strokec="#777"
polC=a4p(p4,p6,p7,pc,"#f60",strokec,"")
// upper right
var polR=a3p(pr,p10,p8,vc[0],bcol,"")
polR+=a4p(p8,p10,p7,p9,vc[1],bcol,"")
polR+=a3p(p13,p7,p10,vc[2],bcol,"")
polR+=a3p(p13,p7,pc,vc[3],bcol,"")
polR+=a3p(p9,p7,p6,vc[4],bcol,"")
// lower
var polT =a3p(pl,pr,pb,vc[0],bcol,"")
var polt1=a3p(pA,p3,pT1,vc[4],bcol,"")
var polt2=a3p(p3,p5,pT1,vc[7],bcol,"")
var polt3=a3p(p5,pC,pT1,vc[4],bcol,"")
var polt4=a3p(pB,p11,pT2,vc[4],bcol,"")
var polt5=a3p(p11,p13,pT2,vc[7],bcol,"")
var polt6=a3p(p13,pD,pT2,vc[4],bcol,"")
// horns
hstroke=bcol
cornacol="#888"
var polCl=a3p(p0,p1,pCl,cornacol,bcol,"")
var polCr=a3p(p8,p9,pCr,cornacol,bcol,"")
sparkles=addSparkles(vsparkles)
atime1= 5
atime2= 7
atime3= 9
var natdiam=`<div style="position:absolute; top:0px; left:0px;">
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" fill="`+bkgcol+`"/>`
+polL+polC+polR+polT+polt1+polt2+polt3+polt4+polt5+polt6+polCl+polCr+sparkles+`
</svg>`+fillStyle(atime1,atime2,atime3)+`
</div>`;
return natdiam
}
function a3p(p1,p2,p3,palcol,opac){
s=`<polygon points="`+p1.x+sc+p1.y+sp+p2.x+sc+p2.y+sp+p3.x+sc+p3.y +`" fill="`+palcol+`"; stroke="#ccc"`
if(opac !=null ) {
s+=`"; opacity="`+opac+`"`
}
s+=`/>`
return s
}
function a3pg(p1,p2,p3,palcol){
s=`<polygon points="`+p1.x+sc+p1.y+sp+p2.x+sc+p2.y+sp+p3.x+sc+p3.y +`" fill=`+palcol+` />`
return s
}
function a4p(p1,p2,p3,p4,palcol,dAnim){
s=""
if(dAnim.length > 0 ){
s=`<polygon class="`+dAnim+`" points="`+p1.x+sc+p1.y+sp+p2.x+sc+p2.y+sp+p3.x+sc+p3.y+sp+p4.x+sc+p4.y+`" fill="`+palcol+`" />`
}else{
s=`<polygon points="`+p1.x+sc+p1.y+sp+p2.x+sc+p2.y+sp+p3.x+sc+p3.y+sp+p4.x+sc+p4.y+`" fill="`+palcol+`" />`
}
return s
}
function a4ps(p1,p2,p3,p4,fillcol,bcol,opac){
var s=`<polygon points="`+p1.x+sc+p1.y+sp+p2.x+sc+p2.y+sp+p3.x+sc+p3.y+sp+p4.x+sc+p4.y+`"`
s+=`" fill="`+fillcol+`" stroke="`+bcol+`"; stroke-width="1"; opacity="`+opac+`"/>`
return s
}
function add7pt(p1,p2,p3,p4,p5,p6,p7,palcol){
s=`<polygon points="`+p1.x+sc+p1.y+sp+p2.x+sc+p2.y+sp+p3.x+sc+p3.y +sp+
p4.x+sc+p4.y+sp+p5.x+sc+p5.y+sp+p6.x+sc+p6.y +sp+
p7.x+sc+p7.y +`" fill="`+palcol+`" />`
return s
}
function genStella(col,opac) {
var cx=Wimg/2
var cy=Himg/2
var L=24
var pe1={x:330,y:56}
var pe2={x:438,y:162}
var pe3={x:462,y:246}
var pe4={x:430,y:378}
var pe5={x:326,y:470}
var pe6={x:190,y:474}
var pe7={x:92,y:418}
var pe8={x:40,y:276}
var pe9={x:86,y: 122}
var pe10={x:184,y:48}
var pi1={x:256,y:190}
var pi2={x:300,y:204}
var pi3={x:326,y:244}
var pi4={x:326,y:290}
var pi5={x:300,y:328}
var pi6={x:256,y:340}
var pi7={x:216,y:324}
var pi8={x:184,y:290}
var pi9={x:186,y:244}
var pi10={x:210,y:200}
var pathS= a3p(pi1,pi2,pe1,col,opac)
pathS+=a3p(pi2,pi3,pe2,col,opac)
pathS+=a3p(pi3,pi4,pe3,col,opac)
pathS+=a3p(pi4,pi5,pe4,col,opac)
pathS+=a3p(pi5,pi6,pe5,col,opac)
pathS+=a3p(pi6,pi7,pe6,col,opac)
pathS+=a3p(pi7,pi8,pe7,col,opac)
pathS+=a3p(pi8,pi9,pe8,col,opac)
pathS+=a3p(pi9,pi10,pe9,col,opac)
pathS+=a3p(pi10,pi1,pe10,col,opac)
return pathS
}
function addSparkles(vdata) {
palcol="#eff"
atime1=3
atime2=2
atime3=1
var spark=`<div style="position:absolute; top:0px; left:0px;">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradSpark" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#daeaea;stop-opacity:1" />
</radialGradient>
</defs>`
for(i=0;i<vdata.length;i+=4 ){
x=vdata[i]
y=vdata[i+1]
rr=vdata[i+2]
ln=vdata[i+3]
var ss=`<circle cx="`+x+`" cy="`+y+`" r="`+rr+`" fill="#eee" />
<circle cx="`+x+`" cy="`+y+`" r="`+(rr+2)+`" fill="url(#gradSpark)" />
<polygon class="dAnim1" points="`+(x-2)+sc+(y+2)+sp+(x+2)+sc+(y-2)+sp+(x+ln)+sc+(y+ln) +`" fill="`+palcol+`" />
<polygon class="dAnim2" points="`+(x-2)+sc+(y+2)+sp+(x+2)+sc+(y-2)+sp+(x-ln)+sc+(y-ln) +`" fill="`+palcol+`" />
<polygon class="dAnim3" points="`+(x-4)+sc+(y+1)+sp+(x+2)+sc+(y-2)+sp+(x+ln)+sc+(y-ln) +`" fill="`+palcol+`" />
<polygon class="dAnim1" points="`+(x-4)+sc+(y+1)+sp+(x+3)+sc+(y-3)+sp+(x-ln)+sc+(y+ln) +`" fill="`+palcol+`" />`
spark+=ss
}
spark+=`</svg> </div>`
return spark
}
function fillTicks(strcol){
var ticks=`<rect x=60 y=16 width=3 height=2 fill="`+strcol+`" stroke="#777"/>`
ticks+=`<rect x=125 y=16 width=3 height=2 fill="`+strcol+`" stroke="#777"/>`
ticks+=`<rect x=190 y=16 width=3 height=2 fill="`+strcol+`" stroke="#777"/>`
ticks+=`<rect x=255 y=16 width=3 height=2 fill="`+strcol+`" stroke="#777"/>`
ticks+=`<rect x=320 y=16 width=3 height=2 fill="`+strcol+`" stroke="#777"/>`
ticks+=`<rect x=385 y=16 width=3 height=2 fill="`+strcol+`" stroke="#777"/>`
ticks+=`<rect x=448 y=16 width=3 height=2 fill="`+strcol+`" stroke="#777"/>`
return ticks
}
function fillStyle(atime1,atime2,atime3){
var strstyle=`<style>
.dAnim1 {
animation-name:dOpacity;
animation-duration:`+atime1 +`s;
animation-iteration-count:infinite;
}
.dAnim2 {
animation-name:dOpacity;
animation-duration:`+atime2 +`s;
animation-iteration-count:infinite;
}
.dAnim3 {
animation-name:dOpacity;
animation-duration:`+atime3 +`s;
animation-iteration-count:infinite;
}
@keyframes dOpacity {
0% { opacity:1; }
50% { opacity:0.1; }
100% { opacity:1; }
}
</style>`
return strstyle
}
function calcSym(blkNumStr,len){
howmanysym=0
vunpaired=[]
let len2=Math.floor(len / 2)
for (let i=0; i < len2; i++) {
let ch1=blkNumStr.charAt(i)
let ch2=blkNumStr.charAt(len-1-i)
i1=parseInt(ch1)
i2=parseInt(ch2)
if(ch1==ch2){
howmanysym++
} else {
vunpaired.push(i1)
vunpaired.push(i2)
}
}
return [vunpaired,howmanysym]
}
function createPaletteEmerald(){
vPalette.push("#006837")
vPalette.push("#009245")
vPalette.push("#39B54A")
vPalette.push("#68EA74")
vPalette.push("#22B573")
vPalette.push("#5EEAA7")
vPalette.push("#B2F9D5")
vPalette.push("#FFFFFF")
}
function createPaletteRuby(){
vPalette.push("#B20602")
vPalette.push("#D80326")
vPalette.push("#EA3B7E")
vPalette.push("#FF0000")
vPalette.push("#F48EB0")
vPalette.push("#FFDEEB")
vPalette.push("#FFF2F8")
vPalette.push("#FFFFFF")
}
function createPaletteSapphire(){
vPalette.push("#040521")
vPalette.push("#2340A5")
vPalette.push("#0025CC")
vPalette.push("#2943FF")
vPalette.push("#3F6FF5")
vPalette.push("#618BFF")
vPalette.push("#19A8F7")
vPalette.push("#DAF9FA")
}
function createPaletteBlackDiam(){
vPalette.push("#000")
vPalette.push("#333")
vPalette.push("#555")
vPalette.push("#777")
vPalette.push("#999")
vPalette.push("#bbb")
vPalette.push("#bbe")
vPalette.push("#ddd")
vPalette.push("#ddf")
}
function createPaletteGems(){
vPalette.push("#006868")
vPalette.push("#009292")
vPalette.push("#39B5B5")
vPalette.push("#68EAEA")
vPalette.push("#22B5B5")
vPalette.push("#5EEAAEA")
vPalette.push("#B2F9F9")
vPalette.push("#E2FEFE")
vPalette.push("#FFFFFF")
}
</script>