3e:null 3f:["$","title",null,{"children":"P5.js Playground (Blocks) | Bob | Observable"}] 45:T414,function* p5(sketch) { const element = DOM.element('div'); // p5.js really likes its target element to already be in the DOM, not just // floating around detached. So, before we call P5, we yield it, which puts // in the DOM. yield element; // This is ‘instance mode’ in p5 jargon: instead of relying on lots of // globals, we create a sketch that has its own copy of everything under p5. const instance = new P5(sketch, element, true); // This is the tricky part: when you run P5(sketch, element), it starts a // loop that updates the drawing a bunch of times a second. If we were just // to call P5 repeatedly with different arguments, the loops would all keep // running, one on top of the other. So what we do is we use this cell // as a generator, and then when that generator is interrupted, like // when you update the code in the sketch() method, then we call instance.remove() // to clean it up. try { while (true) { yield element; } } finally { instance.remove(); } }46:T565,p5(sketch => { let gridTopX; let gridTopY; //let gridTopY = 200; const sideLength = 33; sketch.setup = () => { sketch.createCanvas(600, 400); gridTopX = sketch.width / 8; gridTopY = sketch.height / 2; sketch.strokeWeight(2); } function drawCube(c, r, z, color){ const x = gridTopX + (c-r) * sideLength * sketch.sqrt(3)/2; const y = gridTopY + (c+r) * sideLength / 2 - sideLength*z; const points = []; for (let angle = sketch.PI / 6; angle < sketch.PI * 2; angle += sketch.PI/3){ points.push( sketch.createVector(x + sketch.cos(angle) * sideLength, y + sketch.sin(angle) * sideLength) ); } // faces sketch.quad(x, y, points[5].x, points[5].y, points[0].x, points[0].y, points[1].x, points[1].y ); sketch.quad(x, y, points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y ); sketch.quad(x, y, points[3].x, points[3].y, points[4].x, points[4].y, points[5].x, points[5].y ); //sketch.fill(color) } sketch.draw = () => { //sketch.background(220); drawCube(0,0,0, sketch.color("yellow")); drawCube(1,0,0); drawCube(2,0,0); drawCube(3,0,0); drawCube(4,0,0); drawCube(5,0,0); drawCube(6,0,0); drawCube(7,0,0); drawCube(8,0,0); drawCube(9,0,0); drawCube(0,0,1); drawCube(1,0,1); drawCube(2,0,1); } })47:T8d3,

💜

back

right

left

top

bottom

48:T691,49:[] 43:{"id":"ce602dcbdd03adbe","slug":null,"title":"P5.js Playground (Blocks)","thumbnail":"d9a19fdf33efbf3ebcd0fd4663aa4ab52ed877bd870e360e809f2da24d4c63e5","access_level":"public","create_time":"$D2022-11-21T02:45:10.868Z","update_time":"$D2023-01-27T02:21:35.076Z","view_time":null,"first_public_time":"$D2022-11-21T02:48:39.664Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ea7f9b9736dc9c9e","login":"mullojo","name":"Bob","avatar_url":"https://avatars-next.observableusercontent.com/6e80d3c40a7d9ff9e7a39d86c93b61db0a45ab46214885739e5901cec0f01788","tier":"starter_2024","bio":"","following":false},"version":147,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e215b6c167225412","login":"mullojo","name":"Bob","avatar_url":"https://avatars-next.observableusercontent.com/6e80d3c40a7d9ff9e7a39d86c93b61db0a45ab46214885739e5901cec0f01788","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e215b6c167225412","login":"mullojo","name":"Bob","avatar_url":"https://avatars-next.observableusercontent.com/6e80d3c40a7d9ff9e7a39d86c93b61db0a45ab46214885739e5901cec0f01788","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"P5.js Playground (Blocks)","cells":[{"id":0,"value":"# P5.js Playground (Blocks)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"P5 = require('https://unpkg.com/p5@1.2.0/lib/p5.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$47","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"

Value Block And More

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"$48","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"