45:["$","title",null,{"children":"The Snake that Ate Its Tail | Paul Fishwick | Observable"}] 4d:[{"id":"ea50c33048ae8e02c48c59ec03aca89b7500f9a8499573ff1581140a11978609454f07f2704eaec65ce05e6a9db1edf6b412982f2eebb1cc1e1175b3230bf2b5","href":"https://static.observableusercontent.com/files/ea50c33048ae8e02c48c59ec03aca89b7500f9a8499573ff1581140a11978609454f07f2704eaec65ce05e6a9db1edf6b412982f2eebb1cc1e1175b3230bf2b5","name":"kronos-kingsnake.jpg","type":"image/jpeg","lastModified":1601056125390.858,"size":312118},{"id":"ad580ee17779fcf8e0d14a8ae531f00bd8a223cd7f82e298afe327cfe73ab83cf25730d4fd10148c7c21f16da6e3f88b7fddfcecdad3fa574b2884734a835c3d","href":"https://static.observableusercontent.com/files/ad580ee17779fcf8e0d14a8ae531f00bd8a223cd7f82e298afe327cfe73ab83cf25730d4fd10148c7c21f16da6e3f88b7fddfcecdad3fa574b2884734a835c3d","name":"circlesdrawing.jpeg","type":"image/jpeg","lastModified":1601218940420.69,"size":199659},{"id":"9aa55751f11be5103a5369b64f1c8f702e66d61c29d84abf84453414c794079e9b93da074dfe5ed59bcb9eff22769c43e2e087cf3641f3acc0e835e126caa8f9","href":"https://static.observableusercontent.com/files/9aa55751f11be5103a5369b64f1c8f702e66d61c29d84abf84453414c794079e9b93da074dfe5ed59bcb9eff22769c43e2e087cf3641f3acc0e835e126caa8f9","name":"IMG_0161.jpeg","type":"image/jpeg","lastModified":1601663615001.95,"size":263409}] 49:{"id":"a3150c0d05200fd7","slug":"the-snake-that-ate-its-tail","title":"The Snake that Ate Its Tail","thumbnail":"425500657718ed9d768e9b533810ef0a8f9b6e918539844eee476ee44c8f9a67","access_level":"public","create_time":"$D2020-09-21T18:22:19.368Z","update_time":"$D2020-10-06T21:08:23.469Z","view_time":null,"first_public_time":"$D2020-09-21T18:39:51.130Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"e88b5b4834710a04","login":"metaphorz","name":"Paul Fishwick","avatar_url":"https://avatars-next.observableusercontent.com/e1add3ea86c55623f6cccbe938c680343edf088421120e7f8ff275ecad73f055","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":604,"publish_version":604,"role":null,"authored":false,"authors":[{"type":"individual","id":"226125404eac84aa","login":"metaphorz","name":"Paul Fishwick","avatar_url":"https://avatars-next.observableusercontent.com/e1add3ea86c55623f6cccbe938c680343edf088421120e7f8ff275ecad73f055","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"226125404eac84aa","login":"metaphorz","name":"Paul Fishwick","avatar_url":"https://avatars-next.observableusercontent.com/e1add3ea86c55623f6cccbe938c680343edf088421120e7f8ff275ecad73f055","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Snake that Ate Its Tail","cells":[{"id":46,"value":"md`# The Snake that Ate Its Tail`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"md`## Dream`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`If we read the history of Ouroboros, we dive further into the history through visual representation found in the Wikipedia entry for [Ouroboros](https://en.wikipedia.org/wiki/Ouroboros). We can explore this Wikipedia entry as data, allowing us to browse each English word and its frequency in the story. \n\nThe plot in the upper left is called a \"word cloud\" and the frequency of each word is displayed by text size; the larger the word, the more the word is found in the story. On the upper right, you can see where any particular word is located in the story timeline. Select a word on the left and then see the trends result on the right.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`## Reality`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`But in reality snakes do not eat themselves. Or do they?\nThis is a photograph of a king snake. Courtesy, Jesse Rothacker, Forgotten Friend Reptile Sanctuary in Elm, Pennsylvania. Jesse also appears in a [video](https://www.youtube.com/watch?v=Q_LIEMcWN9w) of the snake.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"html `

\n\nWe should start with our dream and then translate it into models. We will let the snake\nbiting its tail be modeled as a circle. We will model the 2nd sentence with the current\nposition of the computer mouse. This means our written modeled dream now looks like this:\n\nA circle appears at the current mouse position.\n

\n\nDon't forget to draw also, to get a feel for what your code will reproduce\nwhen you get to that stage. Drawing and writing are excellent places to begin\nyour code journey. Express yourself in languages (writing, drawing) that you know\nand then start incremental translation.`\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"html`

\n ${await FileAttachment(\"circlesdrawing.jpeg\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"md`Now we can program that will model our dream. For more program or code ideas around a circle motif, \n[search for circle](https://www.openprocessing.org/browse/?time=anytime&type=all&q=circle#).`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`## Control Flow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`\nWe have our modeled dream. Now time to take this dream and turn it\ninto a interactive diagram. There are two types of diagrams we'll show for this story.\nThe first kind is control flow. Think of how a recipe is organized if it is\nwritten. There is a sequence of commands. Computer scientists call this imperative programming\nand more exactly, control flow. The diagram is also known by other names, such\nas flowchart. To run a control flow program, start at the top and work down. This program has a feedback loop, which creates multiple circles.\n\nMove your mouse over a blinking node to show how each assignment (command) will be\ntranslated into javascript. This is how we'll create our code for this example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`We have gone from a natural language description, to the control flowchart, to code. Another approach is to identify flowchart concepts by starting at the bottom (the code).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"html`

\n ${await FileAttachment(\"IMG_0161.jpeg\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`We can now write some code below. To see the code that is behind the interactive circle drawing, hover your mouse on the cell below and to the left of the sketch you will see 3 vertical dots. Click on them and select Edit. The code will appear in a block underneath the drawing canvas. If you want this visible for later, pin it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"p5(sketch => {\n var radius = 20;\n sketch.setup = function () {\n\t sketch.createCanvas(600, 600);\n\t sketch.background(255);\n } // end setup\n sketch.draw = function () {\n sketch.ellipse(sketch.mouseX,sketch.mouseY, radius*2,radius*2);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`Lets take this further. What about snakes with different colors? To see the code, following the previous directions. There is a slider below the canvas. Drag the slider to change the background color.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"p5(sketch => {\n let system;\n sketch.setup = function () {\n sketch.createCanvas(500, 500); \n sketch.background(255);\n sketch.noFill();\n sketch.frameRate(0.4);\n };\n\n sketch.draw = function() {\n sketch.background(background);\n for (let i = 0; i < 30; i++) {\n sketch.stroke(sketch.random(255), sketch.random(255), sketch.random(255));\n let size = sketch.random(100);\n sketch.ellipse(sketch.random(400)+50, sketch.random(400)+50, size, size);\n }\n }\n})\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof background = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`Here is a [snake of snakes sketch](https://www.openprocessing.org/sketch/968422). There is one image of the snake but this image is created through circular snake patterns which act like pixels.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"p5(sketch => {\n let img;\n let p = 10;\n let rateX;\n let rateY;\n\n sketch.preload = async function() {\n img = sketch.loadImage(imgUrl);\n };\n \n sketch.setup = async function() {\n sketch.createCanvas(width, (img.height * width) / img.width);\n img.resize(width / 5, sketch.height / 5);\n rateX = img.width / sketch.width;\n rateY = img.height / sketch.height;\n var t = Date.now();\n console.log(img);\n for (let y = 0; y < sketch.height; y += p * rateY) {\n for (let x = 0; x < sketch.width; x += p * rateX) {\n let c = img.get(x, y);\n sketch.fill(c);\n sketch.ellipse(x / rateX + p / 2, y / rateY + p / 2, p, p);\n }\n }\n console.log(Date.now() - t);\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"imgUrl = await FileAttachment(\"kronos-kingsnake.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"md`## Data Flow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"html`There is the 2nd type of diagram: a data flow diagram. This is a way of\nprogramming that may be new to you. For data flow, data flows through the diagram\nyielding our circles. To run a data flow program, you start at the left. Imagine that 20 is fed into function f2 (Draw Circle). Also the current X and Y mouse positions are fed into function f1 (Location), which produces the point (X,Y) as our second input to f2. A data flow program or diagram is a bit like how a machine works. Things enter on the left and then get processed (by functions) to eventually produce output on the right: a circle. As you move the mouse this program is continually run (or executed).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md`Here are two additional projects that use data flow. These projects use the circle motif\nin different ways. The first uses [Nodebox Live](https://nodebox.live/metaphorz/circles). Press Play in the right side Viewer window and move the mouse. The second uses [cables.gl](https://cables.gl/edit/fNk8lj). move the mouse around in the right-hand window while pressing the left mouse button.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"html`Let's summarize what we have learned:\n

We begin with a story we'd like to tell. Then we use a notebook like Observable\n
We use different sorts of media. These media include text, images, diagrams, data, and code.\n
For the design of code, in particular, it is useful to transition to code by starting with written process descriptions and hand-drawn sketches. Then, we move to flow diagrams - either control flow or data flow. After that, we can write code in the appropriate javascript-based language. We used P5.js for the above code. We also used a collaborative environment for P5.js called OpenProcessing\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null