atlas/web/_js/main/overlap.js

83 lines
2 KiB
JavaScript
Raw Normal View History

/*
========================================================================
2022-04-28 12:41:19 +02:00
The 2022 r/place Atlas
An atlas of Reddit's 2022 r/place, with information to each
artwork of the canvas provided by the community.
Copyright (c) 2017 Roland Rytz <roland@draemm.li>
Copyright (c) 2022 Place Atlas contributors
Licensed under the GNU Affero General Public License Version 3
2022-04-09 03:23:55 +02:00
https://place-atlas.stefanocoding.me/license.txt
========================================================================
*/
function initOverlap() {
2022-04-09 11:27:14 +02:00
window.renderBackground = renderBackground
// const hovered = []
2022-05-06 09:41:22 +02:00
buildObjectsList(null, null)
renderBackground(atlas)
render()
document.addEventListener('timeupdate', (event) => {
sortedAtlas = atlas.concat()
resetEntriesList(null, null)
2022-05-06 09:41:22 +02:00
renderBackground(sortedAtlas)
render()
})
2022-05-06 09:41:22 +02:00
applyView()
render()
updateLines()
if (window.location.hash) {
2022-05-06 09:41:22 +02:00
highlightEntryFromUrl()
}
2022-04-09 11:27:14 +02:00
function renderBackground(atlas) {
2022-05-06 09:41:22 +02:00
backgroundContext.clearRect(0, 0, canvas.width, canvas.height)
2022-05-06 09:41:22 +02:00
backgroundContext.fillStyle = "rgba(255, 255, 255, 1)"
backgroundContext.fillRect(0, 0, canvas.width, canvas.height)
for (let i = 0; i < atlas.length; i++) {
2022-05-06 09:41:22 +02:00
const path = atlas[i].path
2022-05-06 09:41:22 +02:00
backgroundContext.beginPath()
if (path[0]) {
2022-05-06 09:41:22 +02:00
backgroundContext.moveTo(path[0][0], path[0][1])
}
for (let p = 1; p < path.length; p++) {
2022-05-06 09:41:22 +02:00
backgroundContext.lineTo(path[p][0], path[p][1])
}
2022-05-06 09:41:22 +02:00
backgroundContext.closePath()
2022-05-06 09:41:22 +02:00
backgroundContext.fillStyle = "rgba(0, 0, 255, 0.2)"
backgroundContext.fill()
}
2022-05-06 09:41:22 +02:00
const pixels = backgroundContext.getImageData(0, 0, backgroundCanvas.width, backgroundCanvas.height).data
let blank = 0
for (let i = 0; i < pixels.length; i += 4) {
2023-03-17 18:30:33 +01:00
if (pixels[i] === 255) {
2022-05-06 09:41:22 +02:00
blank++
}
}
2023-03-19 07:03:49 +01:00
const blankPercentage = (blank / (canvasSize.x * canvasSize.y)) * 100
2022-04-16 15:29:31 +02:00
2022-05-06 09:41:22 +02:00
console.info(blank + " blank pixels, which are " + blankPercentage.toPrecision(4) + "% of the canvas (" + (100 - blankPercentage).toPrecision(4) + "% mapped)")
}
}