Size canvas according to serialized scene aspect ratio. Add buttons f…

…or new scene and creating shapes. Add cookie to remember previous scene selection.
electronicarts · Aug 13, 2024 · 9666d8f · 9666d8f
1 parent 987dac1
commit 9666d8f
Show file tree

Hide file tree

Showing 11 changed files with 630 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
  <body id="body" style="background-image:linear-gradient(217deg, rgb(1, 4, 30), rgb(10, 3, 1) 50%); margin:0; width: 100vw; height:100vh;">
   <main id="main">
     <link rel="stylesheet" href="style.css">
-    <canvas id='canvas' style=" position:absolute;"></canvas>
+    <canvas id='canvas' style="position:absolute;"></canvas>
     <canvas id='vectorCanvas' style="position:absolute;"></canvas>
     <div id="ui" class="uiPanel" style="display:none">
 
@@ -24,6 +24,7 @@
       </div>
 
       <div id="shapesTabContent" style="position:absolute; top:5%; height:95%; width:100%; display:none; background-color:rgba(23, 27, 36, 0.8);  overflow:auto;">
+        <button id="newShapeButton">New Shape</button>
         <div id="shapesList">
 
         </div>

diff --git a/scenes/boxFracture.json b/scenes/boxFracture.json
@@ -0,0 +1,158 @@
+{
+    "version": 2,
+    "resolution": [
+        1102,
+        1121
+    ],
+    "shapes": [
+        {
+            "id": "shape0",
+            "position": {
+                "x": 578,
+                "y": 356.5
+            },
+            "rotation": 0,
+            "halfSize": {
+                "x": "100",
+                "y": "100"
+            },
+            "shape": "0",
+            "function": "3",
+            "emitMaterial": "1",
+            "emissionRate": "1",
+            "radius": 100
+        },
+        {
+            "id": "shape1",
+            "position": {
+                "x": 817,
+                "y": 902.5
+            },
+            "rotation": 0,
+            "halfSize": {
+                "x": "100",
+                "y": "100"
+            },
+            "shape": "0",
+            "function": "3",
+            "emitMaterial": "1",
+            "emissionRate": "1",
+            "radius": 100
+        },
+        {
+            "id": "shape2",
+            "position": {
+                "x": 547,
+                "y": 902.5
+            },
+            "rotation": 0,
+            "halfSize": {
+                "x": "100",
+                "y": "100"
+            },
+            "shape": "0",
+            "function": "3",
+            "emitMaterial": "1",
+            "emissionRate": "1",
+            "radius": 100
+        },
+        {
+            "id": "shape3",
+            "position": {
+                "x": 272,
+                "y": 904.5
+            },
+            "rotation": 0,
+            "halfSize": {
+                "x": "100",
+                "y": "100"
+            },
+            "shape": "0",
+            "function": "3",
+            "emitMaterial": "1",
+            "emissionRate": "1",
+            "radius": 100
+        },
+        {
+            "id": "shape4",
+            "position": {
+                "x": 408,
+                "y": 620.5
+            },
+            "rotation": 0,
+            "halfSize": {
+                "x": "100",
+                "y": "100"
+            },
+            "shape": "0",
+            "function": "3",
+            "emitMaterial": "1",
+            "emissionRate": "1",
+            "radius": 100
+        },
+        {
+            "id": "shape5",
+            "position": {
+                "x": 745,
+                "y": 620.5
+            },
+            "rotation": 0,
+            "halfSize": {
+                "x": "100",
+                "y": "100"
+            },
+            "shape": "0",
+            "function": "3",
+            "emitMaterial": "1",
+            "emissionRate": "1",
+            "radius": 100
+        }
+    ],
+    "settings": [
+        {
+            "name": "particlesPerCellAxis",
+            "type": "range",
+            "value": "3"
+        },
+        {
+            "name": "simRate",
+            "type": "combo",
+            "value": "1200"
+        },
+        {
+            "name": "fixedPointMultiplierExponent",
+            "type": "range",
+            "value": "8"
+        },
+        {
+            "name": "liquidViscosity",
+            "type": "range",
+            "value": "0"
+        },
+        {
+            "name": "mouseFunction",
+            "type": "combo",
+            "value": "0"
+        },
+        {
+            "name": "iterationCount",
+            "type": "range",
+            "value": "4"
+        },
+        {
+            "name": "elasticRelaxation",
+            "type": "range",
+            "value": "1.06"
+        },
+        {
+            "name": "borderFriction",
+            "type": "range",
+            "value": "1"
+        },
+        {
+            "name": "renderMode",
+            "type": "combo",
+            "value": "0"
+        }
+    ]
+}
diff --git a/scenes/manifest.json b/scenes/manifest.json
@@ -1,7 +1,7 @@
 [
     { "scene": "./scenes/damBreak.json", "name": "Dam Break" },
-    { "scene": "./scenes/4Materials.json", "name": "Four Materials"},
+    { "scene": "./scenes/seedLogo.json", "name": "SEED Logo" },
+    { "scene": "./scenes/sillyRubber.json", "name": "Rubber"},
     { "scene": "./scenes/plasticPress.json", "name": "Plastic Press"},
-    { "scene": "./scenes/pyramid.json", "name": "Pyramid"},
-    { "scene": "./scenes/sandPile.json", "name": "SandPile"}
+    { "scene": "./scenes/boxFracture.json", "name": "Box Fracture"}
 ]