31:T784,dna` Strand N_Y0 : TCCATTTTCATCATTAAATATCCTCAATTCAAAACCTCCTCCCA Strand N_Y_M0 : AACTCTTCTCCTATTACTACTCCAATCTT Strand Fuel0c0 : TTCACTTAATTCTACTATCTTCCTTCATTCCTAATCTCACAACT Strand Fuel0d0 : TCAACTTACAAATACTCATCACAATCCTTCACCTCCACCATCCT Strand N_Z0 : CTTTCTTATCCAATTAACCCTCACTTCTTCCCTTACATACACCT Strand N_Z_M0 : TTCCTTTTACCTCTCTACACACCATCTTT Strand Fuel1c0 : TCATCTCAACCATAAACTCCACTCACATTCATTACAAATCACCA Strand Fuel1d0 : TCTCATCTTACTTTCATAACTCCTCTTTTCTACCATCCATACCT Strand D0 : ACTACATTACTTAACCAACAACCTATTCCCTCTACCCTTTATCA Strand N_X0 : ACATACTAATCAAACCTTCCACCACATATCTAATCTTATTCACT Strand TX10 : ACCATATACTTTACATTAACTCACACTATCTATTCATACCAACT Strand TX20 : TCAAACTTAAATCCACTTCCTCCTTTACCCTAAACCACCTTACA Strand Fuel3b0 : TAACCATTATTTACCTACTCTCATCTTCT Strand A_Y_M0 : CTTACATCTTTAACTACCACACATTCTCTCCTAACAACTTCCCA Strand A_Y_M1 : CTTACATCTTTAACTACCACACATTCTCTCACCTACCTTTCACT Strand A_Y_M2 : CTTACATCTTTAACTACCACACATTCTCTCCTCTACACCAAACA Strand A_Z_M0 : CAACTATAACAATAAATTCCTCTCATTCTCACCAATCTAACCCT Strand A_Z_M1 : CAACTATAACAATAAATTCCTCTCATTCTCAATATCTTAATACA Strand A_Z_M2 : CAACTATAACAATAAATTCCTCTCATTCTCACTTTTCACACCCT Strand A_Z_M3 : CAACTATAACAATAAATTCCTCTCATTCTCCTTACCTCCATACA Strand Fuel4b0 : AACTACTATTTCAACCTTATACATAACCT Strand C_X_P0 : TAACACTACCACCAACCAAATCTACAACTCCCTTCATAAACACA Strand TX30 : ACTAACTTTATTCCTATCTTACCATTACTCCATCCCATTTAACA Strand Fuel5b0 : CATTCATCCCAATATAACTCTCAATCACA Strand M_XYZ_P0 : ATCAACACTTATCTCTATATTCCATCAATCCAACTTACTACCCT Strand M_XYZ_P1 : ATCAACACTTATCTCTATATTCCATCAATCATACTTCTATCACA Strand M_XYZ_P2 : ATCAACACTTATCTCTATATTCCATCAATCCACCAATACCCACA Strand M_XYZ_P3 : ATCAACACTTATCTCTATATTCCATCAATCCCTTCTCATAATCA Strand M_XYZ_P4 : ATCAACACTTATCTCTATATTCCATCAATCTTTACCAAACCTCA Strand TY10 : AATTCCACCTCCTACTTAAAACAACATCTCCTTCCTCAAATACA Strand TY20 : ACTCAAAATATAATCTAATAACACAATCACACCTCTTAAACCCA ... ${await FileAttachment("image@5.png").image()} ${await FileAttachment("image@6.png").image() && null}`32:T763,function dna(text, image1, image2) { const previewMode = 0; const upscale = 2; const lines = text.join(' ').trim().split('\n'); const fontSize = previewMode ? 21 : 14; const lineHeight = fontSize * 1.2; const height = previewMode ? 400 * 2 : lineHeight * lines.length; const width = previewMode ? 640 * 2 : 1000; const ctx = DOM.context2d(upscale * width, upscale * height); ctx.scale(upscale, upscale); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); ctx.font = `${lineHeight}px ${previewMode ? 'monospace' : 'monospace'}` const charWidth = ctx.measureText('A').width; let curX = 0; let curY = lineHeight; const typeChars = (chars, color) => { ctx.fillStyle = color || 'black'; ctx.fillText(chars, curX, curY); if (chars.endsWith('\n')) { curY += lineHeight; curX = 0; } else { curX += charWidth * chars.length; } } const colors = { A: 'green', C: 'blue', G: 'black', T: 'red', }; lines.forEach((line, lineNo) => { if (line.includes(':')) { typeChars(line.split(':')[0] + ':'); for (const char of line.split(':')[1]) { typeChars(char, colors[char]); }; typeChars('\n'); } else { typeChars(line + '\n'); } }); if (image1) { ctx.save(); const imageScale1 = height / image1.height / 2; ctx.translate(width, height / 4); ctx.scale(imageScale1, imageScale1); ctx.drawImage(image1, -image1.width, -image1.height / 2); ctx.restore(); } if (image2) { ctx.save(); const imageScale2 = height / image2.height / 2; ctx.translate(width, height / 2 + height / 4); ctx.scale(imageScale2, imageScale2); ctx.drawImage(image2, -image2.width, -image2.height / 2); ctx.restore(); } ctx.canvas.style.margin = '0px auto'; ctx.canvas.style.width = '100%'; return ctx.canvas; }33:[{"id":"5fde53a0848b063a4ca9e2b84e92367d9cd1f1e84e9f33c7ecf8d50c564426f11a3ee37e73dec283aea3713e7ed3ae81ffe19dfc0dc987faafbaf6558dbddc23","href":"https://static.observableusercontent.com/files/5fde53a0848b063a4ca9e2b84e92367d9cd1f1e84e9f33c7ecf8d50c564426f11a3ee37e73dec283aea3713e7ed3ae81ffe19dfc0dc987faafbaf6558dbddc23","name":"image@4.png","type":"image/png","lastModified":1605387947026.799,"size":81664},{"id":"5ac6e9099b16e6278d2e06d18abff6a5d3a61b37b54bc34f23afa85c634a2c2ee60e1f4a61baac0a01441d1079a094e291a9b747ab65f7fa9e23545d8be0d612","href":"https://static.observableusercontent.com/files/5ac6e9099b16e6278d2e06d18abff6a5d3a61b37b54bc34f23afa85c634a2c2ee60e1f4a61baac0a01441d1079a094e291a9b747ab65f7fa9e23545d8be0d612","name":"image@3.png","type":"image/png","lastModified":1605387371229.127,"size":226826},{"id":"977dfb3ea8cef9c5013b6f120d523235c4dc33227f863fad3b71b2127a7cdf4dfa2fc70bddbb5a9be6502f316e8c90be8cb8c877efcef7ecce35b19ec3d551dc","href":"https://static.observableusercontent.com/files/977dfb3ea8cef9c5013b6f120d523235c4dc33227f863fad3b71b2127a7cdf4dfa2fc70bddbb5a9be6502f316e8c90be8cb8c877efcef7ecce35b19ec3d551dc","name":"image@5.png","type":"image/png","lastModified":1605450180055.447,"size":44886},{"id":"52c290dc08a3ed538965f4ea8e542a82f03b9542d4e009700729c435815189134d2a374c59af28361aa3896e0cad251f3143967bffdc1efdba9eadfad2ccb394","href":"https://static.observableusercontent.com/files/52c290dc08a3ed538965f4ea8e542a82f03b9542d4e009700729c435815189134d2a374c59af28361aa3896e0cad251f3143967bffdc1efdba9eadfad2ccb394","name":"image@6.png","type":"image/png","lastModified":1605458335747.082,"size":189145}] 2f:{"title":"3d engine in DNA code","cells":[{"id":765,"value":"md`\n\n\n\n# 3d engine in DNA code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`I am not crazy and yes, this is a step-by-step tutorial on how to implement 3d engine in DNA code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"md`In the end, we'll obtain a list with lots of DNA sequences\n\n* [project on GitHub](https://github.com/pallada-92/dna-3d-engine)\n* [interactive simulator on ObservableHQ](https://observablehq.com/@pallada-92/chemical-reaction-network-simulator#3d-engine)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`\n
\nIf you synthesize them and make an experiment with tubes arranged like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`You may get an image of a cube:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"html`\n

\n\n

Disclaimer: perhaps it would not be a good idea to try this experiment in a real lab, because it will cost you a lot of money and most likely won’t work as intended the first time.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## Isn't DNA just a storage medium?
How can it compute anything?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`Yes, DNA is used here in a non-traditional way. The idea is to exploit the complementarity property — the feature which normally helps DNA repair itself.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`The miraculous consequence of this property is that DNA is able to exchange poorly matched regions with a better one under some conditions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`This means that if we put lots of non-complementary DNA sequences into a tube, they will interact to minimize the number of mismatched pairs. The toehold mediated strand displacement technique is one of the ways to achieve complex behavior this way.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`\n

(simplified animation based on this paper)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`In 2010 David Soloveichik, Georg Seelig, and Erik Winfree proposed using this technique as a way to implement chemical reaction networks in DNA.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`## Chemical reaction networks?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`\nYes, they found a way to implement boring chemical equations such as\n\n${tex.block`A \\rightarrow A + B\\\\ B + B \\rightarrow C`}\n\nin DNA code.\nBut now we can devise species which can interact in any way we want, not limited to existing chemical substances.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`## Are you going to implement a 3d engine in chemical equations?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`\nYes:\n\n${tex.block`\\begin{aligned}\nA + B &\\rightarrow L + M + H + O + B\\\\\nA + C &\\rightarrow K + M + I + O + C\\\\\nA + D &\\rightarrow J + N + O + D\\\\\nE + H &\\rightarrow 2 K\\\\\nF + I &\\rightarrow 2 L\\\\\nG + J &\\rightarrow 2 M\\\\\nK + L &\\rightarrow N\\\\\nN + M &\\rightarrow P\\\\\nO + P &\\rightarrow\\\\\nQ + O &\\rightarrow Q + R + A + O\n\\end{aligned}`}\n\nThese are 10 reactions of 18 species, which implement a simple ray marching 3d rendering engine for a scene with a cube.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`You can verify that they produce the image of the cube in the simulator I've made. Select \"minimalist 3d engine\" in examples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`## How does the engine work?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`Here is the pseudocode of the engine in JavaScript. You can check out an interactive version in this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"html`\n

\n${md`\n\\`\\`\\`javascript\nfunction getCellBrightness(row, col) {\n const nx = 0.04 + col * 0.56 + row * 0.15;\n const ny = 0.85 + row * -0.52;\n const nz = 0.74 + col * -0.27 + row * 0.30;\n const n = nx + ny + nz;\n\n let v = 0;\n for (let iter=0; iter<100; iter++) {\n const x = -0.61 + v * nx / n;\n const y = -0.90 + v * ny / n;\n const z = -1.24 + v * nz / n;\n v += Math.max(Math.abs(x), Math.abs(y), Math.abs(z)) - 0.3;\n }\n\n return (v - 1.75) / 1.70;\n}\n\\`\\`\\``}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"html`` || html`Computation graph:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`## How was this algorithm implemented in chemical equations?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`A comparison of the blocks of reactions to the mathematical functions they compute:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`The plus/minus signs and subscripts are for convenience, they have no special meaning.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"html`` || md`Here is the visual representation of species interactions:\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`## Is it possible to comprehend what's going on?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`You can think of these reactions as a mail correspondence between several agents, each of which keeps track of its own value. There are two types of messages: an increase of about 1 and a decrease of about 1.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`So, if we want to implement the max function, we need to design a set of rules of how to process messages so that the values are updated the right way.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"tex.block`\n\\begin{aligned}\nX^+ &\\rightarrow Y^- + R^+\\\\\nY^+ &\\rightarrow X^- + R^+\\\\\nX^- + Y^- &\\rightarrow R^-\\\\\nR^+ + R^- &\\rightarrow \\varnothing\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`The reactions above compute ${tex`R = \\max(X, Y)`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`## How to get the DNA code?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"md`You need to get the piperine utility by the DNA and Natural Algorithms Group.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`Put the reactions into the reactions.crn file. Note that it allows a maximum of 2 species on the right side of the equation, so you may need to split some equations into smaller ones.\n\nRun the following command:\n

piperine-design reactions.crn -n 1 --maxspurious 0.765

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`You may need to adjust the maxspurious value. Note, that if it is too low, you will get the error: \"Cannot make toeholds to user specification\", but if it is too high, it will hang for a long time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"md`If you've guessed maxspurious right, you'll get the DNA code in about 1 hour for 10 reactions (if you do not pass the -n 1 parameter, it will take 3 times as long).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"md`The sequences you want will be in the reactions0.seqs and reactions0_strands.txt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`--------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}