UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
p5(sketch => {
sketch.setup = function(){
sketch.createCanvas(width, 150); // width is an Observable variable here
}
sketch.draw = function(){
sketch.background(200);
sketch.circle(sketch.width/2, sketch.height/2, 80);
}
})
p5(s => {
s.setup = function(){
s.createCanvas(width, 150); // width is an Observable variable here
}
s.draw = function(){
s.background(200);
s.fill(190, 0, 190); // set purple fill color
s.circle(s.width/2, s.height/2, 80);
}
})
p5(s => {
s.setup = function(){
s.createCanvas(width, 150); // width is an Observable variable here
s.background(100);
}
s.draw = function(){
s.fill("cyan");
s.circle(s.mouseX, s.mouseY, 20);
}
})
p5(s => {
s.setup = function(){
s.createCanvas(width, 150); // width is an Observable variable here
s.background(100);
s.noStroke(); // turn off brush outline
s.fill(200, 0, 200, 80);
}
s.draw = function(){
if(s.mouseIsPressed){
s.circle(s.mouseX, s.mouseY, 20);
}
}
})
p5(s => {
s.setup = function(){
s.createCanvas(width, 150); // width is an Observable variable here
s.background(100);
}
s.draw = function(){
if(s.mouseIsPressed){
if(s.mouseButton == s.RIGHT){
s.stroke(200, 0, 200, 80);
s.noFill()
}else{
s.noStroke(); // turn off brush outline
s.fill(200, 0, 200, 80);
}
s.circle(s.mouseX, s.mouseY, 20);
}
}
})
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.
