diff --git a/web/_img/place-indexed.png b/web/_img/place-indexed.png index bbeddaea..0f2e50b2 100644 Binary files a/web/_img/place-indexed.png and b/web/_img/place-indexed.png differ diff --git a/web/_js/atlas.js b/web/_js/atlas.js index 72b75f33..92bada94 100644 --- a/web/_js/atlas.js +++ b/web/_js/atlas.js @@ -29,86 +29,30 @@ window.addEventListener("error", function (e) { document.getElementById("loadingContent").innerHTML = errorMessage; }); -function pointIsInPolygon (point, polygon) { - // ray-casting algorithm based on - // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html - - var x = point[0], y = point[1]; - - var inside = false; - for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { - var xi = polygon[i][0], yi = polygon[i][1]; - var xj = polygon[j][0], yj = polygon[j][1]; - - var intersect = ((yi > y) != (yj > y)) - && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - if (intersect) inside = !inside; - } - return inside; -}; - -//console.log("There are "+atlas.length+" entries in the Atlas."); - -/* -atlas.sort(function(a, b) { - if (a.id < b.id) { - return -1; - } - if (a.id > b.id) { - return 1; - } - // a must be equal to b - return 0; -}); - -for(var i = 0; i < atlas.length; i++) { - if(atlas[i-1]){ - if(atlas[i-1].id == atlas[i].id) { - console.log(atlas[i-1].id + ": "+ atlas[i-1].name); - console.log(atlas[i ].id + ": "+ atlas[i ].name); - } +function getPositionOfEntry(entry){ + let startX = 2000, startY = 2000; + for(let [x, y] of entry.path){ + startX = Math.min(x, startX); + startY = Math.min(y, startY) } + if(startX === 2000 || startY === 2000) return null; + return [parseInt(startX), parseInt(startY)]; } -console.log("biggest id: "+atlas[atlas.length-1].id + ", " + atlas[atlas.length-1].name); -*/ -/* -for(var i = 0; i < atlas.length; i++) { - if(typeof atlas[i].website == "undefined") { - console.log(atlas[i].name); - } else if(atlas[i].website.trim() != "") { - if(atlas[i].website.trim().substring(0, 4) != "http") { - console.log(atlas[i].name + ": " + atlas[i].website); - } - } -} -*/ +// Modified from https://stackoverflow.com/a/33670691 +function calcPolygonArea(vertices) { + var total = 0; -// sort by center.y, so that lines will overlap less + for (var i = 0, l = vertices.length; i < l; i++) { + var addX = vertices[i][0]; + var addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1]; + var subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0]; + var subY = vertices[i][1]; -/* + total += (addX * addY * 0.5); + total -= (subX * subY * 0.5); + } -// Populate with test data - -for(var i = 0; i < 10000; i++) { - var x = ~~(Math.random() * 1000)+0.5; - var y = ~~(Math.random() * 1000)+0.5; - var w = ~~(Math.random()*100); - var h = ~~(Math.random()*100); - atlas.push( { - "id": 5, - "name": "test"+(i+3), - "website": "", - "subreddit": "", - "center": [0, 0], - "path":[ - [x, y], - [x+w, y], - [x+w, y+h], - [x, y+h] - ] - }); -} - -*/ + return Math.floor(Math.abs(total)); +} \ No newline at end of file diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index edbaccb1..759e0e32 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -1,4 +1,16 @@ function createInfoBlock(entry) { + function createInfoParagraph(name, value){ + let entryParagraphPositionElement = document.createElement("p"); + let nameElement = document.createElement("span"); + nameElement.style.fontWeight = "bold"; + nameElement.innerText = name; + let valueElement = document.createElement("span"); + valueElement.innerText = value; + entryParagraphPositionElement.appendChild(nameElement); + entryParagraphPositionElement.appendChild(valueElement); + return entryParagraphPositionElement; + } + var element = document.createElement("div"); element.className = "object"; @@ -15,6 +27,15 @@ function createInfoBlock(entry) { descElement.innerText = entry.description; element.appendChild(descElement); } + + let [x, y] = entry.center; + element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}x${Math.floor(y)}`)); + + if(entry.path){ + let area = calcPolygonArea(entry.path); + element.appendChild(createInfoParagraph("Area: ", `${area} pixels`)); + } + if (entry.website) { let websiteLinkElement = document.createElement("a"); websiteLinkElement.target = "_blank"; @@ -39,9 +60,8 @@ function createInfoBlock(entry) { element.appendChild(subredditLinkElement); } } - let idElement = document.createElement("p"); + let idElement = createInfoParagraph("ID: ", entry.id); idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;"; - idElement.innerText = "id: " + entry.id; element.appendChild(idElement); return element; diff --git a/web/_js/stats.js b/web/_js/stats.js index b75bafcb..2a88e87f 100644 --- a/web/_js/stats.js +++ b/web/_js/stats.js @@ -21,13 +21,6 @@ for(var q = 0; q < atlas.length; q++){ area = Math.abs(area/2); - if(atlas[q].name == "Companion Cube"){ - var w = atlas[q].path[1][0] - atlas[q].path[0][0]; - var h = atlas[q].path[2][1] - atlas[q].path[1][1]; - console.log(w, h, w*h); - console.log(area, Math.sqrt(area)); - } - areasSum += area; areas.push(area); diff --git a/web/_js/view.js b/web/_js/view.js index 51c107e0..124118b3 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -273,12 +273,12 @@ function initView(){ //var id = parseInt(window.location.hash.substring(3)); - var entry = atlas.filter(function(e){ + var entries = atlas.filter(function(e){ return e.id === id; }); - if (entry.length === 1){ - entry = entry[0]; + if (entries.length === 1){ + let entry = entries[0]; document.title = entry.name + " on the 2022 /r/place Atlas"; @@ -532,7 +532,6 @@ function initView(){ applyView(); } if(document.documentElement.clientWidth < 500){ - objectsContainer.innerHTML = ""; entriesListShown = false; @@ -591,7 +590,7 @@ function initView(){ } } - function render(){ + async function render(){ context.clearRect(0, 0, canvas.width, canvas.height); @@ -636,6 +635,29 @@ function initView(){ context.globalCompositeOperation = "source-out"; context.drawImage(backgroundCanvas, 0, 0); + if(hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage){ + let undisputableHovered = hovered[0]; + // Find the left-topmost point of all the paths + let entryPosition = getPositionOfEntry(undisputableHovered); + if(entryPosition){ + const [startX, startY] = entryPosition; + let overrideImage = new Image(); + const loadingPromise = new Promise((res, rej) => { + overrideImage.onerror = rej; + overrideImage.onload = res; + }); + overrideImage.src = "imageOverrides/" + undisputableHovered.overrideImage; + try{ + await loadingPromise; + context.globalCompositeOperation = "source-over"; + context.drawImage(overrideImage, startX, startY); + }catch(ex){ + console.log("Cannot override image."); + console.log(ex); + } + } + } + for(var i = 0; i < hovered.length; i++){ var path = hovered[i].path; diff --git a/web/about.html b/web/about.html index 3e745fe7..69212212 100644 --- a/web/about.html +++ b/web/about.html @@ -76,7 +76,7 @@

The 2022 /r/place Atlas

This is an Atlas aiming to chart all the artworks created during the /r/place April's fools event on Reddit in 2022.

The original code was developed by (mail, reddit) and is available under the free AGPL license on GitHub.


-

The currently maintained version of the website is managed by and is obtainable under the same license within a Github Fork.

+

The currently maintained version of the website is managed by and is obtainable under the same license within a Github Fork.

Image's provided by Alex Tsernoh

.

Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though Paypal. (I don't have bitcoin)

To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project

@@ -88,7 +88,7 @@

The 2022 /r/place Atlas

How to contribute

The /r/Place Atlas project relies on user contributions.

To contribute a label for an artwork, please read this post on reddit to learn how to submit a new entry.

-

Alternatively, contributions can be made directly on GitHub.

+

Alternatively, contributions can be made directly on GitHub.

The /r/placeAtlas2 subreddit is also the place to submit all bug reports, feature requests or questions.

diff --git a/web/imageOverrides/Put the image overrides in this directory b/web/imageOverrides/Put the image overrides in this directory new file mode 100644 index 00000000..e69de29b diff --git a/web/index.html b/web/index.html index e05ec073..f8d99d4f 100644 --- a/web/index.html +++ b/web/index.html @@ -92,7 +92,7 @@

The 2022 /r/place Atlas

@@ -224,7 +224,7 @@

His Bitcoin Address

- Code by . Source on GitHub (2022 Version Github). Images provided by Alex Tsernoh. + Code by . Source on GitHub, Images provided by Alex Tsernoh. This site is powered by Netlify.