mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-12-26 18:14:08 +01:00
Merge branch 'master' into reddit
This commit is contained in:
ash
GitHub
commit
ba3204a9ae
8 changed files with 73 additions and 94 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 1 MiB |
|
|
@ -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;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
return Math.floor(Math.abs(total));
|
||||
}
|
||||
*/
|
||||
|
||||
// sort by center.y, so that lines will overlap less
|
||||
|
||||
/*
|
||||
|
||||
// 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]
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ <h2 id="abouth2">The 2022 /r/place Atlas</h2>
|
|||
<p>This is an Atlas aiming to chart all the artworks created during the <a href="https://www.reddit.com/r/place/">/r/place</a> April's fools event on <a href="https://www.reddit.com/" target="_blank">Reddit</a> in 2022.</p>
|
||||
<p>The original code was developed by <a href="/" target="_blank" rel="author">Roland Rytz</a> (<a href="mailto:roland.rytz@gmail.com" target="_blank">mail</a>, <a href="https://reddit.com/user/draemmli/" target="_blank">reddit</a>) and is available under the free <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">AGPL license</a> on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.</p>
|
||||
<br>
|
||||
<p>The currently maintained version of the website is managed by <a href="/" target="_blank" rel="author">Stefano Haagmans</a> and is obtainable under the same license within a <a target="_blank" href="https://github.com/Codixer/place-atlas">Github Fork</a>.</p>
|
||||
<p>The currently maintained version of the website is managed by <a href="/" target="_blank" rel="author">Stefano Haagmans</a> and is obtainable under the same license within a <a target="_blank" href="https://github.com/placeAtlas/atlas">Github Fork</a>.</p>
|
||||
<p>Image's provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a></p>.
|
||||
<p>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 <a target="_blank" href="https://paypal.me/codixer">Paypal</a>. (I don't have bitcoin)</p>
|
||||
<p>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</p>
|
||||
|
|
@ -88,7 +88,7 @@ <h2 id="abouth2">The 2022 /r/place Atlas</h2>
|
|||
<h2>How to contribute</h2>
|
||||
<p>The /r/Place Atlas project relies on user contributions.</p>
|
||||
<p>To contribute a label for an artwork, please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this post on reddit</a> to learn how to submit a new entry.</p>
|
||||
<p>Alternatively, contributions can be made directly on <a href="https://github.com/Codixer/place-atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
|
||||
<p>Alternatively, contributions can be made directly on <a href="https://github.com/placeAtlas/atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
|
||||
<p>The <a href="https://reddit.com/r/placeAtlas2/" target="_blank">/r/placeAtlas2</a> subreddit is also the place to submit all bug reports, feature requests or questions.</p>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<noscript>
|
||||
<p>Sorry, you need JavaScript to view the Atlas.</p>
|
||||
<p>All JavaScript on this site is licensed under either the MIT or AGPL license.</p>
|
||||
<p><a href="https://github.com/RolandR/place-atlas/">See the source on GitHub</a></p>
|
||||
<p><a href="https://github.com/placeAtlas/atlas">See the source on GitHub</a></p>
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -224,7 +224,7 @@ <h2>His Bitcoin Address</h2>
|
|||
</div>
|
||||
</div>
|
||||
<div id="author">
|
||||
Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>). Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.
|
||||
Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>, Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>.
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue