diff --git a/assets/math.js b/assets/math.js new file mode 100644 index 0000000..0f0ed2c --- /dev/null +++ b/assets/math.js @@ -0,0 +1,39 @@ +function defineVars(vars) { + const data = new Map(vars); + + window.addEventListener('DOMContentLoaded', () => { + const mathVars = document.querySelectorAll('span.katex span.mord.mathnormal'); + + mathVars.forEach(el => { + for (const [v, help] of data.entries()) { + if (el.textContent == v) el.setAttribute('title', help); + } + }); + }); +} + +function plot(target, fn, deps) { + const depsEl = deps.map(document.querySelector.bind(document)); + const plot = () => { + functionPlot({ + target, + width: 600, + height: 400, + yAxis: { domain: [-1, 9] }, + grid: true, + data: [ + { + fn: fn(...(depsEl.map(el => el.value))) + } + ] + }); + } + + depsEl.forEach(el => { + el.addEventListener((el.tagName == 'INPUT' && el.type == 'range' ? 'mousemove' : 'change'), plot); + }); + + plot(); +} + +Object.assign(window, {defineVars, plot}); \ No newline at end of file diff --git a/assets/simplest-circuit-dg1.png b/assets/simplest-circuit-dg1.png new file mode 100644 index 0000000..00e36a1 Binary files /dev/null and b/assets/simplest-circuit-dg1.png differ diff --git a/assets/site.css b/assets/site.css index 65a348f..7681e9b 100644 --- a/assets/site.css +++ b/assets/site.css @@ -148,4 +148,22 @@ footer { li:not(:first-child) { padding-top: 8px; +} + +.graph { + display: flex; + flex-direction: column; + align-items: center; +} + +img { + width: 50%; + display: block; + margin: auto; +} + +i.cite { + display: block; + text-align: center; + padding-top: 8px; } \ No newline at end of file diff --git a/layouts/base.html b/layouts/base.html index 0e771dc..9f50275 100644 --- a/layouts/base.html +++ b/layouts/base.html @@ -4,8 +4,17 @@ {{title}} | Biocircuits for Mere Mortals - + + + + + + + + +
@@ -14,6 +23,9 @@
diff --git a/pages/index.html b/pages/index.html index 0c8a90d..1ef1f74 100644 --- a/pages/index.html +++ b/pages/index.html @@ -7,6 +7,8 @@

for mere mortals

(albeit ones who know a bit of differential calculus)

+

DISCLAIMER: This is a school project. I would like to think that the CalTech course I've drawn from has made me somewhat knowledgeable on this topic, but please do not use this for medical advice, etc., etc. If you happen to know what you are doing, and you find a mistake on this website, please tell me about it. With that said:

+

Biological circuit design is the science of abstracting natural biological processes by defining them as you would any synthetic circuit. It also allows us to create our own circuits out of natural components. @@ -17,7 +19,7 @@ Indeed, the marvelous progression of electronic circuit capabilities [...] could well describe biological circuits decades from now. Like electronics, we may will soon be able to program cellular “miracle devices” to create “little gadgets” that address serious environmental and medical applications. -

That CalTech course will be the main source for this presentation.

+

That CalTech course will be the main source for this presentation. All diagrams are from it.

Let's dive in!

@@ -28,23 +30,28 @@