MarkdownHTMLSVGTransitionsArrays and ObjectsFunctionsFor LoopsMapClassesAntCell and Grid ClassesCanvas TutorialRandom WalkersCanvas TemplateTreesHalloween AnimationRoulette WheelAnts at the PicnicImages for PracticeImage Processing PracticeCounting ObjectsImages for PracticeRandom Walker PaintersImages for Exam Problem 2
Practice Template
class Walker{
constructor(props){
this.ctx = props.ctx
this.x = props.x
this.y = props.y
this.theta = props.theta
}
draw(fill){
//draws a circle at the walker's position using "fill" and the fill.
}
step(size,fill){
//walker takes a step of size "size" and then draws itself with fill "fill".
}
changeDirection(){
//walker changes its theta randomly
}
}
class System{
constructor(props){
this.ctx = props.ctx
this.width = props.width
this.height = props.height
this.frames = props.frames
this.ticks = props.ticks
this.size = props.size
this.data = props.data
this.numWalkers = props.numWalkers
this.group = this.makeGroup()
this.frame = 0
this.tick = 0
}
loop(){
//each walker takes a step in the direction it is pointed. You'll have to figure out what fill to use. Also, you will need to round:
//d3.format(".0f")(walker.x)
//d3.format(".0f")(walker.y)
//so that you have integers. This ensures getIndex() returns an integer, which is need for things to work out.
//keep going in the current direction if you're still within the number of allotted frames.
//change direction if you have used up the allotted frames.
//stop if you have used up the allotted ticks.
}
makeWalker(x,y){
//makes a walker at position x,y
}
makeGroup(){
//makes a group of walkers. use numWalkers.
}
getIndex(x,y){
return 4*this.width*y + 4*x
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
trees = FileAttachment("trees.jpg").image()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.