mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 20:48:56 +02:00
Added the ability to selectively override images, removed old, commented-out code from atlas.js, added more info into the info block (position, area).
This commit is contained in:
parent
3b62617a33
commit
9a177b814d
5 changed files with 69 additions and 90 deletions
|
@ -29,86 +29,30 @@ window.addEventListener("error", function (e) {
|
||||||
document.getElementById("loadingContent").innerHTML = errorMessage;
|
document.getElementById("loadingContent").innerHTML = errorMessage;
|
||||||
});
|
});
|
||||||
|
|
||||||
function pointIsInPolygon (point, polygon) {
|
function getPositionOfEntry(entry){
|
||||||
// ray-casting algorithm based on
|
let startX = 2000, startY = 2000;
|
||||||
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
|
for(let [x, y] of entry.path){
|
||||||
|
startX = Math.min(x, startX);
|
||||||
var x = point[0], y = point[1];
|
startY = Math.min(y, startY)
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
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);
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
// Modified from https://stackoverflow.com/a/33670691
|
||||||
for(var i = 0; i < atlas.length; i++) {
|
function calcPolygonArea(vertices) {
|
||||||
if(typeof atlas[i].website == "undefined") {
|
var total = 0;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
// 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
|
return Math.floor(Math.abs(total));
|
||||||
|
}
|
||||||
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]
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
*/
|
|
|
@ -1,4 +1,16 @@
|
||||||
function createInfoBlock(entry) {
|
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");
|
var element = document.createElement("div");
|
||||||
element.className = "object";
|
element.className = "object";
|
||||||
|
|
||||||
|
@ -15,6 +27,15 @@ function createInfoBlock(entry) {
|
||||||
descElement.innerText = entry.description;
|
descElement.innerText = entry.description;
|
||||||
element.appendChild(descElement);
|
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) {
|
if (entry.website) {
|
||||||
let websiteLinkElement = document.createElement("a");
|
let websiteLinkElement = document.createElement("a");
|
||||||
websiteLinkElement.target = "_blank";
|
websiteLinkElement.target = "_blank";
|
||||||
|
@ -39,9 +60,8 @@ function createInfoBlock(entry) {
|
||||||
element.appendChild(subredditLinkElement);
|
element.appendChild(subredditLinkElement);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let idElement = document.createElement("p");
|
let idElement = createInfoParagraph("ID: ", entry.id);
|
||||||
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
|
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
|
||||||
idElement.innerText = "id: " + entry.id;
|
|
||||||
element.appendChild(idElement);
|
element.appendChild(idElement);
|
||||||
|
|
||||||
return element;
|
return element;
|
||||||
|
|
|
@ -21,13 +21,6 @@ for(var q = 0; q < atlas.length; q++){
|
||||||
|
|
||||||
area = Math.abs(area/2);
|
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;
|
areasSum += area;
|
||||||
areas.push(area);
|
areas.push(area);
|
||||||
|
|
||||||
|
|
|
@ -273,12 +273,12 @@ function initView(){
|
||||||
|
|
||||||
//var id = parseInt(window.location.hash.substring(3));
|
//var id = parseInt(window.location.hash.substring(3));
|
||||||
|
|
||||||
var entry = atlas.filter(function(e){
|
var entries = atlas.filter(function(e){
|
||||||
return e.id === id;
|
return e.id === id;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (entry.length === 1){
|
if (entries.length === 1){
|
||||||
entry = entry[0];
|
let entry = entries[0];
|
||||||
|
|
||||||
document.title = entry.name + " on the 2022 /r/place Atlas";
|
document.title = entry.name + " on the 2022 /r/place Atlas";
|
||||||
|
|
||||||
|
@ -532,7 +532,6 @@ function initView(){
|
||||||
applyView();
|
applyView();
|
||||||
}
|
}
|
||||||
if(document.documentElement.clientWidth < 500){
|
if(document.documentElement.clientWidth < 500){
|
||||||
|
|
||||||
objectsContainer.innerHTML = "";
|
objectsContainer.innerHTML = "";
|
||||||
|
|
||||||
entriesListShown = false;
|
entriesListShown = false;
|
||||||
|
@ -591,7 +590,7 @@ function initView(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function render(){
|
async function render(){
|
||||||
|
|
||||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
@ -636,6 +635,29 @@ function initView(){
|
||||||
context.globalCompositeOperation = "source-out";
|
context.globalCompositeOperation = "source-out";
|
||||||
context.drawImage(backgroundCanvas, 0, 0);
|
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++){
|
for(var i = 0; i < hovered.length; i++){
|
||||||
|
|
||||||
var path = hovered[i].path;
|
var path = hovered[i].path;
|
||||||
|
|
Loading…
Reference in a new issue