2b:null 2c:["$","title",null,{"children":"Control | mark webster | Observable"}] 31:T520,html`

Syntax

Keyword: if ‹Condition› ‹Statements›

Eg 1.

if (key === 'a'){
myColour = color(0,0,255);

...
`32:T450,p5(sketch => { let myColour; sketch.setup = function() { sketch.createCanvas(680, 360); sketch.rectMode(sketch.CENTER); myColour = sketch.color(255); } sketch.draw = function() { sketch.background(0,0,33); sketch.fill(myColour); sketch.rect(sketch.width/2, sketch.height/2, 250, 250); sketch.infos(); // display textual information } /////////////////////////// FUNCTIONS //////////////////////////// // we use keyTyped function to add interaction with the keyboard // REF : https://p5js.org/reference/#/p5/keyTyped sketch.keyTyped = function() { if (sketch.key == 'a') { myColour = sketch.color(0, 0, 255); } if (sketch.key == 'b') { myColour = sketch.color(200, 255, 0); } if (sketch.key == 'c') { myColour = sketch.color(255, 0, 255); } } // a function that displays textual info sketch.infos = function() { sketch.fill(255); sketch.textSize(18); sketch.text("Press a | b | c", 10, sketch.height-30); sketch.textSize(12); sketch.text("Chosen colour : " + myColour, 10, sketch.height-12); } })33:T4da,p5(sketch => { let x; let y; let angle; let shapeSize = 20; sketch.setup = function() { sketch.createCanvas(680, 420); sketch.background(0,0,33); x = 0; y = 0; }; sketch.draw = function() { //a simple function for drawing a triangle sketch.myShape(x, y, shapeSize, angle); //a function to randomize angle values sketch.randomize(); x+=shapeSize*2; // testing boundaries if (x>sketch.width+shapeSize) { x = 0; y+=shapeSize*2; } if(y>sketch.height+shapeSize){ sketch.background(0,0,33); x = 0; y = 0; } }; // randomize function sketch.randomize = function(){ let rand = sketch.random(100); if(rand<25){ angle = 0; } if((rand>25)&&(rand<50)){ angle = 90; } if((rand>50)&&(rand<75)){ angle = 270; } if(rand>75){ angle = 360; } }; // shape function sketch.myShape = function(_x, _y, _s, _a) { sketch.push(); sketch.translate(_x, _y); sketch.rotate(sketch.radians(_a)); sketch.fill(255); sketch.noStroke(); sketch.triangle(_s, -_s, _s, _s, -_s, _s); sketch.pop(); }; })34: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(); } }35:[] 2f:{"id":"33a96977545c2bca","slug":"control","title":"Control","thumbnail":"bce9cf2af72252d843efdee94dc4ad9e53988cd0f70c581e6740362983fb0a2c","access_level":"public","create_time":"$D2019-04-25T08:08:00.840Z","update_time":"$D2026-03-17T13:50:02.610Z","view_time":null,"first_public_time":"$D2019-04-25T09:13:36.859Z","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":213,"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":2,"collection":null,"type":"notebook","body":{"title":"Control","cells":[{"id":0,"value":"html`\n\n\n
\n

Control

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

Introduction

\n\nWhen we talk about control structures in programming, we are inevitably talking about changing the flow of the program. To do this, we use if statements, random function generators or iterative structures. We are going to look at the first two here.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"html`\n

\nControl_01

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"html`\n\nIn the example below, we use keyboard input to make choices. Depending on the key, we change the fill colour for our square. Explore a little the structure and try to add new colours with other key interactions.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"html`\n\n
\n

Randomness

\n\nIn the sketch below, we use the random function to determine a probability. The basic principle here is to use the function like rolling a dice. We can use an if statement to make a decision based on this random outcome. This sketch is a slightly more long-winded version of the one-liner analysed in the wonderful book, 10 PRINT CHR$(205.5+RND(1)); : GOTO 10\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"html`\n

\nRandom_Maze

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"p5(sketch => {\n \n let len = 10;\n let x = len*4;\n let y = 50;\n let angle = 0;\n \n sketch.setup = function() {\n sketch.createCanvas(640, 420);\n sketch.background(0,0,33);\n sketch.strokeWeight(8);\n sketch.strokeCap(sketch.PROJECT);\n };\n \n sketch.draw = function() {\n sketch.stroke(255);\n sketch.push();\n sketch.translate(x, y);\n \n // here's our little dice rolling algorithm\n let rand = sketch.random(6);\n if(rand<3){ // changing this value will affect the probabilty\n angle = 0; // change the angle values\n }else {\n angle = 90; \n }\n sketch.rotate(sketch.radians(angle));\n \n sketch.line(-len, -len, len, len);\n sketch.pop();\n \n x += len*2;\n if(x>sketch.width-len*4){\n x = len*4; \n y += len*2; \n }\n \n if(y>sketch.height-len*2){\n sketch.background(0,0,33);\n x = len*4;\n y = 50;\n }\n \n }; \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"html`\n\n
\n\nPlay around with the above sketch, changing values. Explore the visual possibilites and limits of the system and perhaps think about creating new variations of this using other shapes, adding colour and/or direction of motion. \n

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

\nTime Tilings

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"html`\n\n
\n\nThis sketch takes the same system as above but rotates a triangle on its axis. The random function is used to change the value of the angle on each step in the animation. \n

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

References

\n\n

What is random?

Coding Math: Episode 51 - Pseudo Random Number Generators Part I

\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"