<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
<div id="natwildhumanviewer" width="256" height="256"></div>
<input id="blk" type="number" style="display:none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
// Retrieve render area
const root = document.getElementById('natwildhumanviewer')
root.parentElement.style.width = '100%'
root.parentElement.style.height = '100%'
root.parentElement.style.padding = '0px'
root.parentElement.style.margin = '0px'
const orgWidth = 212
const orgHeight = 212
let scaleW = 1
let scaleH = 1
let blockNumber = '0'
// Define the color map with different and unique colors
const colorMap = {
1: "#FF6F61", // Coral
2: "#FFD700", // Gold
3: "#7CFC00", // Lawn Green
4: "#40E0D0", // Turquoise
5: "#9932CC", // Dark Orchid
6: "#FF6347", // Tomato
7: "#00CED1", // Dark Turquoise
8: "#8A2BE2", // Blue Violet
9: "#FFA07A", // Light Salmon
0: "#696969" // Dim Grey
};
// Define the color map with different and unique colors
const colorMap2 = {
1: "#8B008B", // Dark Magenta
2: "#FF4500", // Orange Red
3: "#8B4513", // Saddle Brown
4: "#20B2AA", // Light Sea Green
5: "#6A5ACD", // Slate Blue
6: "#2E8B57", // Sea Green
7: "#4682B4", // Steel Blue
8: "#FF69B4", // Hot Pink
9: "#7B68EE", // Medium Slate Blue
0: "#DC143C" // Crimson
};
// Define the color map with different and unique colors
const colorMap3 = {
1: "#32CD32", // Lime Green
2: "#87CEEB", // Sky Blue
3: "#FFD700", // Gold
4: "#BA55D3", // Medium Orchid
5: "#FF6347", // Tomato
6: "#CD5C5C", // Indian Red
7: "#2E8B57", // Sea Green
8: "#1E90FF", // Dodger Blue
9: "#9370DB" // Medium Purple
};
// 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 = 'block'
input.style.position = 'absolute'
input.style.fontSize = '20px'
input.style.margin = '20px'
input.style.top = '0'
input.value = blockNumber
input.addEventListener('input',(event) => {
blockNumber = 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) {
console.log('Result', result)
data = JSON.parse(result)
blockNumber = data.blk
}
update()
}
function resize(event) {
root.width = window.innerWidth
root.height = window.innerHeight
scaleW = root.width / orgWidth
scaleH = root.height / orgHeight
offsetX = 0
offsetY = 0
if(scaleH < scaleW) {
scaleW = scaleH
offsetX = (root.width - orgWidth * scaleW) / 2
}
else {
scaleH = scaleW
offsetY = (root.height - orgHeight * scaleH) / 2
}
root.style.zoom = scaleW / 2
update('resize')
}
function update() {
generateHtmlBasedOnBlockNumber(blockNumber)
}
function generateSvgForDigits(blockNumber) {
const originalString = blockNumber.toString()
const digits = originalString.padStart(7, '0').split('').map(Number).reverse()
let svgs = []
//left ear
if (originalString.length >= 3) {
const colorForThirdDigit = colorMap2[digits[2]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 89px; left: 105px;">
<svg width="50" height="80" viewBox="0 0 50 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 0L80 80L0 80L6.99383e-06 0Z" fill="${colorForThirdDigit}"/>
</svg>
</div>
`)
}
//right ear
if (originalString.length >= 4) {
const colorForFourthDigit = colorMap2[digits[3]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 89px; left: 270px;">
<svg width="50" height="80" viewBox="0 0 50 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 0L80 80L0 80L0 0Z" fill="${colorForFourthDigit}"/>
</svg>
</div>
`)
}
//neck
if (originalString.length >= 2) {
const colorForSecondDigit = colorMap2[digits[1]] || "transparent";
svgs.push(`
<div style="position: absolute; top: 345px; left: 105px;">
<svg width="78" height="80" viewBox="0 0 78 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="78" height="80" fill="${colorForSecondDigit}" stroke="white" stroke-width="2"/>
</svg>
</div>
`);
}
// face
if (originalString.length >= 1) {
const colorForFirstDigit = colorMap[digits[0]];
const tomatoRed = "tomato";
const peach = "#FFDAB9"; // You can adjust the color code for the cheeks
svgs.push(`
<div style="position: absolute; top: 138px; left: 105px;">
<svg width="215" height="209" viewBox="0 0 215 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M215 3.75918e-05L3.65427e-05 0L0 209L215 209L215 94L143.008 94L143.008 58L215 58L215 3.75918e-05ZM22 58L94 58L94 94L22 94L22 58ZM197 155H94V180H197V155Z" fill="${colorForFirstDigit}" stroke="rgb(255,255,255)" stroke-width="2"/>
<!-- Left eyebrow -->
<rect x="22" y="40" width="72" height="8" fill="rgb(255,255,255)" stroke="${tomatoRed}" stroke-width="2"/>
<!-- Right eyebrow -->
<rect x="143.008" y="40" width="112" height="8" fill="rgb(255,255,255)" stroke="${tomatoRed}" stroke-width="2"/>
<!-- Left cheek -->
<circle cx="70" cy="125" r="15" fill="${peach}" stroke="${peach}" stroke-width="2"/>
<!-- Right cheek -->
<circle cx="165" cy="125" r="15" fill="${peach}" stroke="${peach}" stroke-width="2"/>
</svg>
</div>
`);
}
//nose
if (originalString.length >= 5) {
const colorForFifthDigit = colorMap2[digits[4]] || "transparent";
svgs.push(`
<div style="position: absolute; top: 255px; left: 219px;">
<svg width="18" height="18" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0L28 0L28 28L0 28L0 0Z" fill="${colorForFifthDigit}" stroke="white" stroke-width="2"/>
</svg>
</div>
`);
}
//stripes
if (originalString.length >= 6) {
const colorForSixthDigit = colorMap[digits[5]] || "transparent"
svgs.push(`
<div style="position: absolute; top: 365px; left:105px;">
<svg width="36" height="54" viewBox="0 0 36 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="18" fill="${colorForSixthDigit}"/>
<rect y="36" width="36" height="18" fill="${colorForSixthDigit}"/>
</svg>
</div>
`)
}
//tail
if (originalString.length >= 2) {
const colorForSecondDigit = colorMap2[digits[1]] || "transparent";
svgs.push(`
<div style="position: absolute; top: 279px; left: 0;">
<svg width="46" height="146" viewBox="0 0 46 146" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="outerShadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="-2" dy="-2" stdDeviation="2" flood-color="rgb(255,255,255)"/>
</filter>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.0001 146H0L5.3765e-05 10H46.0001" fill="${colorForSecondDigit}" filter="url(#outerShadow)"/>
</svg>
</div>
`);
}
return svgs.join('');
}
function generateSvgForDigits2(blockNumber) {
const originalString = blockNumber.toString()
const digits = originalString.padStart(7, '0').split('').map(Number).reverse()
let svgs = []
//toothL
if (originalString.length >= 7) {
const colorForSeventhDigit = colorMap3[digits[6]] || "FFFFFF"
svgs.push(`
<div style="position: absolute; top: 288px; left:189px;">
<svg width="40" height="15" viewBox="0 0 40 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="15" fill="${colorForSeventhDigit}"/>
</svg>
</div>
`)
}
//toothR
if (originalString.length >= 7) {
const colorForSeventhDigit = colorMap3[digits[6]] || "FFFFFF"
svgs.push(`
<div style="position: absolute; top: 288px; left:249px;">
<svg width="40" height="15" viewBox="0 0 40 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="15" fill="${colorForSeventhDigit}"/>
</svg>
</div>
`)
}
return svgs.join('')
}
//eye direction
function getLook(number) {
const numberStr = number.toString()
const lastFourDigits = parseInt(numberStr.substring(numberStr.length - 4))
if (lastFourDigits < 4800) {
return "look_right"
} else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
return "look_crossed"
} else {
return "look_left"
}
}
function generateLookSvg(lookDir) {
let lookHtml = ""
if (lookDir === "look_left") {
lookHtml = `<div style="position: absolute; top: 195px; left: 126px;">
<svg width="158" height="38" viewBox="0 0 158 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="37" y="38" width="37" height="38" transform="rotate(-180 37 38)" fill="#070609"/>
<rect x="158" y="38" width="37" height="38" transform="rotate(-180 158 38)" fill="#070609"/>
</svg>
</div>`
} else if (lookDir === "look_right") {
lookHtml = `<div style="position: absolute; top: 195px; left: 163px;">
<svg width="158" height="38" viewBox="0 0 158 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="37" y="38" width="37" height="38" transform="rotate(-180 37 38)" fill="#070609"/>
<rect x="157.5" y="38" width="36.5" height="38" transform="rotate(-180 157.5 38)" fill="#070609"/>
</svg>
</div>`
} else if (lookDir === "look_crossed") {
lookHtml = `<div style="position: absolute; top: 195px; left: 126px;">
<svg width="195" height="38" viewBox="0 0 195 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="194.5" y="38" width="36.5" height="38" transform="rotate(-180 194.5 38)" fill="#070609"/>
<rect x="37" y="38" width="37" height="38" transform="rotate(-180 37 38)" fill="#070609"/>
</svg>
</div>`
}
return lookHtml
}
function c420(number) {
const numberStr = number.toString()
return numberStr.includes('420')
}
function displaywildhumannip() {
return `<div style="position: absolute; top: 293px; left: 356px;">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="18" width="18" height="18" transform="rotate(-180 18 18)" fill="#00B127"/>
</svg>
</div>`
}
function c4a0(number) {
const numberStr = number.toString()
return numberStr.includes('4') && numberStr.includes('0')
}
function displaycig(number) {
return `<div style="position: absolute; top: 219px; left: 302px;">
<svg width="72" height="92" viewBox="0 0 72 92" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="72" y="92" width="72" height="18" transform="rotate(-180 72 92)" fill="#FBFBFB"/>
<defs>
<linearGradient id="flameGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #FFEA00; stop-opacity: 1" />
<stop offset="100%" style="stop-color: #FF0034; stop-opacity: 1" />
</linearGradient>
</defs>
<rect x="72" y="56" width="18" height="56" transform="rotate(-180 72 56)" fill="url(#flameGradient)" fill-opacity="0.8"/>
<rect x="72" y="92" width="18" height="18" transform="rotate(-180 72 92)" fill="#FF0034"/>
</svg>
</div>`;
}
function c0(number) {
const numberStr = number.toString()
return numberStr.includes('0')
}
function displayEarring(number) {
return `<div style="position: absolute; top: 120px; left: 87px;">
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="19" height="18" fill="#FFC700"/>
</svg>
</div>`
}
function c00(number) {
const numberStr = number.toString()
return numberStr.includes('00')
}
function displayEarringR(number) {
return `<div style="position: absolute; top: 120px; left: 319px;">
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="19" height="18" fill="#FFC700"/>
</svg>
</div>`
}
function c000(number) {
const numberStr = number.toString()
return numberStr.includes('000')
}
function displayAlienEarring(number) {
return `<div style="position: absolute; top: 120px; left: 87px;">
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="19" height="18" fill="#49EFEF"/>
</svg>
</div>`
}
function c0000(number) {
const numberStr = number.toString()
return numberStr.includes('0000')
}
function displayAlienEarringR(number) {
return `<div style="position: absolute; top: 120px; left: 319px;">
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="19" height="18" fill="#49EFEF"/>
</svg>
</div>`
}
function c00000(number) {
const numberStr = number.toString()
return numberStr.includes('00000')
}
function displayAlienTiara(number) {
return `<div style="position: absolute; top: 102px; left: 132px;">
<svg width="162" height="36" viewBox="0 0 162 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36 0H54V18H36V0ZM36 18V36H18H0V18H18H36ZM72 18V36H54V18H72ZM90 18H72V0H90V18ZM108 18V36H90V18H108ZM126 18H108V0H126V18ZM144 18H126V36H144H162V18H144Z" fill="#00FFF0"/>
</svg>
</div>`
}
function c11(number) {
const numberStr = number.toString()
return numberStr.includes('11')
}
function displayFly(number) {
return `<div style="position: absolute; top: 169px; left: 340px;">
<svg width="38" height="27" viewBox="0 0 38 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.00001L6.29443e-06 9L0 27L19 27H38L38 9.00001H19Z" fill="#070609"/>
<rect x="19" width="19" height="18" fill="white" fill-opacity="0.5"/>
</svg>
</div>`
}
function c111(number) {
const numberStr = number.toString()
return numberStr.includes('111')
}
function displayFlysEarring(number) {
return `<div style="position: absolute; top: 178px; left: 378px;">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="18" width="18" height="18" transform="rotate(-180 18 18)" fill="#FFC700"/>
</svg>
</div>`
}
function c1111(number) {
const numberStr = number.toString()
return numberStr.includes('1111')
}
function displayFlysAlienEarring(number) {
return `<div style="position: absolute; top: 178px; left: 378px;">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="18" width="18" height="18" transform="rotate(-180 18 18)" fill="#49EFEF"/>
</svg>
</div>`
}
function c11111(number) {
const numberStr = number.toString()
return numberStr.includes('11111')
}
function displayFlysLaserEyes(number) {
return `<div style="position: absolute; top: 178px; left: 0;">
<svg width="340" height="19" viewBox="0 0 340 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="340" height="18.5" fill="#FD1935"/>
</svg>
</div>`
}
function c8a8(number) {
const numberStr = number.toString()
const count = (numberStr.match(/8/g) || []).length
return count >= 2 ? "c8a8" : null
}
function displayBowR(number) {
return `<div style="position: absolute; top: 138px; left: 87px;">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 36V0L18 14L18 22L0 36Z" fill="#FF94D4"/>
<path d="M36 9.43221e-07L36 36L18 22L18 14L36 9.43221e-07Z" fill="#FF94D4"/>
</svg>
</div>`
}
function c88(number) {
const numberStr = number.toString()
return numberStr.includes('88')
}
function displayBowL(number) {
return `<div style="position: absolute; top: 138px; left: 302px;">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 36V0L18 14L18 22L0 36Z" fill="#FF94D4"/>
<path d="M36 9.43221e-07L36 36L18 22L18 14L36 9.43221e-07Z" fill="#FF94D4"/>
</svg>
</div>`
}
function c888(number) {
const numberStr = number.toString()
return numberStr.includes('888')
}
function displayBowTail(number) {
return `<div style="position: absolute; top: 293px; left: 28px;">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 36V0L18 18L0 36Z" fill="#FF94D4"/>
<path d="M36 9.43221e-07L36 36L18 18L36 9.43221e-07Z" fill="#FF94D4"/>
</svg>
</div>`
}
function c8888(number) {
const numberStr = number.toString()
return numberStr.includes('8888')
}
function displayAlienBowTie(number) {
return `<div style="position: absolute; top: 365px; left: 123px;">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 36V0L18 18L0 36Z" fill="#49EFEF"/>
<path d="M36 9.43221e-07L36 36L18 18L36 9.43221e-07Z" fill="#49EFEF"/>
</svg>
</div>`
}
function c88888(number) {
const numberStr = number.toString()
return numberStr.includes('88888')
}
function displayDoubleAlienBowTie(number) {
return `<div style="position: absolute; top: 365px; left: 177px;">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 36V0L18 18L0 36Z" fill="#49EFEF"/>
<path d="M36 9.43221e-07L36 36L18 18L36 9.43221e-07Z" fill="#49EFEF"/>
</svg>
</div>`
}
function cp6(number) {
const numberStr = number.toString()
// Loop through the number string
for (let i = 0; i <= numberStr.length - 6; i++) { // Ensure there are at least 6 characters to check
const substring = numberStr.substring(i, i + 6) // Get the substring of 6 characters
// Check if the substring is a palindrome
if (substring === substring.split('').reverse().join('')) {
return "cp6"
}
}
return null
}
function displayAlienDiamond(number) {
return `<div style="position: absolute; top: 358px; left: 321px;">
<svg width="67" height="68" viewBox="0 0 67 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="33.2734" y="0.546875" width="47.0569" height="47.0569" transform="rotate(45 33.2734 0.546875)" fill="#49EFEF"/>
</svg>
</div>`
}
function c9a9(number) {
const numberStr = number.toString()
const count = (numberStr.match(/9/g) || []).length
return count >= 2 ? "c9a9" : null
}
function displayTrout(number) {
return `<div style="position: absolute; top: 318px; left: 219px;">
<svg width="176" height="76" viewBox="0 0 176 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M176 0V76L137 38L176 0Z" fill="#0082BA"/>
<rect width="137" height="76" rx="38" fill="#0D8DCE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 0C17.0132 0 0 17.0132 0 38H137C137 17.0132 119.987 0 99 0H38Z" fill="#0082BA"/>
</svg>
</div>`
}
function c99(number) {
const numberStr = number.toString()
return numberStr.includes('99')
}
function displaySalmon(number) {
return `<div style="position: absolute; top: 318px; left: 183px;">
<svg width="212" height="76" viewBox="0 0 212 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M212 0V76L173 38L212 0Z" fill="#0082BA"/>
<rect width="173" height="76" rx="38" fill="#FF906D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 0C17.0132 0 0 17.0132 0 38H173C173 17.0132 155.987 0 135 0H38Z" fill="#0082BA"/>
</svg>
</div>`
}
function c999(number) {
const numberStr = number.toString()
return numberStr.includes('999')
}
function displayAlienFish(number) {
return `<div style="position: absolute; top: 318px; left: 183px;">
<svg width="212" height="76" viewBox="0 0 212 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M212 0V76L173 38L212 0Z" fill="#49EFEF"/>
<rect width="173" height="76" rx="38" fill="#66F8F8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 0C17.0132 0 0 17.0132 0 38H173C173 17.0132 155.987 0 135 0H38Z" fill="#49EFEF"/>
</svg>
</div>`
}
function c9999(number) {
const numberStr = number.toString()
return numberStr.includes('9999')
}
function displayGiantAlienFish(number) {
return `<div style="position: absolute; top: 318px; left: 123px;">
<svg width="272" height="76" viewBox="0 0 272 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M272 0V76L233 38L272 0Z" fill="#49EFEF"/>
<rect width="233" height="76" rx="38" fill="#66F8F8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 0C17.0132 0 0 17.0132 0 38H233C233 17.0132 215.987 0 195 0H38Z" fill="#49EFEF"/>
</svg>
</div>`
}
function cs5(number) {
const numberStr = number.toString()
for (let i = 0; i < numberStr.length - 4; i++) { // Ensure there are at least 3 characters to check
const substring = numberStr.substring(i, i + 5) // Get the substring of 3 characters
if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
const subNum = parseInt(substring, 10)
const s = Math.sqrt(subNum)
if (s === Math.floor(s)) { // Check if s is a perfect square
return "cs5d" // Return a different identifier for 3-digit perfect squares
}
}
}
return null
}
function displayYarn(number) {
return `<div style="position: absolute; top: 20px; left: 20px;">
<svg width="225" height="200" viewBox="0 0 225 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="33" cy="33" r="33" fill="#C53DF5" transform="rotate(90, 33, 33)"/>
<rect x="35" y="57" width="190" height="9" fill="#C53DF5" transform="rotate(90, 33, 33)"/>
</svg>
</div>`;
}
// Function to check if a number contains a 4-digit square as a substring
function containsFourDigitSquare(number) {
const numberStr = number.toString()
for (let i = 0; i <= numberStr.length - 4; i++) {
const substring = numberStr.substring(i, i + 4)
const num = parseInt(substring, 10)
if (Math.sqrt(num) % 1 === 0) {
return true
}
}
return false
}
// Determine the range for laser eyes based on the last four digits
function getLaserEyeRange(lastFourDigits) {
if (lastFourDigits < 4800) {
return "laser_right"
} else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
return "laser_crossed"
} else {
return "laser_left"
}
}
// Function to generate SVG for laser eyes based on direction
function displayLaserEyes(eyeDirection) {
let svgHTML = ""
switch (eyeDirection) {
case "laser_left":
svgHTML = `<div style="position: absolute; top: 215px; left: 0;">
<svg width="284" height="19" viewBox="0 0 284 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="284" height="18.5" fill="#FF7C2C"/>
</svg>
</div>`
break
case "laser_right":
svgHTML = `<div style="position: absolute; top: 215px; left: 163px;">
<svg width="262" height="19" viewBox="0 0 262 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="262" height="18.5" fill="#FF7C2C"/>
</svg>
</div>`
break
case "laser_crossed":
svgHTML = `<div style="position: absolute; top: 215px; left: 0;">
<svg width="425" height="19" viewBox="0 0 425 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="163" height="18.5" fill="#FF7C2C"/>
<rect x="284" width="141" height="18.5" fill="#FF7C2C"/>
</svg>
</div>`
break
}
return svgHTML
}
function cs6(number) {
const numberStr = number.toString()
for (let i = 0; i < numberStr.length - 5; i++) { // Ensure there are at least 3 characters to check
const substring = numberStr.substring(i, i + 6) // Get the substring of 3 characters
if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
const subNum = parseInt(substring, 10)
const s = Math.sqrt(subNum)
if (s === Math.floor(s)) { // Check if s is a perfect square
return "cs3d" // Return a different identifier for 3-digit perfect squares
}
}
}
return null
}
function displayLaserPointer(number) {
return `<div style="position: absolute; top: 293px; left: 284px;">
<svg width="141" height="18" viewBox="0 0 141 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="52" y="18" width="52" height="18" transform="rotate(-180 52 18)" fill="#E7E5F7"/>
<rect x="141" y="18" width="89" height="18" transform="rotate(-180 141 18)" fill="#FF7C2C"/>
</svg>
</div>`
}
function cf3(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 3-digit Fibonacci numbers
while (b < 1000) { // 1000 is the smallest 4-digit number
if (b >= 100) { // 100 is the smallest 3-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 3-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 3; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 3)
if (fibNumbers.has(substring)) {
return "cf3"
}
}
return null
}
function displayBloodDrips(number) {
return `<div style="position: absolute; top: 270px; left: 145px;">
<svg width="36" height="90" viewBox="0 0 36 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path transform="rotate(-180 18 18)" fill-rule="evenodd" clip-rule="evenodd" d="M18 0C11.385 0 6.08333 5.30167 6.08333 11.9167C6.08333 22.8467 18 36 18 36C18 36 29.9167 22.8467 29.9167 11.9167C29.9167 5.30167 24.615 0 18 0Z" fill="#FF1E39"/>
<path transform="rotate(-180 18 72)" fill-rule="evenodd" clip-rule="evenodd" d="M18 54C11.385 54 6.08333 59.3017 6.08333 65.9167C6.08333 76.8467 18 90 18 90C18 90 29.9167 76.8467 29.9167 65.9167C29.9167 59.3017 24.615 54 18 54Z" fill="#FF1E39"/>
</svg>
</div>`;
}
function cf4(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 4-digit Fibonacci numbers
while (b < 10000) { // 10000 is the smallest 5-digit number
if (b >= 1000) { // 1000 is the smallest 4-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 4-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 4; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 4)
if (fibNumbers.has(substring)) {
return "cf4" // Return identifier for 4-digit Fibonacci numbers
}
}
return null
}
function displayHalo(number) {
return `<div style="position: absolute; top: 32px; left: 146px;">
<svg width="132" height="18" viewBox="0 0 132 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="132" height="18" fill="#56FFD4"/>
</svg>
</div>`
}
function cf5(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 5-digit Fibonacci numbers
while (b < 100000) { // 100000 is the smallest 6-digit number
if (b >= 10000) { // 10000 is the smallest 5-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 5-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 5; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 5)
if (fibNumbers.has(substring)) {
return "cf5"
}
}
return null
}
function displayBrowPiercing(number) {
return `<div style="position: absolute; top: 174px; left: 320px;">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="18" width="18" height="18" transform="rotate(-180 18 18)" fill="#FFB800"/>
</svg>
</div>`
}
function cf6(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 6-digit Fibonacci numbers
while (b < 1000000) { // 1000000 is the smallest 7-digit number
if (b >= 100000) { // 100000 is the smallest 6-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 6-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 6; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 6)
if (fibNumbers.has(substring)) {
return "cf6"
}
}
return null
}
function displayHammer(number) {
return `<div style="position: absolute; top: 160px; left: 341px;">
<svg width="84" height="265" viewBox="0 0 84 265" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="33" y="265" width="229" height="18" transform="rotate(-90 33 265)" fill="#5A4545"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M48 0H0V36H48H84C84 16.1177 67.8822 0 48 0Z" fill="#C6C2D2"/>
</svg>
</div>`
}
function cf7(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 6-digit Fibonacci numbers
while (b < 10000000) { // 10000000 is the smallest 8-digit number
if (b >= 1000000) { // 1000000 is the smallest 7-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 6-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 7; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 7)
if (fibNumbers.has(substring)) {
return "cf7"
}
}
return null
}
function displayVial(number) {
return `<div style="position: absolute; top: 251px; left: 338px;">
<svg width="36" height="174" viewBox="0 0 36 174" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="36" width="174" height="36" transform="rotate(90 36 0)" fill="white" fill-opacity="0.5"/>
<rect x="36" y="67" width="107" height="36" transform="rotate(90 36 67)" fill="#A2FF00"/>
</svg>
</div>`
}
function m12(number) {
return number % 12 === 0
}
function displayRainbowCollar(number) {
return `<div style="position: absolute; top: 347px; left: 105px;">
<svg width="84" height="20" viewBox="0 0 84 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="12" height="20" fill="#8B00FF"/> <!-- Violet -->
<rect x="12" width="12" height="20" fill="#4B0082"/> <!-- Indigo -->
<rect x="24" width="12" height="20" fill="#0000FF"/> <!-- Blue -->
<rect x="36" width="12" height="20" fill="#00FF00"/> <!-- Green -->
<rect x="48" width="12" height="20" fill="#FFFF00"/> <!-- Yellow -->
<rect x="60" width="12" height="20" fill="#FF7F00"/> <!-- Orange -->
<rect x="72" width="12" height="20" fill="#FF0000"/> <!-- Red -->
</svg>
</div>`;
}
function m13(number) {
return number % 13 === 0
}
function displayPearls(number) {
return `<div style="position: absolute; top: 347px; left: 105px;">
<svg width="90" height="54" viewBox="0 0 90 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="18" height="18" fill="white"/>
<rect x="18" y="18" width="18" height="18" fill="white"/>
<rect x="36" y="36" width="18" height="18" fill="white"/>
<rect x="54" y="18" width="18" height="18" fill="white"/>
<rect x="72" width="18" height="18" fill="white"/>
</svg>
</div>`
}
function m14(number) {
return number % 14 === 0
}
function displayOrangeCollar(number) {
return `<div style="position: absolute; top: 365px; left: 105px;">
<svg width="84" height="18" viewBox="0 0 90 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="18" fill="#FF835A"/>
<rect x="18" width="20" height="18" fill="#FF6F41"/>
<rect x="36" width="20" height="18" fill="#FF6533"/>
<rect x="54" width="20" height="18" fill="#FF5620"/>
<rect x="72" width="18" height="18" fill="#FF490F"/>
</svg>
</div>`
}
function m15(number) {
return number % 15 === 0
}
function displayHeadBand(number) {
return `<div style="position: absolute; top: 156px; left: 105px;">
<svg width="215" height="18" viewBox="0 0 215 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="215" y="18" width="20" height="18" transform="rotate(-180 215 18)" fill="#FFC5B4"/>
<rect x="197" y="18" width="20" height="18" transform="rotate(-180 197 18)" fill="#FFA489"/>
<rect x="179" y="18" width="20" height="18" transform="rotate(-180 179 18)" fill="#FF876D"/>
<rect x="161" y="18" width="20" height="18" transform="rotate(-180 161 18)" fill="#FF7359"/>
<rect x="143" y="18" width="20" height="18" transform="rotate(-180 143 18)" fill="#FF5D45"/>
<rect width="20" height="18" fill="#FFC5B4"/>
<rect x="18" width="20" height="18" fill="#FFA489"/>
<rect x="36" width="20" height="18" fill="#FF876D"/>
<rect x="54" width="20" height="18" fill="#FF7359"/>
<rect x="72" width="20" height="18" fill="#FF5D45"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M107 0H90V18H107H108H125V0H108H107Z" fill="#FF4910"/>
</svg>
</div>`;
}
function m16(number) {
return number % 16 === 0
}
function displaySunHat(number) {
return `<div style="position: absolute; top: 120px; left: 68.5px;">
<svg width="287" height="37" viewBox="0 0 287 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36 17.4999L36 0L252 9.34601e-05L252 17.5L287 17.5V36.5L0 36.4999L8.30517e-06 17.4999L36 17.4999Z" fill="#CDDC39"/>
</svg>
</div>`
}
function m69(number) {
return number % 69 === 0
}
function displaySpikeCollar(number) {
return `<div style="position: absolute; top: 383px; left: 87px;">
<svg width="108" height="18" viewBox="0 0 108 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 0L18 17.9998H62.9996L62.9998 17.9998L107.999 17.9998L107.999 2.36039e-06L62.9996 0H18Z" fill="#2E2D34"/>
<path d="M17.9998 0L0 17.9998H17.9998V0Z" fill="#EDEAFC"/>
<path d="M89.9998 0L72 17.9998H89.9998V0Z" fill="#EDEAFC"/>
<path d="M53.9998 0L36 17.9998H53.9998V0Z" fill="#EDEAFC"/>
</svg>
</div>`
}
function m11(number) {
return number % 11 === 0
}
function displayMouse(number) {
return `<div style="position: absolute; top: 318px; left: 224px;">
<svg width="201" height="38" viewBox="0 0 201 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 0C8.50659 0 0 8.50659 0 19C0 29.4934 8.50659 38 19 38L44 38L70 38L201 38V29L86.1586 29C87.9599 26.0954 89 22.6692 89 19C89 8.50659 80.4934 0 70 0L19 0Z" fill="#9E9E9E"/>
</svg>
</div>`
}
function m888(number) {
return number % 888 === 0
}
function displayAlienMouse(number) {
return `<div style="position: absolute; top: 318px; left: 224px;">
<svg width="201" height="38" viewBox="0 0 201 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 0C8.50659 0 0 8.50659 0 19C0 29.4934 8.50659 38 19 38L44 38L70 38L201 38V29L86.1586 29C87.9599 26.0954 89 22.6692 89 19C89 8.50659 80.4934 0 70 0L19 0Z" fill="#49efef"/>
</svg>
</div>`
}
function ce7(number) {
let numberStr = number.toString()
let exponent = 7
let power = 1
while (true) {
let exponentStr = Math.pow(exponent, power).toString()
if (numberStr.includes(exponentStr)) {
return true
}
if (Math.pow(exponent, power) > number) break // Stop if the exponent value exceeds the number
power++
}
return false
}
function displayNightVision() {
return `<div style="position: absolute; top: 195px; left: 126px;">
<svg width="194" height="38" viewBox="0 0 194 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="74" y="38" width="74" height="38" transform="rotate(-180 74 38)" fill="#c4b1ab"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M121 0H193.469L194 0.53125V37.5391L193.539 38H121V0Z" fill="#c4b1ab "/>
</svg>
</div>`
}
//fixed elements
function generateHtmlBasedOnBlockNumber(blockNumber) {
const lookDir = getLook(blockNumber)
const lookHtml = generateLookSvg(lookDir)
let wildhumannip = c420(blockNumber) ? displaywildhumannip() : ""
let cig = c4a0(blockNumber) ? displaycig() : ""
let earring = c0(blockNumber) ? displayEarring() : ""
let earringR = c00(blockNumber) ? displayEarringR() : ""
let alienEarring = c000(blockNumber) ? displayAlienEarring() : ""
let alienEarringR = c0000(blockNumber) ? displayAlienEarringR() : ""
let alienTiara = c00000(blockNumber) ? displayAlienTiara() : ""
let fly = c11(blockNumber) ? displayFly() : ""
let flysEarring = c111(blockNumber) ? displayFlysEarring() : ""
let flysAlienEarring = c1111(blockNumber) ? displayFlysAlienEarring() : ""
let flysLaserEyes = c11111(blockNumber) ? displayFlysLaserEyes() : ""
let bowR = c8a8(blockNumber) ? displayBowR() : ""
let bowL = c88(blockNumber) ? displayBowL() : ""
let bowTail = c888(blockNumber) ? displayBowTail() : ""
let bowAlienBowTie = c8888(blockNumber) ? displayAlienBowTie() : ""
let bowDoubleAlienBowTie = c88888(blockNumber) ? displayDoubleAlienBowTie() : ""
let alienDiamond = cp6(blockNumber) ? displayAlienDiamond() : ""
let yarn = cs5(blockNumber) ? displayYarn() : ""
let laserPointer = cs6(blockNumber) ? displayLaserPointer() : ""
let trout = c9a9(blockNumber) ? displayTrout() : ""
let salmon = c99(blockNumber) ? displaySalmon() : ""
let alienFish = c999(blockNumber) ? displayAlienFish() : ""
let giantAlienFish = c9999(blockNumber) ? displayGiantAlienFish() : ""
let bloodDrips = cf3(blockNumber) ? displayBloodDrips() : ""
let browPiercing = cf4(blockNumber) ? displayBrowPiercing() : ""
let halo = cf5(blockNumber) ? displayHalo() : ""
let hammer = cf6(blockNumber) ? displayHammer() : ""
let vial = cf7(blockNumber) ? displayVial() : ""
let mouse = m11(blockNumber) ? displayMouse() : ""
let alienMouse = m888(blockNumber) ? displayAlienMouse() : ""
let nightVision = ce7(blockNumber) ? displayNightVision() : ""
let rainbowCollar = m12(blockNumber) ? displayRainbowCollar() : ""
let pearls = m13(blockNumber) ? displayPearls() : ""
let orangeCollar = m14(blockNumber) ? displayOrangeCollar() : ""
let headBand = m15(blockNumber) ? displayHeadBand() : ""
let sunHat = m16(blockNumber) ? displaySunHat() : ""
let spikeCollar = m69(blockNumber) ? displaySpikeCollar() : ""
const containsSquare = containsFourDigitSquare(blockNumber)
const eyeDirection = getLaserEyeRange(parseInt(blockNumber.toString().slice(-4)))
const laserEyes = containsSquare ? displayLaserEyes(eyeDirection) : ""
const svgsForDigits = generateSvgForDigits(blockNumber)
const svgsForDigits2 = generateSvgForDigits2(blockNumber)
//background
const background = `<div style="position: absolute; top: 0px; left: 0px;">
<svg width="425" height="425" viewBox="0 0 425 425" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="425" height="425" fill="#242329"/>
</svg>
</div>`;
//mouth
const mouth = `<div style="position: absolute; top: 288px; left: 194px;">
<svg width="113" height="35" viewBox="0 0 113 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M60 0L90 30V0H113V35H0V0L30 30V0H60Z" fill="#070609"/>
</svg>
</div>`
//eyes
const eyes = `
<div style="position: absolute; top: 195px; left: 126px;">
<svg width="194" height="38" viewBox="0 0 194 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="74" y="38" width="74" height="38" transform="rotate(-180 74 38)" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M121 0H193.469L194 0.53125V37.5391L193.539 38H121V0Z" fill="white"/>
</svg>
</div>`
//teeth
const teeth = `
<div style="position: absolute; top: 288px; left: 189px;">
<svg width="100" height="15" viewBox="0 0 100 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="15" fill="#FFFFFF"/>
</svg>
</div>`
//construction
const htmlContent = background + earring + alienEarring + earringR + alienEarringR + eyes + nightVision + lookHtml + teeth + svgsForDigits2 + mouth + svgsForDigits + cig + wildhumannip + fly + flysEarring + flysAlienEarring + headBand + sunHat + bowL + bowR + bowTail + rainbowCollar + orangeCollar + spikeCollar + pearls + bowAlienBowTie + bowDoubleAlienBowTie + trout + salmon + alienFish + giantAlienFish + yarn + laserPointer + halo + bloodDrips + hammer + vial + mouse + browPiercing + alienMouse + alienDiamond + alienTiara + flysLaserEyes + laserEyes
document.getElementById('natwildhumanviewer').innerHTML = htmlContent
}
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>