25:["$","title",null,{"children":"Canvas Sine Wave, and beyond! | Robert Pettersson | Observable"}] 4b:[] 47:{"id":"771862abb760078f","slug":"canvas-sine-wave","title":"Canvas Sine Wave, and beyond!","thumbnail":"301162396811dccbafb9b3b68ca24524056211f238b17c78f067fe91273825dd","access_level":"public","create_time":"$D2019-02-15T09:08:27.248Z","update_time":"$D2019-06-21T09:52:31.389Z","view_time":null,"first_public_time":"$D2019-02-15T09:56:54.925Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"b8f6ddb4a89bf145","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":"starter_2024","bio":"Programmer","followed_by_you":false,"follows_you":false},"version":256,"publish_version":256,"role":null,"authored":false,"authors":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"bio":"Programmer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Canvas Sine Wave, and beyond!","cells":[{"id":0,"value":"md`# Canvas Sine Wave, and beyond!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`I just wanted to try out html5 canvas for a bit, it's loads o' fun!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"viewof amp = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} amplitude`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"viewof rate = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${(form.value = form.i.valueAsNumber).toFixed(3)} rate`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"{\n const context = DOM.context2d(width, height);\n const {canvas} = context;\n canvas.style.background = \"#f6f6f6\";\n canvas.style.border = \"solid 1px #333\";\n const rect = { \n x: 0,\n y: new Array(Math.floor(canvas.width / 1)),\n size: 1\n };\n while (true) {\n update(rect);\n draw(context, canvas, rect);\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"mutable type = \"Sine\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"viewof options = {\n const selects = html`\n `;\n selects.i.onchange = () => mutable type = selects.i.value;\n selects.i.onchange();\n return selects;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`Added some other types just to test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"function update(d) {\n let t = mutable theta += rate;\n for (let i = 0; i < d.y.length; i++) {\n d.y[i] = algorithms(t, i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"function algorithms(t, i) {\n switch (type) {\n case \"Sine\":\n return Math.sin(t + rate * i) * amp;\n break;\n case \"Cosine\":\n return Math.cos(t + rate * i) * amp;\n break;\n case \"Windshield\": \n return Math.sin(t) * amp;\n break;\n case \"Weird\": \n return Math.tan(t * i) * amp;\n break;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function draw(ctx, c, d) {\n var clear = ctx.clearRect(0, 0, c.width, c.height);\n draw_rect(ctx, c, d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function draw_rect(ctx, c, d) {\n var fill = ctx.fillStyle = \"steelblue\";\n for (let i = 0; i < d.y.length; i++) { \n ctx.fillRect(d.x + d.size * i, // x-cord\n c.height / 2 + d.y[i], // y-cord\n d.size, // width\n d.size); // height\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"mutable theta = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null