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

Syntax

Data Type ‹Variable Name› ‹Variable Value›

Eg 1.

let angle = 0;

Eg 2.

float angle = 0;

`32:T457,p5(sketch => { // This is global variable // It is available from anywhere in our program structure let angle = 0; // this variable will be used to change the angle of rotation sketch.setup = function() { sketch.createCanvas(400, 300); sketch.rectMode(sketch.CENTER); sketch.noFill(); sketch.strokeWeight(60); sketch.stroke(255); }; sketch.draw = function() { sketch.background(0,0,33); // Here we are declaring a local variable. // It is only available within the draw structure // Read more about what is happening here in the Details section below. var rectSize = sketch.sin(sketch.frameCount*0.025) * 300; // we use translate to position our square sketch.translate(sketch.width/2, sketch.height/2); //we use our variables in the following functions sketch.rotate(sketch.radians(angle)); sketch.rect(0, 0, rectSize, rectSize); //...updating our variable for our angle here angle+=0.35; // += is a shorthand version of strokeW = strokeW + 2; }; })33:T512,html`

Details

In the above example, we are using a special function to modify our value for rectSize. This function is called sine and is often used for creating periodic motion. What is essential to understand here is that this function takes a value and basically generates for us incremental values over time that vary between -1 & 1. The number we assign between parenthesis determines the increments. We can use this to determine a certain frequency of values. Since these value increments have only a maximum and minimum value of 1 to -1, we must multyply this to generate larger values. To summarise, the value between parathesis determines the frequency of oscillation/periodic motion, whilst the multiplying value determines the amplitude of this motion. For a simple interactive introduction to sine and cosine, check this link.

You may also note that our variable, rectSize, is declared, assigned and updated all on one line!

`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":"48ec79c631e4c63a","slug":"variables","title":"Variables","thumbnail":"e3bba5198f3df92266a4065176cd6ed11fb0b4cd3963e3d908c979a95353a449","access_level":"public","create_time":"$D2019-02-27T09:56:19.025Z","update_time":"$D2026-03-17T12:30:41.802Z","view_time":null,"first_public_time":"$D2019-02-28T16:57:29.354Z","fork":false,"stars":1,"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":221,"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":0,"collection":null,"type":"notebook","body":{"title":"Variables","cells":[{"id":0,"value":"html`\n\n\n
\n

Variables

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

\nDefinition

\n\nA variable is a means for storing and retrieving data.
\n>>> Introduction to variables on Designing Programs.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`\n\n
\n

Input

\n\n1). We declare a variable with a data type* and a name.
\n2). We assign it a starting value.
\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html`\n\n
\n

Output

\n\nHere is a simple example using our variable, 'angle' to rotate our square. We are also doing something else with anonther variable in this program. Play around with the values and observe what happens.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"html`\n\n

Observing further

\n
\nTake a little time to explore the two exmaples below. There are other things going on here but just concentrate on the variables and play around with the values to get a feel of things. To see the code and modify it, click in the margin to the left. To re-compile, SHIFT + ENTER

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

Pulsating Circles

\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"p5(sketch => {\n\n sketch.setup = function() {\n sketch.createCanvas(800, 300);\n };\n \n sketch.draw = function() {\n sketch.background(0,0,33);\n \n sketch.fill(255,200,0);\n let dia = sketch.sin(sketch.frameCount*0.025) * 200;\n sketch.ellipse(200, 150, dia, dia);\n \n sketch.fill(135,255,30);\n let dia2 = sketch.sin(sketch.frameCount*0.05) * 200;\n sketch.ellipse(400, 150, dia2, dia2);\n \n sketch.fill(30,0,255);\n let dia3 = sketch.sin(sketch.frameCount*0.015) * 200;\n sketch.ellipse(600, 150, dia3, dia3);\n \n };\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"html`\n\n

Automatic Drawings

\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"p5(sketch => {\n \n let x;\n let y;\n let h;\n \n sketch.setup = function() {\n sketch.createCanvas(800, 450);\n sketch.background(0,0,33);\n sketch.fill(255);\n sketch.stroke(0);\n sketch.strokeWeight(5);\n sketch.rectMode(sketch.CENTER);\n x = 0;\n y = 0;\n };\n \n sketch.draw = function() {\n sketch.translate(x, y);\n // activate this line to create a variation\n //sketch.rotate(sketch.frameCount*0.015);\n \n sketch.rect(0, 0, 50, h);\n h = sketch.sin(sketch.frameCount * 0.15) * 150;\n x = x + 10;\n \n if(x > sketch.width+50){\n x = 0;\n y = y + 50;\n } \n if(h > sketch.width){\n h = 0;\n }\n \n if(y>sketch.height+50){\n sketch.setup(); \n }\n \n };\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"html`\n

\n*Note

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html`
In languages such as Processing, we must declare a specific data type before the name of our variable. These are what we call strongly typed languages and are a means for telling our program what kind of data we are playing with. JavaScript is a realtively agnostic language in comparison and has used up until this day the generic key word, 'var'. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"html`\n\n\n
\n

References

\n\n

Definition of a variable on Wikipedia.

Strong & WeakTyping

Sine & cosine explained.

JavaScript ES6 discussion about var, let & const keywords.

\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"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":11,"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"