2c:null 2d:["$","title",null,{"children":"Athos Bulcão - Superior Tribunal de Justiça - safs quadra 6 lote 01 - (1994) | dgaitsgo | Observable"}] 32:T188e,(() => { ////////////////////////////////////////////////////////////////////////////////////////////////////////// // HELPERS // ////////////////////////////////////////////////////////////////////////////////////////////////////////// function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } ////////////////////////////////////////////////////////////////////////////////////////////////////////// // KEYS // ////////////////////////////////////////////////////////////////////////////////////////////////////////// const RIGHT_KEY_CODE = 68 const LEFT_KEY_CODE = 65 const UP_KEY_CODE = 87 const DOWN_KEY_CODE = 83 const keysPressed = {} keysPressed[RIGHT_KEY_CODE] = false keysPressed[LEFT_KEY_CODE] = false keysPressed[UP_KEY_CODE] = false keysPressed[DOWN_KEY_CODE] = false function keyDown(e) { if (e.keyCode in keysPressed) keysPressed[e.keyCode] = true; } function keyUp(e) { if (e.keyCode in keysPressed) keysPressed[e.keyCode] = false; } document.addEventListener('keydown', keyDown, false) document.addEventListener('keyup', keyUp, false) ////////////////////////////////////////////////////////////////////////////////////////////////////////// // IMAGES // ////////////////////////////////////////////////////////////////////////////////////////////////////////// const img1 = new Image() const img2 = new Image() const img3 = new Image() img1.src = FileAttachment("Superior Tribunal de Justiça-1.svg")._url img2.src = FileAttachment("Superior Tribunal de Justiça-2.svg")._url img3.src = FileAttachment("Superior Tribunal de Justiça-3.svg")._url const imgs = [img1, img2, img3] const rotations = [0, 90, 180, 270] ////////////////////////////////////////////////////////////////////////////////////////////////////////// // DIMENSIONS // ////////////////////////////////////////////////////////////////////////////////////////////////////////// console.log(container.getBoundingClientRect()) let { width, height } = container.getBoundingClientRect() const canvas = document.getElementById('canvas') const dpr = window.devicePixelRatio width = Math.ceil(width * dpr) height = Math.ceil(height * dpr) canvas.width = width canvas.height = height canvas.style.width = `${width / dpr}px` canvas.style.height = `${height / dpr}px` const context = canvas.getContext('2d') context.scale(dpr, dpr) ////////////////////////////////////////////////////////////////////////////////////////////////////////// // TILES // ////////////////////////////////////////////////////////////////////////////////////////////////////////// const tileSize = 48 * 2 const nTiles = 200 const worldSize = tileSize * nTiles const tilesPerLine = Math.floor(worldSize / tileSize) const tileHalfSize = tileSize / 2 let playerX = worldSize / 2 let playerY = worldSize / 2 const tileGrid = [] const angles = [] const viewTileWidth = Math.floor(width / tileSize) const viewTileHeight = Math.floor(height / tileSize) for (let i = 0; i < tilesPerLine; i++) { const column = [] for (let j = 0; j < tilesPerLine; j++) { column.push( [ imgs[getRandomIntInclusive(0, imgs.length - 1)], rotations[getRandomIntInclusive(0, 3)] ] ) } tileGrid.push(column) } ////////////////////////////////////////////////////////////////////////////////////////////////////////// // DRAWING // ////////////////////////////////////////////////////////////////////////////////////////////////////////// function rotateAndPaintImage(context, image, angle, positionX, positionY, axisX, axisY) { const angleInRad = angle * (Math.PI / 180) context.translate(positionX, positionY) context.rotate(angleInRad) context.drawImage(image, -axisX, -axisY) context.rotate(-angleInRad); context.translate(-positionX, -positionY) } const speed = 12 async function animate() { if (keysPressed[RIGHT_KEY_CODE]) { playerX += speed } if (keysPressed[LEFT_KEY_CODE]) { playerX += -speed } if (keysPressed[UP_KEY_CODE]) { playerY += -speed } if (keysPressed[DOWN_KEY_CODE]) { playerY += speed } const left = playerX - width / 2 const top = playerY - height / 2 let leftTile = Math.floor(left / tileSize) let topTile = Math.floor(top / tileSize) const tileOffsetX = left % tileSize const tileOffsetY = top % tileSize context.clearRect(0, 0, width, height) for (let x = 0; x < viewTileWidth; x++) { for (let y = 0; y < viewTileHeight; y++) { let row = (leftTile + x + tileGrid.length) % tileGrid.length; let col = (topTile + y + tileGrid[0].length) % tileGrid[0].length; const tile = tileGrid[row][col] rotateAndPaintImage( context, tile[0], tile[1], x * tileSize - tileOffsetX, y * tileSize - tileOffsetY, tileHalfSize, tileHalfSize ) } } window.requestAnimationFrame(animate) } animate() return 'Instituto de Artes da UNB' })()33:[{"id":"30c80cfcfc39ce28f9aa0f50e088152afa2c292a0ac3bebcdc340418716573ff761a0a09b88b311c84e50455a1d9a7fafb25f0214be5af4c16d264e405eefe19","href":"https://static.observableusercontent.com/files/30c80cfcfc39ce28f9aa0f50e088152afa2c292a0ac3bebcdc340418716573ff761a0a09b88b311c84e50455a1d9a7fafb25f0214be5af4c16d264e405eefe19","name":"Superior Tribunal de Justiça-2.svg","type":"image/svg+xml","lastModified":1708345296026.778,"size":9860},{"id":"bb2af509efc963237ad18a5a89556e05912bb5913fd0b8b0f11777c591450a94365822e60a13c35d9ffc09ba2fc81fe2fc477d4f7e777c7df6d4437a5cd2bab6","href":"https://static.observableusercontent.com/files/bb2af509efc963237ad18a5a89556e05912bb5913fd0b8b0f11777c591450a94365822e60a13c35d9ffc09ba2fc81fe2fc477d4f7e777c7df6d4437a5cd2bab6","name":"Superior Tribunal de Justiça-3.svg","type":"image/svg+xml","lastModified":1708345296028.018,"size":9702},{"id":"194221a74d7a65e2224ea66c302fab31e98103b511703e7a05e5f2d5146a0f03b8581a6adda6f066a58901ccb57f9135671339a6f872a5cd9082fc3213e80afb","href":"https://static.observableusercontent.com/files/194221a74d7a65e2224ea66c302fab31e98103b511703e7a05e5f2d5146a0f03b8581a6adda6f066a58901ccb57f9135671339a6f872a5cd9082fc3213e80afb","name":"Superior Tribunal de Justiça-1.svg","type":"image/svg+xml","lastModified":1708345296048.743,"size":9145}] 30:{"id":"fcf7ee0885a39f9f","slug":null,"title":"Athos Bulcão - Superior Tribunal de Justiça - safs quadra 6 lote 01 - (1994)","thumbnail":"d836e0011e9e22f66f6649c6a0546e26353380f3943e0dc9396ee0c9534da8c9","access_level":"public","create_time":"$D2024-02-19T12:17:44.217Z","update_time":"$D2024-02-19T12:22:22.410Z","view_time":null,"first_public_time":"$D2024-02-19T12:24:34.067Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7975ac2b6aec485b","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":"starter_2024"},"version":15,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null}],"members":[{"type":"team","id":"7975ac2b6aec485b","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"3e1c20a967a342f4","slug":"athos-bulcao-surface-design","title":"Athos Bulcão - Surface Design","owner":{"id":"7975ac2b6aec485b","login":"dgaitsgo","name":""}},"type":"notebook","body":{"title":"Athos Bulcão - Superior Tribunal de Justiça - safs quadra 6 lote 01 - (1994)","cells":[{"id":0,"value":"# Athos Bulcão - Superior Tribunal de Justiça - safs quadra 6 lote 01 - (1994)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Iconic Brasília surface design pattern made into an infinite tile map.\n\nW A S D to explore","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"