30: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

`31: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

`32: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

`; }33: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" } ] ]34: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` : "" }

`; }35: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 } ]36:[] 2e:{"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"},{"id":59,"value":"slide.md`# [Piet Mondrian](https://en.wikipedia.org/wiki/Piet_Mondrian) (1872-1944)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"slide.md`# what if we could interpret _art_ as _code_?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"slide.md`## Meet [Piet](https://www.dangermouse.net/esoteric/piet.html)!\n\n- Esoteric programming language aka \"esolang\"\n- Created by [David Morgan-Mar](https://esolangs.org/wiki/David_Morgan-Mar)\n- Source code is abstract art!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"slide.md`# how does Piet interpret _pixels_ as a _program_?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"slide.md`# Colors!\n\n${colorTable()}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"pointerWalk = slide.html(\n 'small'\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

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"viewof demoStep = stepper(pointerSteps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2146,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"slide.html`

Color changes are commands!

\n\n

\n \n \n

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

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"slide.html`

Color changes are commands!

\n\n

\n \n \n

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

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"slide.html`

Color changes are commands!

\n\n

\n \n \n

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

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"slide.md`## Commands manipulate the stack:\n\n\n\n\n\n\n\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"},{"id":198,"value":"slide.md`# let's run a program!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1742,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"viewof runStep = stepper(programSteps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2264,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"slide.html`\n\n

Brainf*ck interpreter(!!)

\n\n

Text adventure(!!)

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5,"value":"-------\n\n### Appendix\n\nThe cells below power the presentation above!","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import { slide, notes, style, keyBindings } from \"@visnup/slides\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"// some extra styling to make it my own\ncustomStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":229,"value":"huePie = d3.pie().value(d => 1)(hueCycle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"hueCycleArc = () => html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"arrow3 = () => svg`\n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":368,"value":"lightnessPie = d3.pie().value(d => 1)(lightnessCycle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"lightnessCycleArc = () => html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1429,"value":"findColor = name => allColors.flat().find(c => c.name === name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"stack = values => html`\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"},{"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"},{"id":1202,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"grid = () =>\n d3.range(10).map(\n (_, i) =>\n svg`\n `\n )","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":806,"value":"programSvg = (showGrid = true, showPointer = false) => svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1473,"value":"pointer = (\n rotate = 0\n) => svg` \n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2054,"value":"pointerSteps = programSteps.map(({ pointer }) => pointer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}