2b:null 2c:["$","title",null,{"children":"Data Types | mark webster | Observable"}] 31:T418,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(); } }32:[] 2f:{"id":"ecde2d162d7ff4e7","slug":"data-types","title":"Data Types","thumbnail":"b6de91d57d8db70346be56da1195263ce582afdd52dc13e25b6528a9b3f70211","access_level":"public","create_time":"$D2019-03-15T13:25:43.884Z","update_time":"$D2026-03-17T12:35:46.064Z","view_time":null,"first_public_time":"$D2019-03-15T14:03:09.410Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fdd6745cdbf31729","login":"motiondesign_01","name":"mark webster","avatar_url":"https://avatars-next.observableusercontent.com/e0b8a22b318090909fb4c12837ea7b63c5b1c04bc42534bf28e6ff551875e8ff","tier":"starter_2024"},"version":36,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3085cdbc76a2312b","login":"motiondesign_01","name":"mark webster","avatar_url":"https://avatars-next.observableusercontent.com/e0b8a22b318090909fb4c12837ea7b63c5b1c04bc42534bf28e6ff551875e8ff","tier":null}],"members":[{"type":"individual","id":"3085cdbc76a2312b","login":"motiondesign_01","name":"mark webster","avatar_url":"https://avatars-next.observableusercontent.com/e0b8a22b318090909fb4c12837ea7b63c5b1c04bc42534bf28e6ff551875e8ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Data Types","cells":[{"id":0,"value":"html`\n\n\n
\n

Data Types

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`\n\n\n
\n

Definition

\n\nMost programming languages come with a limited and relatively small number of data types that are the bricks and mortar for building more complex data structures. Specifying the data type determines the values that can be stored and also the type of operations we can perform on that data.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"p5(sketch => {\n\n let x = 50;\n let y = 253.078;\n let theWord = \"WORD\";\n let infos = \"Press 'b'\";\n let theLetter = 'A';\n\n let isDisplay = false;\n let myc = sketch.color(255,0,0);\n \n sketch.setup = function() {\n sketch.createCanvas(820, 430);\n sketch.background(255);\n };\n \n sketch.draw = function() {\n sketch.background(33);\n sketch.textSize(220);\n \n if (isDisplay) { \n myc = sketch.color(0, 0, 255);\n sketch.fill(myc);\n sketch.text(theWord, x, y);\n \n } else if(!isDisplay){\n \n myc = sketch.color(255, 0, 0);\n sketch.fill(myc);\n sketch.text(theLetter, x, y);\n }\n \n sketch.textSize(24);\n sketch.fill(255);\n sketch.text(infos, x, 310);\n sketch.fill(255,255,0);\n sketch.text(\"Boolean value = \"+isDisplay, x+5, 335);\n\n };\n \nsketch.keyTyped = function(){\n if(sketch.key == 'b') {\n isDisplay = !isDisplay;\n //console.log(isDisplay);\n }\n}\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html`\n\n
\n

References

\n\n

Java primitive data types

JavaScript primitive data types

Strong & Weak Typing

JavaScript ES6 discussion about var, let & const keywords.

\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"P5 = require('https://unpkg.com/p5@0.6.0/lib/p5.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"