Add snapshot of gassim pages

jerjou · Aug 5, 2020 · ff0f7e0 · ff0f7e0
1 parent 3886b66
commit ff0f7e0
Show file tree

Hide file tree

Showing 5 changed files with 974 additions and 0 deletions.
diff --git a/gassim/index.css b/gassim/index.css
@@ -0,0 +1,181 @@
+:root {
+  --light-grey: rgba(0,0,0,.1);
+  --grey: rgba(0,0,0,.5);
+  --dark-grey: rgba(0,0,0,.9);
+  --light-green: rgba(128,255,128,.4);
+  --border: 1px solid var(--grey);
+  --hover-button: linear-gradient(0deg, var(--light-grey), white);
+  --selected-button: linear-gradient(0deg, var(--light-green), white);
+  --cursor-circle-inactive: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="font-size: 64px;opacity:.5"><text style="fill:blue" y="48" >◌</text></svg>') 32 32,auto;
+  --cursor-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="font-size: 64px;"><text style="fill:blue" y="48">◌</text></svg>') 32 32,auto;
+  --cursor-fire-inactive: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="font-size: 64px;opacity:.5"><text style="fill:blue;" y="54">🔥</text></svg>') 32 32,auto;
+  --cursor-fire: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="font-size: 64px;"><text style="fill:blue" y="54">🔥</text></svg>') 32 32,auto;
+  --cursor-snow-inactive: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="font-size: 64px;opacity:.5"><text style="fill:blue" y="48">❄</text></svg>') 32 32,auto;
+  --cursor-snow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="font-size: 64px;"><text style="fill:blue" y="48">❄</text></svg>') 32 32,auto;
+}
+
+/* Global stuff */
+input[type=checkbox], input[type=radio] {
+  display: none;
+}
+form {
+  margin: 0;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* layout */
+body {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  font-family: sans-serif;
+}
+body>* {
+  margin-bottom: 1rem;
+}
+
+canvas {
+  border: var(--border);
+}
+.controls {
+  position: relative;
+  box-sizing: border-box;
+  max-width: 21rem;
+
+  display: flex;
+  flex-direction: column;
+}
+
+/* Tab controls */
+.tab-bar {
+  border-bottom: var(--border);
+  white-space: nowrap;
+}
+.tab-bar>label {
+  font-size: 2rem;
+  border: var(--border);
+  margin-bottom: -1px;
+  cursor: pointer;
+  padding: 0 .7rem;
+}
+.tab-bar>label:hover {
+  background: var(--hover-button);
+}
+.tab {
+  flex-grow: 1;
+  border:var(--border);
+  border-top: 0px;
+
+  display: none;
+  flex-direction: column;
+  padding: 1rem;
+}
+input#setupTab:checked ~ .controls>.tab-bar>label[for=setupTab],
+input#addTab:checked ~ .controls>.tab-bar>label[for=addTab],
+input#heatTab:checked ~ .controls>.tab-bar>label[for=heatTab]
+{
+  border-bottom: 1px solid white;
+}
+input#setupTab:checked ~ .controls>.tab.setup,
+input#addTab:checked ~ .controls>.tab.add,
+input#heatTab:checked ~ .controls>.tab.heat
+{
+  display: flex;
+}
+
+/* within a tab */
+.tab>label {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  margin-bottom: .3rem;
+}
+.tab>label>input {
+  width: 5rem;
+}
+.tab>.spacer {
+  flex-grow: 1;
+  margin: .5rem;
+}
+.tab>.descr {
+  font: italic .9rem sans-serif;
+  border-top: var(--border);
+  padding-top: .5rem;
+}
+
+/* The setup tab */
+.tab.setup>button {
+  margin: 1rem auto;
+}
+
+/* The Add tab */
+#addTab:checked ~ canvas {
+  cursor: var(--cursor-circle-inactive);
+}
+#addTab:checked ~ canvas:active {
+  cursor: var(--cursor-circle);
+}
+.tab.add>.mode {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+.tab.add>.mode label {
+  border: var(--border);
+  cursor: pointer;
+  padding: .2rem 1rem;
+}
+.tab.add>.mode label:hover {
+  background: var(--hover-button);
+}
+.tab.add>.mode input[type=radio]:checked + label {
+  background: var(--selected-button);
+}
+
+/* The Heat tab */
+#heatTab:checked ~ canvas {
+  cursor: var(--cursor-fire-inactive);
+}
+#heatTab:checked ~ canvas:active {
+  cursor: var(--cursor-fire);
+}
+#heatTab:checked ~ canvas.cold {
+  cursor: var(--cursor-snow-inactive);
+}
+#heatTab:checked ~ canvas.cold:active {
+  cursor: var(--cursor-snow);
+}
+
+/* The play/pause button */
+#play + label {
+  position: absolute;
+  bottom:0;
+  right:100%;
+  width: 50px;
+  height: 50px;
+  border: var(--border);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 2rem;
+  background-color: white;
+}
+#play + label:hover {
+  background: var(--hover-button);
+}
+#play + label::before {
+  content: '▶';
+  text-align: center;
+  position: relative;
+  top: -.2rem;
+  right: -.2rem;
+  text-shadow: 0 0 3px var(--grey);
+}
+#play:checked + label::before {
+  content: '⏸';
+  top: 0;
+  right: 0;
+}
diff --git a/gassim/index.html b/gassim/index.html
@@ -0,0 +1,75 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+    <link href="index.css" rel="stylesheet">
+    <script type="module" src="index.js"></script>
+  </head>
+  <body>
+    <input type=radio name=tab id=setupTab checked />
+    <input type=radio name=tab id=addTab />
+    <input type=radio name=tab id=heatTab />
+    <canvas></canvas>
+
+    <div class=controls>
+      <div class=tab-bar>
+        <label for=setupTab >🏠</label>
+        <label for=addTab >±○</label>
+        <label for=heatTab ><b style="color:blue">❄</b>/🔥</label>
+      </div>
+
+      <form class='tab setup'>
+        <label>Width: <input type=number name=width min=100 value=800 /></label>
+        <label>Height: <input type=number name=height min=100 value=600 /></label>
+        <label># particles: <input type=number name=n min=0 value=30 /></label>
+        <label>Radius: <input type=number name=radius min=1 value=10 /></label>
+        <label>Density: <input type=number name=density min=1 value=1 /></label>
+        <label>Heat: <input type=number name=heat min=0 value=1000 /></label>
+        <label>Van Der Waals: <input type=number name=vdw max=0 value=-100 /></label>
+        <button>Reload</button>
+        <label>Timestep: <input type=number name=timestep min=1 max=200 step=1 /></label>
+        <label>Gravity: <input type=number name=gravity max=0 step=.01 value=-0.1 /></label>
+        <div class="spacer"></div>
+        <div class=descr>
+          <b>Initial world settings</b><br/>
+          These are the parameters used to initially set up the particles.<br/>
+          <b>Timestep</b> can be changed dynamically to speed up or slow down the simulation.
+        </div>
+      </form>
+
+      <form class='tab add'>
+        <label>Rate: <input type=number name=rate min=1 value=5 /></label>
+        <label>Radius: <input type=number name=radius min=1 value=10 /></label>
+        <label>Density: <input type=number name=density min=1 value=1 /></label>
+        <label>Heat: <input type=number name=heat min=1 value=1000 /></label>
+        <div class=mode>
+          <input type=radio name=modifyParticles id=addParticles value=add checked />
+          <label for=addParticles>+</label>
+          <input type=radio name=modifyParticles id=subtractParticles value=subtract />
+          <label for=subtractParticles>−</label>
+        </div>
+        <div class="spacer"></div>
+        <div class=descr>
+          <b>Tool to add / remove particles to the box.</b><br/>
+          Click and drag within the box to add/remove particles.<br/>
+          <b>Rate</b> controls how quickly the particles appear under your cursor.<br/>
+        </div>
+      </form>
+
+      <form class='tab heat'>
+        <label>Factor: <input type=number name=factor min=0 max=2 step=.01 value=1.1 /></label>
+        <label>Radius: <input type=number name=radius min=1 value=50 /></label>
+        <div class="spacer"></div>
+        <div class=descr>
+          <b>Tool to add / remove heat</b><br/>
+          Click and drag within the box to add or remove energy from particles passing under your
+          cursor.<br/>
+          <b>Factor</b>: if less than 1, reduces heat. If more than 1, increases heat.
+        </div>
+      </form>
+
+      <input type=checkbox id=play checked /><label for=play></label>
+    </div>
+  </body>
+</html>
+
+