3c:null 3d:["$","title",null,{"children":"3d engine in DNA code | Bankn8II©$A | Observable"}] 43: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}`44: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; }45:[{"id":"977dfb3ea8cef9c5013b6f120d523235c4dc33227f863fad3b71b2127a7cdf4dfa2fc70bddbb5a9be6502f316e8c90be8cb8c877efcef7ecce35b19ec3d551dc","href":"https://static.observableusercontent.com/files/977dfb3ea8cef9c5013b6f120d523235c4dc33227f863fad3b71b2127a7cdf4dfa2fc70bddbb5a9be6502f316e8c90be8cb8c877efcef7ecce35b19ec3d551dc","name":"image@5.png","type":"image/png","lastModified":1692623441556.612,"size":44886},{"id":"52c290dc08a3ed538965f4ea8e542a82f03b9542d4e009700729c435815189134d2a374c59af28361aa3896e0cad251f3143967bffdc1efdba9eadfad2ccb394","href":"https://static.observableusercontent.com/files/52c290dc08a3ed538965f4ea8e542a82f03b9542d4e009700729c435815189134d2a374c59af28361aa3896e0cad251f3143967bffdc1efdba9eadfad2ccb394","name":"image@6.png","type":"image/png","lastModified":1692623441556.612,"size":189145},{"id":"5fde53a0848b063a4ca9e2b84e92367d9cd1f1e84e9f33c7ecf8d50c564426f11a3ee37e73dec283aea3713e7ed3ae81ffe19dfc0dc987faafbaf6558dbddc23","href":"https://static.observableusercontent.com/files/5fde53a0848b063a4ca9e2b84e92367d9cd1f1e84e9f33c7ecf8d50c564426f11a3ee37e73dec283aea3713e7ed3ae81ffe19dfc0dc987faafbaf6558dbddc23","name":"image@4.png","type":"image/png","lastModified":1692623441556.612,"size":81664},{"id":"5ac6e9099b16e6278d2e06d18abff6a5d3a61b37b54bc34f23afa85c634a2c2ee60e1f4a61baac0a01441d1079a094e291a9b747ab65f7fa9e23545d8be0d612","href":"https://static.observableusercontent.com/files/5ac6e9099b16e6278d2e06d18abff6a5d3a61b37b54bc34f23afa85c634a2c2ee60e1f4a61baac0a01441d1079a094e291a9b747ab65f7fa9e23545d8be0d612","name":"image@3.png","type":"image/png","lastModified":1692623441556.612,"size":226826}] 41:{"id":"808571c94a1f399a","slug":null,"title":"3d engine in DNA code","thumbnail":"f498989702e8195ec14012a2a2ed4d197479a17845b7d21dfd317f198bae8be4","access_level":"public","create_time":"$D2023-08-21T13:10:41.556Z","update_time":"$D2023-08-21T13:10:41.556Z","view_time":null,"first_public_time":"$D2023-08-21T13:10:41.556Z","has_unpublished_edits":null,"fork":{"id":"45f2227392644567","slug":"3d-engine-in-dna-code","title":"3d engine in DNA code","owner":{"id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko"}},"stars":0,"starred":false,"owner":{"type":"team","id":"826e22a6d0207f7d","login":"barionleg","name":"Bankn8II©$A","avatar_url":"https://avatars-next.observableusercontent.com/01aafb4d3023fde86c946f4eaa08ddba3fad6e278d831c67730af442a1cfa3a9","tier":"starter_2024","bio":"©om₽o$€℞AРхитектBunoom\r\nBunioonArcomposers\r\nHere Just ©omposers Union of Georgia Represented science 1932. 1942E_BernVakUeartz B℞oliKBil©A₽$ \r\nвÅRDavweli Д3e uR"},"version":823,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6469a70b76e2cb5a","login":"barionleg","name":"Bankn8II©$A","avatar_url":"https://avatars-next.observableusercontent.com/4522b5e3c79c8e1ae16b69c19cbb684b8cebf9258059a4c5b89887471c967620","tier":null,"bio":"©om₽o$€℞AРхитектBunoom\r\nBunioonArcomposers\r\nHere Just ©omposers Union of Georgia Represented science 1932. 1942E_BernVakUeartz B℞oliKBil©A₽$ \r\nвÅRDavweli Д3e uR"}],"members":[{"type":"individual","id":"6469a70b76e2cb5a","login":"barionleg","name":"Bankn8II©$A","avatar_url":"https://avatars-next.observableusercontent.com/4522b5e3c79c8e1ae16b69c19cbb684b8cebf9258059a4c5b89887471c967620","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`\n
\nIf you synthesize them and make an experiment with tubes arranged like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"html`

\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.

(simplified animation based on this paper)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`## Chemical reaction networks?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`## Are you going to implement a 3d engine in chemical equations?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`## How does the engine work?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"html`` || html`Computation graph:

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`## Is it possible to comprehend what's going on?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`

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