Add skyscrapers. Break famous buildings out into Landmarks

macrovision.html

@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="macrovision.css">
   <script src="math.min.js"></script>
   <script src="presets/buildings.js"></script>
+  <script src="presets/landmarks.js"></script>
   <script src="presets/characters.js"></script>
   <script src="presets/objects.js"></script>
   <script src="presets/naturals.js"></script>
@@ -55,6 +56,7 @@
             <option>inches</option>
             <option>feet</option>
             <option>yards</option>
+            <option>stories</option>
             <option>miles</option>
             <option>parsecs</option>
           </select>

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();

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

media/buildings/skyscrapers/medium.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 126 501" style="enable-background:new 0 0 126 501;" xml:space="preserve">
+<style type="text/css">
+	.st0{stroke:#000000;stroke-miterlimit:10;}
+</style>
+<polygon class="st0" points="14.39,500.5 14.39,417.17 0.5,375.5 0.5,0.5 97.72,0.5 97.72,417.17 125.5,417.17 125.5,500.5 "/>
+</svg>

media/buildings/skyscrapers/narrow.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 31 601" style="enable-background:new 0 0 31 601;" xml:space="preserve">
+<style type="text/css">
+	.st0{stroke:#000000;stroke-miterlimit:10;}
+</style>
+<polygon class="st0" points="0.5,600.5 0.5,100.5 3,100.5 3,50.5 5.5,50.5 5.5,0.5 25.5,0.5 25.5,50.5 28,50.5 28,100.5 30.5,100.5 
+	30.5,600.5 "/>
+</svg>

media/buildings/skyscrapers/slender.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 51 501" style="enable-background:new 0 0 51 501;" xml:space="preserve">
+<style type="text/css">
+	.st0{stroke:#000000;stroke-miterlimit:10;}
+</style>
+<polygon class="st0" points="0.5,500.5 0.5,42.17 13,42.17 13,0.5 50.5,0.5 50.5,500.5 "/>
+</svg>

media/buildings/skyscrapers/wide.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 301 601" style="enable-background:new 0 0 301 601;" xml:space="preserve">
+<style type="text/css">
+	.st0{stroke:#000000;stroke-miterlimit:10;}
+</style>
+<path class="st0" d="M0.5,600.47c0,1.56,0-50,0-50h30V100.49h30V0.5h180v99.99h30v449.97h30v50H0.5z"/>
+</svg>

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();

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;
+}