31:T5dc,# Hello Logo I saw that [Alex Garcia](https://observablehq.com/@asg017) figured out how to hack Observable's new [cell modes](https://observablehq.com/@observablehq/cell-modes) to [support sql](https://observablehq.com/@asg017/hacking-observables-new-cell-modes-to-use-sql) thought that was really cool. I've been playing with Logo lately, and thought it might be a great fit for Observable. I was able to find [a Logo interpreter in JS](https://github.com/inexorabletash/jslogo) and somehow got it to work in observable (with some super glue... this thing is hacky!!). Logo is a seriously cool programming language with a rich history that I only know a little bit about. It's designed to be _learnable_... to be highly intuitive for children to reason about as they write their first programs. It's optimized for play. Children do well with Logo because they can imagine the program's execution through anthropomorphizing a turtle! I think notebooks + Logo could be awesome for new programmers becuase it mixes narrative writing in with examples that are explorable. You can either use the `logo` template literal exported from this notebook, or overwrite the `tex` cell mode like Alex did! ```js logo`to fern :size :sign if :size < 1 [ stop ] fd :size rt 70 * :sign fern :size * 0.5 :sign * -1 lt 70 * :sign fd :size lt 70 * :sign fern :size * 0.5 :sign rt 70 * :sign rt 7 * :sign fern :size - 1 :sign lt 7 * :sign bk :size * 2 end window clearscreen pu bk 150 pd fern 25 1` ```32:T7f7,function logo(source) { const htmlNodes = html`

` const $ = htmlNodes.querySelector.bind(htmlNodes); const $$ = htmlNodes.querySelectorAll.bind(htmlNodes); const stream = { read: function(s) { }, write: function() { var div = $('.overlay'); for (var i = 0; i < arguments.length; i += 1) { div.innerHTML += escapeHTML(arguments[i]); } div.scrollTop = div.scrollHeight; return asyncResult(); }, clear: function() { var div = $('.overlay'); div.innerHTML = ""; return asyncResult(); }, readback: function() { var div = $('.overlay'); return asyncResult(div.innerHTML); }, get textsize() { return parseFloat($('.overlay').style.fontSize.replace('px', '')); }, set textsize(height) { $('.overlay').style.fontSize = Math.max(height, 1) + 'px'; }, get font() { return $('.overlay').style.fontFamily; }, set font(name) { if (['serif', 'sans-serif', 'cursive', 'fantasy', 'monospace'].indexOf(name) === -1) name = JSON.stringify(name); $('.overlay').style.fontFamily = name; }, get color() { return $('.overlay').style.color; }, set color(color) { $('.overlay').style.color = color; } } let canvas_element = $(".sandbox"), canvas_ctx = canvas_element.getContext('2d'), turtle_element = $(".turtle"), turtle_ctx = turtle_element.getContext('2d'); let t = new turtle.CanvasTurtle( canvas_ctx, turtle_ctx, canvas_element.width, canvas_element.height, $('.overlay')); let logo = new turtle.LogoInterpreter( t, stream, ); logo.run(source.raw[0]) return htmlNodes }33:[] 2f:{"title":"Hello Logo","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"to fern :size :sign\n if :size < 1 [ stop ]\n fd :size\n rt 70 * :sign fern :size * 0.5 :sign * -1 lt 70 * :sign\n fd :size\n lt 70 * :sign fern :size * 0.5 :sign rt 70 * :sign\n rt 7 * :sign fern :size - 1 :sign lt 7 * :sign\n bk :size * 2\nend\nwindow clearscreen pu bk 150 pd\nfern 25 1","pinned":true,"hidden":false,"mode":"tex"},{"id":144,"value":"clearscreen window hideturtle\nrepeat 144 [\n setlabelheight repcount\n penup\n fd repcount * repcount / 30\n label \"Logo\n bk repcount * repcount / 30\n pendown\n rt 10\n wait 5\n]\nshowturtle","pinned":true,"hidden":false,"mode":"tex"},{"id":137,"value":"to tree :size\n if :size < 5 [forward :size back :size stop]\n forward :size/3\n left 30 tree :size*2/3 right 30\n forward :size/6\n right 25 tree :size/2 left 25\n forward :size/3\n right 25 tree :size/2 left 25\n forward :size/6\n back :size\nend\nclearscreen\ntree 150","pinned":true,"hidden":false,"mode":"tex"},{"id":140,"value":"to square :length\n repeat 4 [ fd :length rt 90 ]\nend\nto randomcolor\n setcolor pick [ red orange yellow green blue violet ]\nend\nclearscreen\nrepeat 36 [ randomcolor square random 200 rt 10 ]","pinned":true,"hidden":false,"mode":"tex"},{"id":131,"value":"tex = ({\n block: logo\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"function asyncResult(value) {\n return new Promise(function(resolve) {\n setTimeout(function() { resolve(value); }, 0);\n });\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"function escapeHTML(s) {\n return String(s).replace(/[&<>]/g, function(c) {\n switch (c) {\n case '&': return '&';\n case '<': return '<';\n case '>': return '>';\n default: return c;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"turtle = requireFromGithub(\"https://raw.githubusercontent.com/zekenie/jslogo/main/dist/jslogo.umd.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"async function requireFromGithub(url) {\n const response = await fetch(url);\n const blob = await response.blob();\n return require(URL.createObjectURL(blob))\n\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}