Show formula by pressing 'F' (#1)

abagames · Aug 3, 2019 · 9da2aa2 · 9da2aa2
1 parent 788e7fe
commit 9da2aa2
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 19 deletions.
diff --git a/docs/folmura.gif b/docs/folmura.gif
diff --git a/docs/index.html b/docs/index.html
@@ -1,2 +1,2 @@
 <!DOCTYPE html><html><head><meta charset="utf-8"><title>folmura</title><meta name="viewport" content="width=device-width, height=device-height,
-    user-scalable=no, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="main.5cb37830.css"><script src="main.800980bd.js"></script></head><body style="background:#111"></body></html>
+    user-scalable=no, initial-scale=1, maximum-scale=1"><script src="main.e14af47b.js"></script></head><body style="background:#111"></body></html>
diff --git a/docs/main.5cb37830.css b/docs/main.5cb37830.css
diff --git a/docs/main.800980bd.js → docs/main.e14af47b.js b/docs/main.800980bd.js → docs/main.e14af47b.js
diff --git a/src/formula.ts b/src/formula.ts
@@ -8,6 +8,36 @@ export type Formula = {
   value?: string;
 };
 
+const funcList = [
+  [plus, 2],
+  [minus, 2],
+  [times, 2],
+  [divide, 2],
+  [sin, 1],
+  [sin, 1],
+  [cos, 1],
+  [cos, 1],
+  [exp, 1],
+  [pow, 2],
+  [noise, 1],
+  [condition, 4]
+];
+
+const funcListNames = [
+  "plus",
+  "minus",
+  "times",
+  "divide",
+  "sin",
+  "sin",
+  "cos",
+  "cos",
+  "exp",
+  "pow",
+  "noise",
+  "condition"
+];
+
 export function generate(random: Random, depth = 0): Formula {
   const r = random.get();
   const dr = depth / 3;
@@ -17,21 +47,7 @@ export function generate(random: Random, depth = 0): Formula {
       value: random.select(["t", "i", "a", "b"])
     };
   } else {
-    const funcs = [
-      [plus, 2],
-      [minus, 2],
-      [times, 2],
-      [divide, 2],
-      [sin, 1],
-      [sin, 1],
-      [cos, 1],
-      [cos, 1],
-      [exp, 1],
-      [pow, 2],
-      [noise, 1],
-      [condition, 4]
-    ];
-    const fa = random.select(funcs);
+    const fa = random.select(funcList);
     const func = fa[0];
     const args = range(fa[1]).map(() => generate(random, depth + 1));
     return { func, args };
@@ -50,6 +66,30 @@ export function swapSinCos(f: Formula) {
   };
 }
 
+export function toString(formula: Formula) {
+  const func = formula.func;
+  let argStrs = [];
+  if (formula.args != null) {
+    argStrs = formula.args.map(a => toString(a));
+  }
+  if (func === plus) {
+    return `(${argStrs[0]}+${argStrs[1]})`;
+  } else if (func === minus) {
+    return `(${argStrs[0]}-${argStrs[1]})`;
+  } else if (func === times) {
+    return `${argStrs[0]}*${argStrs[1]}`;
+  } else if (func === divide) {
+    return `${argStrs[0]}/${argStrs[1]}`;
+  } else if (func === variable) {
+    return formula.value;
+  } else if (func == condition) {
+    return `(${argStrs[0]}>${argStrs[1]}?${argStrs[2]}:${argStrs[3]})`;
+  }
+  const fi = funcList.findIndex(f => f[0] === func);
+  const name = funcListNames[fi];
+  return `${name}(${argStrs.join(",")})`;
+}
+
 function variable(formula: Formula, variables) {
   return variables[formula.value];
 }

diff --git a/src/main.ts b/src/main.ts
@@ -12,6 +12,8 @@ const seedRandom = new Random();
 const random = new Random();
 const variables: any = {};
 let renderer;
+let formulaDiv: HTMLDivElement;
+let isShowingFormula = false;
 
 function setup() {
   renderer = p.createCanvas(500, 250);
@@ -23,6 +25,17 @@ transform: translate(-50%, -50%);
   `;
   p.colorMode(p.HSB);
   p.background(0);
+  formulaDiv = document.createElement("div");
+  formulaDiv.style.cssText = `
+color: white;
+font-family: monospace;
+font-size: 12px;
+width: 500px;
+position: absolute;
+left: 50%;
+transform: translate(-50%, 0%);
+`;
+  document.body.appendChild(formulaDiv);
   const seed = loadFromUrl();
   if (seed == null) {
     nextFormulas();
@@ -31,6 +44,13 @@ transform: translate(-50%, -50%);
     generateFormulas();
   }
   p.touchStarted = nextFormulas;
+  p.keyPressed = () => {
+    if (p.key !== "f") {
+      return;
+    }
+    isShowingFormula = !isShowingFormula;
+    isShowingFormula ? showFormula() : hideFormula();
+  };
   if (isCapturing) {
     gcc.setOptions({ capturingFps: 60, durationSec: 2 });
   }
@@ -102,6 +122,9 @@ function generateFormulas() {
   variables["a"] = random.getInt(2, 10);
   variables["b"] = random.getInt(2, 10);
   t = 0;
+  if (isShowingFormula) {
+    showFormula();
+  }
 }
 
 function draw() {
@@ -193,6 +216,24 @@ function adjustFormulaRange(fr: FormulaRange) {
   fr.frameMax = fr.min;
 }
 
+function showFormula() {
+  formulaDiv.innerText = `
+x = ${formula.toString(formulas[0])}
+y = ${formula.toString(formulas[1])}
+w = ${formula.toString(formulas[2])}
+h = ${formula.toString(formulas[3])}
+H = ${formula.toString(formulas[4])}
+S = ${formula.toString(formulas[5])}
+B = ${formula.toString(formulas[6])}
+a = ${variables["a"]}
+b = ${variables["b"]}
+`;
+}
+
+function hideFormula() {
+  formulaDiv.innerText = "";
+}
+
 function saveAsUrl(seed: number) {
   const baseUrl = window.location.href.split("?")[0];
   let url = `${baseUrl}?s=${seed}`;