30:T1ae9,mrpgp = { var mrpgp = { init: function(){ // window.addEventListener('load', function(){ // mrpgp.drawAvatar(); // }) mrpgp.drawAvatar() }, drawAvatar: function(){ const canvas = document.getElementById('avatar'); const w = canvas.width = 320; const h = canvas.height = 320; const ctx = canvas.getContext('2d'); // sky ctx.fillStyle = 'lightblue'; ctx.fillRect(0, 0, w, h/2); // earth ctx.fillStyle = 'green'; ctx.fillRect(0, h/2, w, h); //var img = document.getElementById('tileset'); var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); // img.src = 'https://cdn.glitch.com/bf17255d-7747-4524-8b01-fa0c957c7232%2FDungeonCrawl_ProjectUtumnoTileset.png?1522966780158'; img.src = imageSrc //console.log(img.src) var imgWidth = 2048; var imgHeight = 1536; var baseWidth = 32; var baseHeight = 32; img.onload = () => { ctx.imageSmoothingEnabled = false; // body var randomBodyIdx = Math.floor(Math.random() * mrpgp.data.bodies.length); var randomBody = mrpgp.data.bodies[randomBodyIdx]; ctx.drawImage(img, baseWidth * randomBody.x, baseHeight * randomBody.y, baseWidth, baseHeight, 0,0, 320,320); // clothing var randomClothingIdx = Math.floor(Math.random() * mrpgp.data.clothing.length); var randomClothing = mrpgp.data.clothing[randomClothingIdx] ctx.drawImage(img, baseWidth * randomClothing.x, baseHeight * randomClothing.y, baseWidth, baseHeight, 0,0, 320,320); // weapons var randomWeaponIdx = Math.floor(Math.random() * mrpgp.data.weapons.length); var randomWeapon = mrpgp.data.weapons[randomWeaponIdx] ctx.drawImage(img, baseWidth * Math.floor(Math.random() * 63), baseHeight * ( Math.floor(Math.random() * 3) + 36), baseWidth, baseHeight, 0,0, 320,320); // make a downloadable image var dlImg = canvas.toDataURL("image/png"); var dlLink = document.getElementById("downloadable"); dlLink.download = "my-rpg-persona.png"; dlLink.href = dlImg; } }, data: { bodies: [ {x: 21, y: 30}, {x: 22, y: 30}, {x: 23, y: 30}, {x: 24, y: 30}, {x: 25, y: 30}, {x: 26, y: 30}, {x: 27, y: 30}, {x: 28, y: 30}, {x: 29, y: 30}, {x: 30, y: 30}, {x: 31, y: 30}, {x: 32, y: 30}, {x: 33, y: 30}, {x: 34, y: 30}, {x: 35, y: 30}, {x: 36, y: 30}, {x: 37, y: 30}, {x: 38, y: 30}, {x: 39, y: 30}, {x: 40, y: 30}, {x: 41, y: 30}, {x: 42, y: 30}, {x: 43, y: 30}, {x: 44, y: 30}, {x: 45, y: 30}, {x: 46, y: 30}, {x: 47, y: 30}, {x: 48, y: 30}, {x: 49, y: 30}, {x: 50, y: 30}, {x: 51, y: 30}, {x: 52, y: 30}, {x: 53, y: 30}, {x: 54, y: 30}, {x: 55, y: 30}, {x: 56, y: 30}, {x: 57, y: 30}, {x: 58, y: 30}, {x: 59, y: 30}, {x: 60, y: 30}, {x: 61, y: 30}, {x: 62, y: 30}, {x: 63, y: 30}, {x: 0, y: 31}, {x: 1, y: 31}, {x: 2, y: 31}, {x: 3, y: 31}, {x: 4, y: 31}, {x: 5, y: 31}, {x: 6, y: 31}, {x: 7, y: 31}, {x: 8, y: 31}, {x: 9, y: 31}, {x: 10, y: 31}, {x: 11, y: 31}, {x: 12, y: 31}, {x: 13, y: 31}, {x: 14, y: 31}, {x: 15, y: 31}, {x: 16, y: 31}, {x: 17, y: 31}, {x: 18, y: 31}, {x: 19, y: 31}, {x: 20, y: 31}, {x: 21, y: 31}, {x: 22, y: 31}, {x: 23, y: 31}, {x: 24, y: 31}, {x: 25, y: 31}, {x: 26, y: 31}, {x: 27, y: 31}, {x: 28, y: 31}, {x: 29, y: 31}, {x: 30, y: 31}, {x: 31, y: 31}, {x: 32, y: 31}, {x: 33, y: 31}, {x: 34, y: 31}, {x: 35, y: 31}, {x: 36, y: 31}, {x: 37, y: 31}, {x: 38, y: 31}, {x: 39, y: 31}, {x: 40, y: 31}, {x: 41, y: 31}, ], clothing: [ {x: 53 , y: 31 }, {x: 54 , y: 31 }, {x: 55 , y: 31 }, {x: 56 , y: 31 }, {x: 57 , y: 31 }, {x: 58 , y: 31 }, {x: 59 , y: 31 }, {x: 60 , y: 31 }, {x: 61 , y: 31 }, {x: 62 , y: 31 }, {x: 63 , y: 31 }, {x: 0 , y: 32 }, {x: 1 , y: 32 }, {x: 2 , y: 32 }, {x: 3 , y: 32 }, {x: 4 , y: 32 }, {x: 5 , y: 32 }, {x: 6 , y: 32 }, {x: 7 , y: 32 }, {x: 8 , y: 32 }, {x: 9 , y: 32 }, {x: 10 , y: 32 }, {x: 11 , y: 32 }, {x: 12 , y: 32 }, {x: 13 , y: 32 }, {x: 14 , y: 32 }, {x: 15 , y: 32 }, {x: 16 , y: 32 }, {x: 17 , y: 32 }, {x: 18 , y: 32 }, {x: 19 , y: 32 }, {x: 20 , y: 32 }, {x: 21 , y: 32 }, {x: 22 , y: 32 }, {x: 23 , y: 32 }, {x: 24 , y: 32 }, {x: 25 , y: 32 }, {x: 26 , y: 32 }, {x: 27 , y: 32 }, {x: 28 , y: 32 }, {x: 29 , y: 32 }, {x: 30 , y: 32 }, {x: 31 , y: 32 }, {x: 32 , y: 32 }, {x: 33 , y: 32 }, {x: 34 , y: 32 }, {x: 35 , y: 32 }, {x: 36 , y: 32 }, {x: 37 , y: 32 }, {x: 38 , y: 32 }, {x: 39 , y: 32 }, {x: 40 , y: 32 }, {x: 41 , y: 32 }, {x: 42 , y: 32 }, {x: 43 , y: 32 }, {x: 44 , y: 32 }, {x: 45 , y: 32 }, {x: 46 , y: 32 }, {x: 47 , y: 32 }, {x: 48 , y: 32 }, {x: 49 , y: 32 }, {x: 50 , y: 32 }, {x: 51 , y: 32 }, {x: 52 , y: 32 }, {x: 53 , y: 32 }, {x: 54 , y: 32 }, {x: 55 , y: 32 }, {x: 56 , y: 32 }, {x: 57 , y: 32 }, {x: 58 , y: 32 }, {x: 59 , y: 32 }, {x: 60 , y: 32 }, {x: 61 , y: 32 }, {x: 62 , y: 32 }, {x: 63 , y: 32 }, ], weapons: [ {x: 0, y: 36}, {x: 0, y: 37}, {x: 0, y: 38} ] } } return mrpgp }31:[{"id":"160ee722757e2cd2cb0d2e61d074927feac54e75a1b464faff51d6146eeb626459e87dc4123e21b07d0befdb7ce1509439a34b743ee7d362aa8f9038c2363c4c","href":"https://static.observableusercontent.com/files/160ee722757e2cd2cb0d2e61d074927feac54e75a1b464faff51d6146eeb626459e87dc4123e21b07d0befdb7ce1509439a34b743ee7d362aa8f9038c2363c4c","name":"bf17255d-7747-4524-8b01-fa0c957c7232_DungeonCrawl_ProjectUtumnoTileset.png","type":"image/png","lastModified":1614419229492.957,"size":1439854}] 2e:{"title":"My RPG Persona","cells":[{"id":0,"value":"md`# My RPG Persona`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"html`

Using the magic of HTML, CSS, and JS you can have your own randomly generated RPG \"avatar.\" Press refresh to load a new avatar. Press download to save a copy as a PNG.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"{yield html`\n

\n \n

\n \n Download \n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof foo = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"imageSrc = await FileAttachment(\"bf17255d-7747-4524-8b01-fa0c957c7232_DungeonCrawl_ProjectUtumnoTileset.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"foo,mrpgp.init()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"{\n await visibility()\n mrpgp.init(); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"{\n yield html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}