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 => { // now just using the character "s" here rather than sketch
s.setup = function(){
s.createCanvas(width, 150); // switch over to using s to prefix p5js function calls
}
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, 300);
s.background(100); // draw background only once, so drawn circles are not erased in draw() loop
}
s.draw = function(){
s.circle(s.mouseX, s.mouseY, 40); // draw circle at mouse x,y coordinate
}
})
p5(s => {
s.setup = function(){
s.createCanvas(width, 300);
s.background(205);
s.noStroke(); // turn off outlines
s.fill(200, 0, 200, 50); // set fill to purple with some opacity
}
s.draw = function(){
s.circle(s.mouseX, s.mouseY, 40);
}
})
p5(s => {
let brushColor = s.color(200, 0, 200, 50);
s.setup = function(){
s.createCanvas(width, 300); // width is an Observable variable here
s.background(205);
}
s.draw = function(){
// Only draw when the mouse is pressed
if(s.mouseIsPressed){
s.noStroke();
s.fill(brushColor);
s.circle(s.mouseX, s.mouseY, 40);
}
}
})
p5(s => {
let brushColor = s.color(200, 0, 200, 50);
let isKeyPressed = false;
s.setup = function(){
s.createCanvas(width, 300);
s.background(205);
}
s.draw = function(){
// Only draw when the mouse is pressed
if(s.mouseIsPressed){
if(isKeyPressed){ // if a key is pressed, use stroke
s.noFill();
s.stroke(brushColor); // if a key is not pressed, use fill
}else{
s.noStroke();
s.fill(brushColor);
}
s.circle(s.mouseX, s.mouseY, 40);
}
}
s.keyPressed = function(){
// Tracking keys this way because keyIsDown() doesn't seem
// to work in Observable
// https://p5js.org/reference/#/p5/keyIsDown
isKeyPressed = true;
}
s.keyReleased = function(){
isKeyPressed = false;
}
})
p5(s => {
let brushColor = s.color(200, 0, 200, 50);
let brushDiameter = 20;
s.setup = function(){
s.createCanvas(width, 300); // width is an Observable variable here
s.background(205);
s.noStroke();
s.fill(brushColor);
}
s.draw = function(){
// Only draw when the mouse is pressed
if(s.mouseIsPressed){
s.circle(s.mouseX, s.mouseY, brushDiameter);
}
// Set the brush size based on the euclidean distance between the last
// mouse position (pmouseX, pmouseY) from the previous draw call and the
// the current mouse position (from this draw call)
// See: https://p5js.org/reference/#/p5/dist
brushDiameter = s.dist(s.mouseX, s.mouseY, s.pmouseX, s.pmouseY);
}
})
p5(s => {
let brushDiameter = 20;
s.setup = function(){
s.createCanvas(width, 300); // width is an Observable variable here
s.background(140);
// Easier to work in HSB color space for changing hue
// By default, HSB color mode is 0-360, 0-100, 0-100, 0-1.
s.colorMode(s.HSB); // https://p5js.org/reference/#/p5/colorMode
s.noStroke(); // turn off outlines
}
s.draw = function(){
const brushHue = s.map(s.mouseX, 0, s.width, 0, 360);
// Only draw when the mouse is pressed
if(s.mouseIsPressed){
s.fill(brushHue, 70, 80, 0.7);
s.circle(s.mouseX, s.mouseY, brushDiameter);
}
brushDiameter = s.dist(s.mouseX, s.mouseY, s.pmouseX, s.pmouseY);
}
})
doodleExample = p5(s => {
let brushDiameter = 20;
s.setup = function(){
s.createCanvas(width, 300); // width is an Observable variable here
s.background(140);
// Easier to work in HSB color space for changing hue
// By default, HSB color mode is 0-360, 0-100, 0-100, 0-1.
s.colorMode(s.HSB); // https://p5js.org/reference/#/p5/colorMode
}
s.draw = function(){
const brushHue = s.map(s.mouseX, 0, s.width, 0, 360);
// Only draw when the mouse is pressed
if(s.mouseIsPressed){
s.noFill();
s.stroke(brushHue, 70, 80, 0.7);
}else{
s.noStroke(); // turn off outlines
s.fill(brushHue, 70, 80, 0.7);
}
s.circle(s.mouseX, s.mouseY, brushDiameter);
brushDiameter = s.dist(s.mouseX, s.mouseY, s.pmouseX, s.pmouseY);
}
})
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.
