$dmt-nat
Recursive demonstration
To create UNAT mint inscriptions with rendered content, the following represents an example that utilized recursive inscriptions. Feel free to use the open source script to your advantage to create your own UNAT.
Example
The mint inscription of a $dmt-nat looks like the following:
Mint Inscription
{
"p": "tap",
"op": "dmt-mint",
"dep": "4d967af36dcacd7e6199c39bda855d7b1b37268f4c8031fed5403a99ac57fe67i0",
"tick": "nat",
"blk": "319924"
}If rendered properly, the inscription will appear like the following:
Rendering Mints as Content
Mint inscriptions use the "dep" attribute in the JSON to point back to the $dmt-nat deployment inscription that looks like the following:
Deployment Inscription
{
"p": "tap",
"op": "dmt-deploy",
"elem": "63b5bd2e28c043c4812981718e65d202ab8f68c0f6a1834d9ebea49d8fac7e62i0",
"tick": "nat",
"dt": "n",
"id": "61756c3e2dbcfbdb889f7176014e583e94800721a7379a616ec2c031563a5000i0"
}The deployment inscription above has an "id" attribute that points back to an on-chain script where an algorithm is inscribed as JavaScript, and instantiated from multiple inscriptions with unique seeds from the mint inscription above. The unique seed being the block height inside the mint inscription.
The following script was used to render the images that make up the UNAT for $dmt-nat mints. Each mint inscription is a unique art piece rendered from Bitcoin's block data. Recursive images were used in this script and serves as a starting point for any creator to use this script to render their own content.
<canvas id="root" width="256" height="256"></canvas>
<input id="input" type="number" style="display:none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
const canvas = document.getElementById('root')
const ctx = canvas.getContext('2d')
canvas.parentElement.style.width = '100%'
canvas.parentElement.style.height = '100%'
canvas.parentElement.style.padding = '0px'
canvas.parentElement.style.margin = '0px'
const orgWidth = 462
const orgHeight = 462
let blockNumber = '0'
let scaleW = 0
let scaleH = 0
let offsetX = 0
let offsetY = 0
let background = new Image()
background.onload = redraw
background.src = '/content/45a7abf8aeab54c8b1ae87e05e502fd13b13984cc60101fd862c954b60cce678i0'
let center = new Image()
center.onload = redraw
let orb0 = new Image()
orb0.onload = redraw
let orb60 = new Image()
orb60.onload = redraw
let orb120 = new Image()
orb120.onload = redraw
let orb180 = new Image()
orb180.onload = redraw
let orb240 = new Image()
orb240.onload = redraw
let orb300 = new Image()
orb300.onload = redraw
window.addEventListener('resize', resize, true)
resize()
// Retrieve mint inscription id
let mintText = document.getElementById('preview').getAttribute('mint')
// Check no mint provided
if(mintText.includes('MINT_INSCRIPTION_ID')) {
let input = document.getElementById('input')
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 update() {
center.src = getCent(getChar(blockNumber, 0))
orb0.src = getOrb(getChar(blockNumber, 1))
orb180.src = getOrb(getChar(blockNumber, 2))
orb60.src = getOrb(getChar(blockNumber, 3))
orb240.src = getOrb(getChar(blockNumber, 4))
orb120.src = getOrb(getChar(blockNumber, 5))
orb300.src = getOrb(getChar(blockNumber, 6))
}
function resize(event) {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
scaleW = canvas.width / orgWidth
scaleH = canvas.height / orgHeight
offsetX = 0
offsetY = 0
if(scaleH < scaleW) {
scaleW = scaleH
offsetX = (canvas.width - orgWidth * scaleW) / 2
}
else {
scaleH = scaleW
offsetY = (canvas.height - orgHeight * scaleH) / 2
}
redraw('resize')
}
function redraw(item) {
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawImageScaled(background, orgWidth/2, orgHeight/2)
drawLineScaled(getColor(getChar(blockNumber, 7)), 231, 231, 231, 98)
drawLineScaled(getColor(getChar(blockNumber, 9)), 231, 231, 341, 158)
drawLineScaled(getColor(getChar(blockNumber, 11)), 231, 231, 341, 291)
drawLineScaled(getColor(getChar(blockNumber, 8)), 231, 231, 231, 364)
drawLineScaled(getColor(getChar(blockNumber, 10)), 231, 231, 121, 291)
drawLineScaled(getColor(getChar(blockNumber, 12)), 231, 231, 121, 158)
drawArcScaled(getColor(getChar(blockNumber, 13)), 231, 230, 132, 0, 60)
drawArcScaled(getColor(getChar(blockNumber, 15)), 231, 230, 132, 60, 120)
drawArcScaled(getColor(getChar(blockNumber, 17)), 231, 230, 132, 120, 180)
drawArcScaled(getColor(getChar(blockNumber, 14)), 231, 230, 132, 180, 240)
drawArcScaled(getColor(getChar(blockNumber, 16)), 231, 230, 132, 240, 300)
drawArcScaled(getColor(getChar(blockNumber, 18)), 231, 230, 132, 300, 0)
drawImageScaled(center, 231, 231)
drawImageScaled(orb0, 231, 100)
drawImageScaled(orb60, 341, 158)
drawImageScaled(orb120, 344, 294)
drawImageScaled(orb180, 231, 362)
drawImageScaled(orb240, 118, 294)
drawImageScaled(orb300, 121, 158)
}
function drawArcScaled(color, x, y, radius, startDeg, endDeg) {
ctx.strokeStyle = color
ctx.lineWidth = 6 * scaleW
ctx.beginPath()
ctx.arc(offsetX + x * scaleW, offsetY + y * scaleH, radius * scaleH, (-90 + startDeg) * Math.PI/180, (-90 + endDeg) * Math.PI/180)
ctx.stroke()
}
function drawLineScaled(color, x1, y1, x2, y2) {
ctx.strokeStyle = color
ctx.lineWidth = 6 * scaleW
ctx.beginPath()
ctx.moveTo(offsetX + x1 * scaleW, offsetY + y1 * scaleH)
ctx.lineTo(offsetX + x2 * scaleW, offsetY + y2 * scaleH)
ctx.stroke()
}
function drawImageScaled(img, x, y) {
if(img == null) return
ctx.drawImage(img, offsetX + (x - img.width/2) * scaleW, offsetY + (y - img.height/2) * scaleH, scaleW * img.width, scaleH * img.height)
}
function getChar(str, char) {
return char >= str.length ? '0' : str.charAt(str.length - 1 - char)
}
function getCent(char) {
switch(char) {
case '0': // red
default:
return '/content/4ccae73d757bc81567c08b178dadc0f941ca5b590d8872d20b91b9aa0026c094i0'
case '1': // orange
return '/content/071839e2b743d6f0dde610318a94ea31688ad1ef7a466e1e49effd0bcbbc5ec2i0'
case '2': // green
return '/content/57389900ae0d2f5e78a3f0837f3e2ca807a6564f02c1e91c7547087551eb6d37i0'
case '3': // blue
return '/content/e7f83ec5fb95780f91a6ab9de90b5a00161521b2972abc32abe3726d559b17f8i0'
case '4': // yellow
return '/content/f76f76b594c5fa4f249b262e5bc68ee86a7a57afa90805843da0de64011dba39i0'
case '5': // purple
return '/content/255c0405421faf818b873b2a28dad78e06412763cd7b9c008223bde37df16d6ai0'
case '6': // gray
return '/content/dc8586612e28d1147aaa4bd059b18e479ee81c51bd33120f9234a2623fce6d2di0'
case '7': // light blue
return '/content/a4e15da4d0fe1590d0447f4bebf1ac6503e2d800473d8417b866c8db79e86fbci0'
case '8': // white
return '/content/b5dea9454f94220b826e9a40a9550b06fdaeda99a7dc125506511744de881237i0'
case '9': // black
return '/content/497b17636cf3410ed01853a203f32bd19c73deadd13fa583706e18bbc84d0805i0'
}
}
function getOrb(char) {
switch(char) {
case '0': // white
default:
return '/content/a44586031e19333c2ddeb3857ac8074897b4b7a9b5eb357cac02d9f960cc6087i0'
case '1': // red
return '/content/b641bfec1b6bec4f1a2ec26c269499dbad6192efbefff022e9a13d1436f435f2i0'
case '2': // green
return '/content/7416640b32d0423396374a9ea8da123b227ef0b99fcaa3f9b95de8a01f6fba35i0'
case '3': // blue
return '/content/9204e4f746de0a0e33fbd2454592473dc7aa027f251ac4147e4f96af91cad394i0'
case '4': // yellow
return '/content/2af78ab55427c0dffa501df64d8b9a5465a88e604bc878d33a1aafd9aeaf94bdi0'
case '5': // purple
return '/content/71cce084b6c1e01899e1917e7dc550053018629a930a3220382efabecb06a203i0'
case '6': // gray
return '/content/333ca2ee2b5399816a9b6eb2947ec19ab8a8a30470440e39bb4ce193ca24c2dfi0'
case '7': // light blue
return '/content/040378d2779d7d7f2a3df6d7de31e0e42f473c6b8428f070d94392ffa4ef196ci0'
case '8': // orange
return '/content/f20842305e554aa10e5266cf4cc119083c2a4928114195f40740075e4b70142ei0'
case '9': // black
return '/content/8ba3ff03dbc33a8d45b294a79ca91e9c8c2c8fc03a363f98e5c517422f49e13ai0'
}
}
function getColor(character) {
switch (character) {
case '0': return 'white'
case '1': return 'red'
case '2': return 'green'
case '3': return 'blue'
case '4': return 'yellow'
case '5': return 'purple'
case '6': return 'gray'
case '7': return 'lightblue'
case '8': return 'orange'
case '9': return 'black'
}
}
</script>Last updated
