Public
Edited
Apr 12, 2023
{
const canvas = html`<canvas width = 300 height = 300 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
let x = 150
let y = 150 //using let becuase we can change those
const loop = () => {
ctx.clearRect(0,0,300,300)
window.requestAnimationFrame(loop) //name of function inside here
ctx.beginPath()
ctx.arc(x,y,10,0,2*Math.PI)
ctx.fill()
ctx.closePath()
x = x + 1
y = x + 1
}
loop()
return canvas
}
// EXERCISE TIME
{
const canvas = html`<canvas width = 300 height = 300 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
let x = 150
let y = 150
let frame = 0
let tick = 0
let framesPerTick = 2
const loop = () => {
//ctx.clearRect(0,0,300,300)
if(tick < 50){window.requestAnimationFrame(loop)}
if(frame%framesPerTick == 0){
ctx.beginPath()
ctx.arc(x,y,5,0,2*Math.PI)
ctx.fill()
ctx.closePath()
let r = Math.sign(d3.randomUniform(-1,1)())
x = x + 10*r
r = Math.sign(d3.randomUniform(-1,1)())
y = y + 10*r
tick = tick + 1
}
frame = frame + 1
}
loop()
return canvas
}
//Exercise time draw a line
{
const canvas = html`<canvas width = 300 height = 300 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
let x1 = 100
let x2 = 100
let y1 = 50
let y2 = 100
let frame = 0
let tick = 0
let framesPerTick = 2
const loop = () => {
//ctx.clearRect(0,0,300,300)
if(tick < 50){window.requestAnimationFrame(loop)}
if(frame%framesPerTick == 0){
ctx.beginPath()
ctx.moveTo(x1,y1)
ctx.lineTo(x2,y2)
ctx.fill()
ctx.stroke()
ctx.closePath()
let r = Math.sign(d3.randomUniform(-1,1)())
x1 = x1 + 10*r
r = Math.sign(d3.randomUniform(-1,1)())
y1 = y1 + 10*r
x2 = x2 + 10*r
r = Math.sign(d3.randomUniform(-1,1)())
y2 = y2 + 10*r
tick = tick + 1
}
frame = frame + 1
}
loop()
return canvas
}
//redmond example
{
const canvas = html`<canvas width = 300 height = 300 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
let x = 150
let y = 150
let frame = 0
let tick = 0
let framesPerTick = 2
const loop = () => {
//ctx.clearRect(0,0,300,300)
if(tick < 150){window.requestAnimationFrame(loop)}
if(frame%framesPerTick == 0){
let r = Math.sign(d3.randomUniform(-1,1)())
const x2 = x + 10*r
r = Math.sign(d3.randomUniform(-1,1)())
const y2 = y + 10*r
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(x2,y2)
ctx.stroke()
ctx.fill()
ctx.closePath()
x = x2
y = y2
tick = tick + 1
}
frame = frame + 1
}
loop()
return canvas
}
//Exercise draw redmond random walker
{
const canvas = html`<canvas width = 500 height = 500 style = "border:1px black solid;"/>`
const ctx = canvas.getContext("2d")
let x = 250
let y = 250
let theta = 0
const stepSize = 10
let frame = 0
let tick = 0
const framesPerTick = 1
const loop = () => {
if(tick < 100){window.requestAnimationFrame(loop)}
if(frame%framesPerTick == 0){
const dtheta = d3.randomUniform(-Math.PI/6,Math.PI/6)()
theta = theta + dtheta
const dx = stepSize*Math.cos(theta)
const dy = stepSize*Math.sin(theta)
const x2 = x + dx
const y2 = y + dy
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(x2,y2)
ctx.stroke()
ctx.closePath()
tick = tick + 1
}
frame = frame + 1
}
}
loop()
return canvas
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
