From f78bd467521c2c3e486cc48e63e243984f26516c Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Fri, 14 Feb 2020 13:16:30 -0500 Subject: [PATCH] Add skyscrapers. Break famous buildings out into Landmarks --- macrovision.html | 2 + macrovision.js | 2 + media/LICENSES.md | 22 ++- media/buildings/skyscrapers/medium.svg | 9 ++ media/buildings/skyscrapers/narrow.svg | 10 ++ media/buildings/skyscrapers/slender.svg | 9 ++ media/buildings/skyscrapers/wide.svg | 9 ++ .../{buildings => landmarks}/burj-khalifa.svg | 0 .../{buildings => landmarks}/canton-tower.svg | 0 .../chrysler-building.svg | 0 media/{buildings => landmarks}/cn-tower.svg | 0 .../{buildings => landmarks}/eiffel-tower.svg | 0 .../empire-state-building.svg | 0 .../{buildings => landmarks}/gateway-arch.svg | 0 media/{buildings => landmarks}/taipei-101.svg | 0 presets/buildings.js | 152 ++++++++++-------- presets/landmarks.js | 102 ++++++++++++ 17 files changed, 248 insertions(+), 69 deletions(-) create mode 100644 media/buildings/skyscrapers/medium.svg create mode 100644 media/buildings/skyscrapers/narrow.svg create mode 100644 media/buildings/skyscrapers/slender.svg create mode 100644 media/buildings/skyscrapers/wide.svg rename media/{buildings => landmarks}/burj-khalifa.svg (100%) rename media/{buildings => landmarks}/canton-tower.svg (100%) rename media/{buildings => landmarks}/chrysler-building.svg (100%) rename media/{buildings => landmarks}/cn-tower.svg (100%) rename media/{buildings => landmarks}/eiffel-tower.svg (100%) rename media/{buildings => landmarks}/empire-state-building.svg (100%) rename media/{buildings => landmarks}/gateway-arch.svg (100%) rename media/{buildings => landmarks}/taipei-101.svg (100%) create mode 100644 presets/landmarks.js diff --git a/macrovision.html b/macrovision.html index 0564258e..3af47c97 100644 --- a/macrovision.html +++ b/macrovision.html @@ -8,6 +8,7 @@ + @@ -55,6 +56,7 @@ + diff --git a/macrovision.js b/macrovision.js index 2fc0e92d..08162cdd 100644 --- a/macrovision.js +++ b/macrovision.js @@ -20,6 +20,7 @@ const unitChoices = { "kilometers", "inches", "feet", + "stories", "miles", "parsecs", ], @@ -852,6 +853,7 @@ document.addEventListener("DOMContentLoaded", () => { function prepareEntities() { availableEntities["buildings"] = makeBuildings(); + availableEntities["landmarks"] = makeLandmarks(); availableEntities["characters"] = makeCharacters(); availableEntities["objects"] = makeObjects(); availableEntities["naturals"] = makeNaturals(); diff --git a/media/LICENSES.md b/media/LICENSES.md index 4b5ff58d..7d6c4562 100644 --- a/media/LICENSES.md +++ b/media/LICENSES.md @@ -1,6 +1,23 @@ These silhouettes come from a variety of sources. This file documents their origins and licenses. -# Buildings +# Buildings + +**Self-created** + +* house.svg +* mobile-home.svg +* mailbox.svg + +## Skyscrapers + +**Self-created + +* wide.svg +* medium.svg +* slender.svg +* narrow.svg + +# Landmarks **Kryostat, Донор [CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)]** @@ -16,9 +33,6 @@ https://commons.wikimedia.org/wiki/File:TallestBuildings.svg **Self-created** -* house.svg -* mobile-home.svg -* mailbox.svg * gateway-arch.svg # Characters diff --git a/media/buildings/skyscrapers/medium.svg b/media/buildings/skyscrapers/medium.svg new file mode 100644 index 00000000..99f1a0a0 --- /dev/null +++ b/media/buildings/skyscrapers/medium.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/media/buildings/skyscrapers/narrow.svg b/media/buildings/skyscrapers/narrow.svg new file mode 100644 index 00000000..83484b9e --- /dev/null +++ b/media/buildings/skyscrapers/narrow.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/media/buildings/skyscrapers/slender.svg b/media/buildings/skyscrapers/slender.svg new file mode 100644 index 00000000..083f2e43 --- /dev/null +++ b/media/buildings/skyscrapers/slender.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/media/buildings/skyscrapers/wide.svg b/media/buildings/skyscrapers/wide.svg new file mode 100644 index 00000000..b8692f17 --- /dev/null +++ b/media/buildings/skyscrapers/wide.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/media/buildings/burj-khalifa.svg b/media/landmarks/burj-khalifa.svg similarity index 100% rename from media/buildings/burj-khalifa.svg rename to media/landmarks/burj-khalifa.svg diff --git a/media/buildings/canton-tower.svg b/media/landmarks/canton-tower.svg similarity index 100% rename from media/buildings/canton-tower.svg rename to media/landmarks/canton-tower.svg diff --git a/media/buildings/chrysler-building.svg b/media/landmarks/chrysler-building.svg similarity index 100% rename from media/buildings/chrysler-building.svg rename to media/landmarks/chrysler-building.svg diff --git a/media/buildings/cn-tower.svg b/media/landmarks/cn-tower.svg similarity index 100% rename from media/buildings/cn-tower.svg rename to media/landmarks/cn-tower.svg diff --git a/media/buildings/eiffel-tower.svg b/media/landmarks/eiffel-tower.svg similarity index 100% rename from media/buildings/eiffel-tower.svg rename to media/landmarks/eiffel-tower.svg diff --git a/media/buildings/empire-state-building.svg b/media/landmarks/empire-state-building.svg similarity index 100% rename from media/buildings/empire-state-building.svg rename to media/landmarks/empire-state-building.svg diff --git a/media/buildings/gateway-arch.svg b/media/landmarks/gateway-arch.svg similarity index 100% rename from media/buildings/gateway-arch.svg rename to media/landmarks/gateway-arch.svg diff --git a/media/buildings/taipei-101.svg b/media/landmarks/taipei-101.svg similarity index 100% rename from media/buildings/taipei-101.svg rename to media/landmarks/taipei-101.svg diff --git a/presets/buildings.js b/presets/buildings.js index 7f23f94a..5387e8a6 100644 --- a/presets/buildings.js +++ b/presets/buildings.js @@ -1,3 +1,13 @@ + +math.createUnit("story", { + definition: "12 feet", + prefixes: "long" +}); +math.createUnit("stories", { + definition: "12 feet", + prefixes: "long" +}); + function makeBuilding(name, height, image) { views = { building: { @@ -17,71 +27,48 @@ function makeBuilding(name, height, image) { return makeEntity(name, "Building", views); } -function makeBuildings() { - const results = []; - results.push({ - name: "Burj Khalifa", - constructor: () => makeBuilding( - "Burj Khalifa", - math.unit(829.8, "meter"), - { source: "./media/buildings/burj-khalifa.svg" } - ) - }); +function makeSkyscraper(name, image, startingSize) { + views = { + building: { + attributes: { + height: { + name: "Height", + power: 1, + type: "length", + base: math.unit(1, "meter") + } + }, + image: image, + name: "building" + }, + }; - results.push({ - name: "Canton Tower", - constructor: () => makeBuilding( - "Canton Tower", - math.unit(604, "meter"), - { source: "./media/buildings/canton-tower.svg" } - ) - }); + const entity = makeEntity(name, "Skyscraper", views); - results.push({ - name: "CN Tower", - constructor: () => makeBuilding( - "CN Tower", - math.unit(553.3, "meter"), - { source: "./media/buildings/cn-tower.svg" } - ) + entity.defaults.push({ + name: "Short", + height: math.unit(15, "stories") }); - - results.push({ - name: "Taipei 101", - constructor: () => makeBuilding( - "Taipei 101", - math.unit(509.2, "meter"), - { source: "./media/buildings/taipei-101.svg" } - ) + entity.defaults.push({ + name: "Medium", + height: math.unit(40, "stories") }); - - results.push({ - name: "Empire State Building", - constructor: () => makeBuilding( - "Empire State Building", - math.unit(443.2, "meter"), - { source: "./media/buildings/empire-state-building.svg" } - ) + entity.defaults.push({ + name: "Supertall", + height: math.unit(350, "meters") }); - - results.push({ - name: "Eiffel Tower", - constructor: () => makeBuilding( - "Eiffel Tower", - math.unit(324, "meter"), - { source: "./media/buildings/eiffel-tower.svg" } - ) + entity.defaults.push({ + name: "Megatall", + height: math.unit(650, "meters") }); - results.push({ - name: "Chrysler Building", - constructor: () => makeBuilding( - "Chrysler Building", - math.unit(318.9, "meter"), - { source: "./media/buildings/chrysler-building.svg" } - ) - }); + entity.views[entity.defaultView].height = startingSize; + return entity; +} + +function makeBuildings() { + const results = []; results.push({ name: "Two-Story Home", @@ -110,14 +97,49 @@ function makeBuildings() { ) }); - results.push({ - name: "Gateway Arch", - constructor: () => makeBuilding( - "Gateway Arch", - math.unit(630, "feet"), - { source: "./media/buildings/gateway-arch.svg" } - ) - }); + results.push( + { + name: "Wide Skyscraper", + constructor: () => makeSkyscraper( + "Wide Skyscraper", + { source: "./media/buildings/skyscrapers/wide.svg" }, + math.unit(40, "stories") + ) + } + ); + + results.push( + { + name: "Skyscraper", + constructor: () => makeSkyscraper( + "Skyscraper", + { source: "./media/buildings/skyscrapers/medium.svg" }, + math.unit(40, "stories") + ) + } + ); + + results.push( + { + name: "Slender Skyscraper", + constructor: () => makeSkyscraper( + "Slender Skyscraper", + { source: "./media/buildings/skyscrapers/slender.svg" }, + math.unit(40, "stories") + ) + } + ); + + results.push( + { + name: "Narrow Skyscraper", + constructor: () => makeSkyscraper( + "Narrow Skyscraper", + { source: "./media/buildings/skyscrapers/narrow.svg" }, + math.unit(40, "stories") + ) + } + ); results.sort((b1, b2) => { e1 = b1.constructor(); diff --git a/presets/landmarks.js b/presets/landmarks.js new file mode 100644 index 00000000..eafebae8 --- /dev/null +++ b/presets/landmarks.js @@ -0,0 +1,102 @@ +function makeLandmark(name, height, image) { + views = { + building: { + attributes: { + height: { + name: "Height", + power: 1, + type: "length", + base: height + } + }, + image: image, + name: "building" + }, + }; + + return makeEntity(name, "Building", views); +} + +function makeLandmarks() { + const results = []; + + results.push({ + name: "Burj Khalifa", + constructor: () => makeLandmark( + "Burj Khalifa", + math.unit(829.8, "meter"), + { source: "./media/landmarks/burj-khalifa.svg" } + ) + }); + + results.push({ + name: "Canton Tower", + constructor: () => makeLandmark( + "Canton Tower", + math.unit(604, "meter"), + { source: "./media/landmarks/canton-tower.svg" } + ) + }); + + results.push({ + name: "CN Tower", + constructor: () => makeLandmark( + "CN Tower", + math.unit(553.3, "meter"), + { source: "./media/landmarks/cn-tower.svg" } + ) + }); + + results.push({ + name: "Taipei 101", + constructor: () => makeLandmark( + "Taipei 101", + math.unit(509.2, "meter"), + { source: "./media/landmarks/taipei-101.svg" } + ) + }); + + results.push({ + name: "Empire State Building", + constructor: () => makeLandmark( + "Empire State Building", + math.unit(443.2, "meter"), + { source: "./media/landmarks/empire-state-building.svg" } + ) + }); + + results.push({ + name: "Eiffel Tower", + constructor: () => makeLandmark( + "Eiffel Tower", + math.unit(324, "meter"), + { source: "./media/landmarks/eiffel-tower.svg" } + ) + }); + + results.push({ + name: "Chrysler Building", + constructor: () => makeLandmark( + "Chrysler Building", + math.unit(318.9, "meter"), + { source: "./media/landmarks/chrysler-building.svg" } + ) + }); + + results.push({ + name: "Gateway Arch", + constructor: () => makeLandmark( + "Gateway Arch", + math.unit(630, "feet"), + { source: "./media/landmarks/gateway-arch.svg" } + ) + }); + + results.sort((b1, b2) => { + e1 = b1.constructor(); + e2 = b2.constructor(); + return -math.subtract(e1.views[e1.defaultView].height, e2.views[e2.defaultView].height).value; + }); + + return results; +} \ No newline at end of file