25:["$","title",null,{"children":"The Snake that Ate Its Tail | Radamés Ajna | Observable"}] 49:[{"id":"ea50c33048ae8e02c48c59ec03aca89b7500f9a8499573ff1581140a11978609454f07f2704eaec65ce05e6a9db1edf6b412982f2eebb1cc1e1175b3230bf2b5","href":"https://static.observableusercontent.com/files/ea50c33048ae8e02c48c59ec03aca89b7500f9a8499573ff1581140a11978609454f07f2704eaec65ce05e6a9db1edf6b412982f2eebb1cc1e1175b3230bf2b5","name":"kronos-kingsnake.jpg","type":"image/jpeg","lastModified":1600976859054.773,"size":312118}] 29:{"id":"52bf755e7336f22c","slug":null,"title":"The Snake that Ate Its Tail","thumbnail":"d4dd02d9572693f119b60678503d64dc3e5280bacf9b0c4540a8ff1d87c79289","access_level":"unlisted","create_time":"$D2020-09-24T19:16:11.583Z","update_time":"$D2020-09-24T20:03:21.367Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"a3150c0d05200fd7","slug":"the-snake-that-ate-its-tail","title":"The Snake that Ate Its Tail","owner":{"id":"e88b5b4834710a04","login":"metaphorz","name":"Paul Fishwick"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024","bio":"Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.","followed_by_you":false,"follows_you":false},"version":382,"publish_version":382,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"bio":"Data visualization enthusiast. Creative technologist. Open for collaborations.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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":61,"value":"md`This is a code story about dreams.\n\nYou know that smell when you are the gas station, pumping glass into your car?\nThat smell is Benzene, which is a ring molecule containing carbon and hydrogen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`Let's see if we can take what we've learned and explore Kekulé's dream?\nOur analysis of his dream will be based on code.\n\nWe can start with using the final form of the snake as a circle.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`## Dreamz of Code\nWhy don't we dream? Let's begin with our custom dream.\n\nI dreamed of a snake biting its tail. Wherever I looked a snake appeared.\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 modeled dream now looks like this:\n\nA circle appears at the current mouse position. \n\nNow we can program that will model our dream. For more program or code ideas, \n[search for circle](https://www.openprocessing.org/browse/?time=anytime&type=all&q=circle#).\n\nDrag your mouse around.`","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 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,20,20);\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?`","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.2);\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`[A snake of snakes sketch](https://www.openprocessing.org/sketch/968422)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"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 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":375,"value":"imgUrl = await FileAttachment(\"kronos-kingsnake.jpg\").url()","pinned":true,"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":"$W49","stdlib":"1"}} 24:null