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, 100);
}
})
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(50);
}
s.draw = function(){
s.fill(190, 0, 190); // set purple fill color
s.circle(s.mouseX, s.mouseY, 10);
}
})
p5(s => {
s.setup = function(){
s.createCanvas(width, 150); // width is an Observable variable here
s.background(50);
s.noStroke();
s.fill(190, 0, 100); // set purple fill color
}
s.draw = function(){
if(s.mouseIsPressed){
if(s.mouseButton==s.Right){
s.stroke(200,0,200,80)
s.noFill()
}else{
s.noStroke;
s.fill(200,0,200,80)
}
s.circle(s.mouseX, s.mouseY, 10);
}
}
})
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.
