2c:null 2d:["$","title",null,{"children":"It’s a picture! It’s a program!! It’s Piet!!! | Anjana Vakil | Observable"}] 32:T49d,slide.html` => Hello, world!

Hello World Piet program by David Morgan-Mar — David Morgan-Mar

Hello World Piet program by Thomas Schoch — Thomas Schoch

Hello World Piet program by Kelly Boothby — Kelly Boothby

`33:T415,slide.html`

Color blocks are data!

${programSvg()}

Color	Block size
magenta	33
dark magenta	1, 1, 11
dark cyan	5, 1
green	5, 1
light yellow	12
white	N/A - empty
black	N/A - edge

`34:T697,seePietRun = { const state = programSteps[runStep]; const currentColor = state.currentBlock ? findColor(state.currentBlock[0]) : {}; const prevColor = state.prevBlock ? findColor(state.prevBlock[0]) : {}; return slide.html('small')`

See Piet run!

${programSvg(true, state.pointer)}

current	${state.currentBlock ? state.currentBlock[1] : ""}
previous	${state.prevBlock ? state.prevBlock[1] : ""}
command	${state.command \|\| ""}

${stack(state.stack)}

 ${state.stdout ||
    ""}
output

`; }35:T51d,allColors = [ [ { color: "#FFC0C0", name: "light red", contrast: "black" }, { color: "#FFFFC0", name: "light yellow", contrast: "black" }, { color: "#C0FFC0", name: "light green", contrast: "black" }, { color: "#C0FFFF", name: "light cyan", contrast: "black" }, { color: "#C0C0FF", name: "light blue", contrast: "black" }, { color: "#FFC0FF", name: "light magenta", contrast: "black" } ], [ { color: "#FF0000", name: "red", contrast: "white" }, { color: "#FFFF00", name: "yellow", contrast: "black" }, { color: "#00FF00", name: "green", contrast: "black" }, { color: "#00FFFF", name: "cyan", contrast: "black" }, { color: "#0000FF", name: "blue", contrast: "white" }, { color: "#FF00FF", name: "magenta", contrast: "black" } ], [ { color: "#C00000", name: "dark red", contrast: "white" }, { color: "#C0C000", name: "dark yellow", contrast: "black" }, { color: "#00C000", name: "dark green", contrast: "black" }, { color: "#00C0C0", name: "dark cyan", contrast: "black" }, { color: "#0000C0", name: "dark blue", contrast: "white" }, { color: "#C000C0", name: "dark magenta", contrast: "white" } ], [ { color: "#FFFFFF", name: "white", contrast: "black" }, { color: "#000000", name: "black", contrast: "white" } ] ]36:T65c,colorCommandsTable = ( current = "light red", showCommands = true, next = false ) => { let indexOfCurrent = { col: allColors .map(r => r.findIndex(c => c.name === current)) .filter(i => i > -1)[0], row: allColors.findIndex(r => r.some(c => c.name === current)) }; return html` ${allColors[indexOfCurrent.row].map( (c, ci) => html`` )} ${allColors.slice(0, -1).map( (row, ri) => html` ${row.map( (c, ci) => html` ` )}` )}

	${`+${(6 + ci - indexOfCurrent.col) % 6} Hue`}
+${(3 + ri - indexOfCurrent.row) % 3} Light	${ c.name === current ? "CURRENT COLOR" : showCommands ? commands[ (3 + ri - indexOfCurrent.row) % 3 // lightness steps ][ (6 + ci - indexOfCurrent.col) % 6 // hue steps ] : next && c.name === next ? `+${(6 + ci - indexOfCurrent.col) % 6} Hue +${(3 + ri - indexOfCurrent.row) % 3} Light` : "" }

`; }37:Tc84,programSteps = [ { pointer: false, currentBlock: null, prevBlock: null, command: null, stack: [], stdout: "", stuck: false }, { pointer: { x: 0, y: 0, r: 0 }, currentBlock: ["magenta", 33], prevBlock: null, command: null, stack: [], stdout: "", stuck: false }, { pointer: { x: 4, y: 0, r: 0 }, currentBlock: ["magenta", 33], prevBlock: ["magenta", 33], command: null, stack: [], stdout: "", stuck: false }, { pointer: { x: 5, y: 0, r: 0 }, currentBlock: ["dark magenta", 11], prevBlock: ["magenta", 33], command: "push", stack: [["magenta", 33]], stdout: "", stuck: false }, { pointer: { x: 6, y: 0, r: 0 }, currentBlock: ["dark cyan", 5], prevBlock: ["dark magenta", 11], command: "duplicate", stack: [["magenta", 33], ["white", 33]], stdout: "", stuck: false }, { pointer: { x: 7, y: 0, r: 0 }, currentBlock: ["green", 5], prevBlock: ["dark cyan", 5], command: "out(char)", stack: [["magenta", 33]], stdout: "!", stuck: false }, { pointer: { x: 8, y: 0, r: 0 }, currentBlock: ["light yellow", 12], prevBlock: ["green", 5], command: "out(char)", stack: [], stdout: "!!", stuck: false }, { pointer: { x: 9, y: 8, r: 0 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: null, stack: [], stdout: "!!", stuck: false }, { pointer: { x: 9, y: 8, r: 90 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: null, stack: [], stdout: "!!", stuck: false }, { pointer: { x: 8, y: 9, r: 90 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: null, stack: [], stdout: "!!", stuck: false }, // { // pointer: { x: 8, y: 9, r: 90 }, // currentBlock: ["light yellow", 12], // prevBlock: ["light yellow", 12], // command: null, // stack: [], // stdout: "!!", // stuck: false // }, { pointer: { x: 8, y: 9, r: 180 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: null, stack: [], stdout: "!!", stuck: false }, { pointer: { x: 7, y: 8, r: 180 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: null, stack: [], stdout: "!!", stuck: false }, { pointer: { x: 7, y: 8, r: 270 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: null, stack: [], stdout: "!!", stuck: false }, { pointer: { x: 8, y: 0, r: 270 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: null, stack: [], stdout: "!!", stuck: false }, { pointer: { x: 8, y: 0, r: 360 }, currentBlock: ["light yellow", 12], prevBlock: ["light yellow", 12], command: "exit", stack: [], stdout: "!!", stuck: true }, { pointer: null, currentBlock: null, prevBlock: null, command: null, stack: [], stdout: "!!", stuck: null } ]38:[] 30:{"id":"b8ed8d30b994a196","slug":"piet-bangbangcon","title":"It’s a picture! It’s a program!! It’s Piet!!!","thumbnail":"025f2269fffc9bf7355c570d06bcc1c4181395de7fa5583f3bb2de773a138b7e","access_level":"public","create_time":"$D2021-05-17T21:17:09.801Z","update_time":"$D2021-05-28T22:19:46.161Z","view_time":null,"first_public_time":"$D2021-05-21T23:45:42.131Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":2420,"publish_version":2420,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}],"members":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b424d908f747917a","slug":"talks","title":"Talks","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"type":"notebook","body":{"titling":"auto","title":"It’s a picture! It’s a program!! It’s Piet!!!","cells":[{"id":0,"value":"slide.md`# It’s a picture!
It’s a program!!
It’s [Piet]()!!!\n
\n#### [@AnjanaVakil](https://twitter.com/AnjanaVakil)\n#### !!Con 2021\n

Slides: [observablehq.com/@anjana/piet-bangbangcon](https://observablehq.com/@anjana/piet-bangbangcon)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"slide.md`# [Piet Mondrian](https://en.wikipedia.org/wiki/Piet_Mondrian) (1872-1944)\n\n

A pointer walks the image!

\n\n${programSvg(true, pointerSteps[demoStep])}\n\n\n

\n\n\n\n\n\n\n\n\n\n\n\n\n

When you hit...	then...
color block	move to farthest edge of block
white	pass through
black/edge	rotate clockwise
full rotation in same block	exit program

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"slide.html`

Color changes are commands!

\n\n

\n \n \n

\n${colorCommandsTable(\"light red\", false, \"dark magenta\")}\n

Color changes are commands!

\n\n

\n \n \n

\n${colorCommandsTable(\"light red\", true)}\n

Color changes are commands!

\n\n

\n \n \n

\n${colorCommandsTable(\"dark magenta\", true)}\n

\\`push\\`	place previous block's value onto stack
\\`pop\\`	take top value off of stack & discard
\\`add\\`	pop top 2 values, add them, push the sum
\\`duplicate\\`	read top value & push another copy
\\`out(num)\\` \\`out(char)\\`	pop top value & print to stdout (as number or character code)

\n\n

See DMM's Piet site for [explanations of all commands](https://www.dangermouse.net/esoteric/piet.html)

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"slide.md`# let's run a program!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1889,"value":"viewof runStep = stepper(programSteps)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2264,"value":"html`

Brainf*ck interpreter(!!)

\n\n

Text adventure(!!)

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2326,"value":"slide.md`### Learn more & play with [Piet](https://www.dangermouse.net/esoteric/piet.html)!\n\n- Piet overview by David Morgan-Mar: [dangermouse.net/esoteric/piet.html](https://www.dangermouse.net/esoteric/piet.html)\n- Esolang wiki: [esolangs.org/wiki/Piet](https://esolangs.org/wiki/Piet)\n- \\`npiet\\` interpreter by BertNase: [bertnase.de/npiet](http://www.bertnase.de/npiet/)\n- \\`MasterPiets\\` IDE by Gabrielle Singh Cadieux: [gabrillesc.github.io/piet](https://gabriellesc.github.io/piet/)\n\n

Sample program images via [David Morgan-Mar](https://www.dangermouse.net/esoteric/piet/samples.html) and [BertNase](http://www.bertnase.de/npiet/npiet-execute.php)

\n\n### Thank you!\n

Slides: [observablehq.com/@anjana/piet-bangbangcon](https://observablehq.com/@anjana/piet-bangbangcon)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"-------\n\n### Appendix\n\nThe cells below power the presentation above!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { slide, notes, style, keyBindings } from \"@visnup/slides\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"// some extra styling to make it my own\ncustomStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"hueCycle = [\n { color: \"#FF0000\", name: \"red\", contrast: \"white\" },\n { color: \"#FFFF00\", name: \"yellow\", contrast: \"black\" },\n { color: \"#00FF00\", name: \"green\", contrast: \"black\" },\n { color: \"#00FFFF\", name: \"cyan\", contrast: \"black\" },\n { color: \"#0000FF\", name: \"blue\", contrast: \"white\" },\n { color: \"#FF00FF\", name: \"magenta\", contrast: \"black\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"huePie = d3.pie().value(d => 1)(hueCycle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"hueCycleArc = () => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"arrow3 = () => svg`\n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"lightnessCycle = [\n { color: \"#C0FFFF\", name: \"light\", contrast: \"black\" },\n { color: \"#00FFFF\", name: \"normal\", contrast: \"black\" },\n { color: \"#00C0C0\", name: \"dark\", contrast: \"black\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"lightnessPie = d3.pie().value(d => 1)(lightnessCycle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"lightnessCycleArc = () => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"arc = d3\n .arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n// .cornerRadius(8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"findColor = name => allColors.flat().find(c => c.name === name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"colorTable = () => html`\n\n\n${allColors.map(\n row => html`\n \n ${row.map(\n c =>\n html`\n `\n )}\n \n`\n)}\n\n

\n \n ${c.name}\n
\n ${c.color}\n

\n${values.map(([colorName, n]) => {\n let { color, contrast } = findColor(colorName);\n return html`

${n}

`;\n})}\n

stack

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"commands = [\n // commands[lightsteps][huesteps]\n [null, \"add\", \"divide\", \"greater\", \"duplicate\", \"in(char)\"],\n [\"push\", \"subtract\", \"mod\", \"pointer\", \"roll\", \"out(num)\"],\n [\"pop\", \"multiply\", \"not\", \"switch\", \"in(num)\", \"out(char)\"]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"grid = () =>\n d3.range(10).map(\n (_, i) =>\n svg`\n `\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"programData = [\n [\"m\", \"m\", \"m\", \"m\", \"m\", \"dm\", \"dc\", \"g\", \"ly\", \"b\"],\n [\"m\", \"b\", \"m\", \"b\", \"m\", \"dm\", \"dc\", \"g\", \"ly\", \"b\"],\n [\"m\", \"b\", \"m\", \"b\", \"m\", \"dm\", \"dc\", \"g\", \"ly\", \"b\"],\n [\"m\", \"b\", \"m\", \"b\", \"m\", \"dm\", \"dc\", \"g\", \"ly\", \"b\"],\n [\"m\", \"b\", \"m\", \"b\", \"m\", \"dm\", \"dc\", \"g\", \"ly\", \"b\"],\n [\"m\", \"b\", \"m\", \"b\", \"m\", \"dm\", \"w\", \"w\", \"ly\", \"b\"],\n [\"m\", \"b\", \"m\", \"b\", \"m\", \"dm\", \"dc\", \"g\", \"ly\", \"b\"],\n [\"m\", \"dm\", \"m\", \"dm\", \"m\", \"dm\", \"b\", \"b\", \"ly\", \"b\"],\n [\"m\", \"b\", \"m\", \"b\", \"m\", \"dm\", \"b\", \"ly\", \"ly\", \"ly\"],\n [\"m\", \"m\", \"m\", \"m\", \"dm\", \"dm\", \"b\", \"b\", \"ly\", \"b\"]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"colorMap = ({\n m: { color: \"#FF00FF\", name: \"magenta\", contrast: \"black\" },\n dm: { color: \"#C000C0\", name: \"dark magenta\", contrast: \"white\" },\n dc: { color: \"#00C0C0\", name: \"dark cyan\", contrast: \"black\" },\n g: { color: \"#00FF00\", name: \"green\", contrast: \"black\" },\n ly: { color: \"#FFFFC0\", name: \"light yellow\", contrast: \"black\" },\n w: { color: \"#FFFFFF\", name: \"white\", contrast: \"black\" },\n b: { color: \"#000000\", name: \"black\", contrast: \"white\" }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"programSvg = (showGrid = true, showPointer = false) => svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"pointer = (\n rotate = 0\n) => svg` \n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"stepper = steps =>\n Inputs.button(\n [\n [\"< Back\", value => Math.max(value - 1, 0)],\n [\"Forward >\", value => Math.min(value + 1, steps.length - 1)],\n [\"Reset\", value => 0]\n ],\n { value: 0, label: \" \" }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2054,"value":"pointerSteps = programSteps.map(({ pointer }) => pointer)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"