Estimation statistics, craft beer, data visualization, web scraping, poetry
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.fill(0, 102);
sketch.noStroke();
};
sketch.draw = () => {
sketch.ellipse(sketch.mouseX, sketch.mouseY, 9, 9);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.fill("#fea");
sketch.noStroke();
};
sketch.draw = () => {
sketch.background(204); // clear the entire canvas every time you update.
sketch.ellipse(sketch.mouseX, sketch.mouseY, 9, 9);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.strokeWeight(4);
sketch.stroke(0, 100);
};
sketch.draw = () => {
sketch.line(
sketch.mouseX,
sketch.mouseY,
/* The `pmouseX` and `pmouseY` variables
store the position of the mouse at the previous frame. */
sketch.pmouseX,
sketch.pmouseY
);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.stroke(0, 100);
};
sketch.draw = () => {
let weight = sketch.dist(
sketch.mouseX,
sketch.mouseY,
sketch.pmouseX,
sketch.pmouseY
);
sketch.strokeWeight(weight);
sketch.line(sketch.mouseX, sketch.mouseY, sketch.pmouseX, sketch.pmouseY);
};
})
p5((sketch) => {
let x = 0;
let y = 0;
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.fill(0);
};
sketch.draw = () => {
let targetX = sketch.mouseX;
x += (targetX - x) * easing1;
let targetY = sketch.mouseY;
y += (targetY - y) * easing1;
/*
The value of `x` starts at zero,
then is made to catch up to `targetX`
(which is basically the current mouseX).
The speed at which it catches up to `targetX`
is determined by the variable `easing`.
*/
sketch.background(255);
sketch.ellipse(x, y, 12, 12);
// console.log(targetX + " : " + x);
};
})
p5((sketch) => {
let x = 0;
let y = 0;
let px = 0;
let py = 0;
// let easing = 0.3;
sketch.setup = () => {
sketch.createCanvas(width, 240);
sketch.stroke(0, 102);
};
sketch.draw = () => {
var targetX = sketch.mouseX;
x += (targetX - x) * easing2;
var targetY = sketch.mouseY;
y += (targetY - y) * easing2;
var weight = sketch.dist(x, y, px, py);
sketch.strokeWeight(weight);
sketch.line(x, y, px, py);
py = y;
px = x;
};
})
p5((sketch) => {
let h = 120;
sketch.setup = () => {
sketch.createCanvas(width, h);
sketch.strokeWeight(30);
};
sketch.draw = () => {
sketch.background(204);
sketch.stroke(102);
sketch.line(40, 0, 70, h);
if (sketch.mouseIsPressed) {
sketch.stroke(0);
}
/*
When the mouse is pressed whilst inside the sketch,
the line that runs left-to-right
will change its stroke to black.
*/
sketch.line(0, 70, width, 50);
};
})
p5((sketch) => {
let h = 120;
sketch.setup = () => {
sketch.createCanvas(width, h);
sketch.strokeWeight(30);
};
sketch.draw = () => {
sketch.background(204);
sketch.stroke(102);
sketch.line(40, 0, 70, h);
if (sketch.mouseIsPressed) {
sketch.stroke(0);
} else {
sketch.stroke(255);
}
sketch.line(0, 70, width, 50);
};
})
p5((sketch) => {
let h = 120;
sketch.setup = () => {
sketch.createCanvas(width, h);
sketch.strokeWeight(30);
};
sketch.draw = () => {
sketch.background(204);
sketch.stroke(102);
sketch.line(40, 0, 70, h);
if (sketch.mouseIsPressed) {
if (sketch.mouseButton == sketch.LEFT) {
sketch.stroke(255);
}
} else {
sketch.stroke(0);
}
sketch.line(0, 70, width, 50);
};
})
p5((sketch) => {
let x;
let arrowLength;
let speed = 2;
let h = 120;
sketch.setup = () => {
sketch.createCanvas(width, h);
x = width / 2;
};
sketch.draw = () => {
sketch.background(204);
if (sketch.mouseX > x) {
x += speed;
arrowLength = -30;
}
if (sketch.mouseX < x) {
x -= speed;
arrowLength = 30;
}
sketch.line(x, 0, x, h);
// Draw left or right arrow depending on `offset`
sketch.line(
sketch.mouseX,
sketch.mouseY,
sketch.mouseX + arrowLength / 3,
sketch.mouseY - 10
);
sketch.line(
sketch.mouseX,
sketch.mouseY,
sketch.mouseX + arrowLength / 3,
sketch.mouseY + 10
);
sketch.line(
sketch.mouseX,
sketch.mouseY,
sketch.mouseX + arrowLength,
sketch.mouseY
);
};
})
p5((sketch) => {
let radius = 12;
let h = 240;
let x = width / 2;
let y = h / 2;
sketch.setup = () => {
sketch.createCanvas(width, h);
sketch.ellipseMode(sketch.RADIUS);
};
sketch.draw = () => {
sketch.background(204);
// Get the distance from the current mouse position to the center of the circle.
var d = sketch.dist(sketch.mouseX, sketch.mouseY, x, y);
/* If the distance is less than the circle's radius,
then the cursor is inside the circle.
Expand the radius by 0.5 pixels every frame, and color the circle black.
*/
if (d < radius) {
radius += 0.5;
sketch.fill(0);
} else {
sketch.fill(255);
}
sketch.ellipse(x, y, radius, radius);
};
})
p5((sketch) => {
let canvasHeight = 120;
let x = width / 2;
let y = canvasHeight / 2;
let w = 80;
let h = 60;
sketch.setup = () => {
sketch.rectMode(sketch.CENTER);
sketch.createCanvas(width, canvasHeight);
};
sketch.draw = () => {
sketch.background(204);
if (
sketch.mouseX > x - w / 2 &&
sketch.mouseX < x + w / 2 &&
sketch.mouseY > y - h / 2 &&
sketch.mouseY < y + h / 2
) {
sketch.fill(0);
} else {
sketch.fill(255);
}
sketch.rect(x, y, w, h);
};
})
p5((sketch) => {
let h = 120;
let w = width / 2;
sketch.setup = () => {
sketch.createCanvas(w, h);
};
sketch.draw = () => {
sketch.background(204);
sketch.line(20, 20, w - 20, h - 20);
if (sketch.keyIsPressed) {
sketch.line(w - 20, 20, 20, h - 20);
}
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.textSize(48);
sketch.textAlign(sketch.CENTER);
sketch.fill(255);
};
sketch.draw = () => {
sketch.background(0);
sketch.text(sketch.key, width / 2, 75);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(120, 120);
};
sketch.draw = () => {
sketch.background(204);
if (sketch.keyIsPressed) {
if (sketch.key == "h" || sketch.key == "H") {
sketch.line(30, 60, 90, 60);
}
if (sketch.key == "n" || sketch.key == "N") {
sketch.line(30, 20, 90, 100);
}
}
sketch.line(30, 20, 30, 100);
sketch.line(90, 20, 90, 100);
};
})
p5((sketch) => {
let x = 215;
let increment = 2;
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
if (sketch.keyIsPressed) {
if (sketch.keyCode == sketch.LEFT_ARROW) {
// If it's the left arrow
x -= increment;
} else if (sketch.keyCode == sketch.RIGHT_ARROW) {
// If it's the right arrow
x += increment;
}
}
sketch.background(255);
sketch.rect(x, 30, 50, 50);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(240, 120);
sketch.strokeWeight(2);
};
sketch.draw = () => {
sketch.background(204);
sketch.line(20, 20, 220, 100);
};
// // This technique is not supported on IE on laptops with touch.
// if (sketch.touches.length > 0) {
// sketch.line(220, 20, 20, 100);
// for (let i = 0; i < sketch.touches.length; i++) {
// let thisTouch = sketch.touches[i];
// // console.log(thisTouch.x, thisTouch.id);
// sketch.ellipse(thisTouch.x, thisTouch.y, 5, 5);
// }
// }
sketch.touchStarted = () => {
console.log("Touch started");
// sketch.background(100);
sketch.line(220, 20, 20, 100);
// for (let i = 0; i < sketch.touches.length; i++) {
// let thisTouch = sketch.touches[i];
// console.log(thisTouch.x, thisTouch.y);
// sketch.ellipse(thisTouch.x, thisTouch.y, 10, 10);
// }
return false;
};
sketch.touchEnded = () => {
console.log("Touch ended");
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 240);
sketch.fill(0, 102);
sketch.noStroke;
};
sketch.draw = () => {
let tx = sketch.touches[0].x;
let ty = sketch.touches[0].y;
sketch.ellipse(tx, ty, 15, 15);
return false;
};
})
p5((sketch) => {
let h = 150;
sketch.setup = () => {
sketch.createCanvas(width, h);
sketch.strokeWeight(12);
};
sketch.draw = () => {
sketch.background(204);
sketch.stroke(180);
sketch.line(sketch.mouseX, 0, sketch.mouseX, h); // Gray line
sketch.stroke(0);
var mx = sketch.mouseX / 2 + h / 2;
sketch.line(mx, 0, mx, sketch.height); // Black line
};
})
p5((sketch) => {
let h = 150;
sketch.setup = () => {
sketch.createCanvas(width, h);
sketch.strokeWeight(12);
};
sketch.draw = () => {
sketch.background(204);
sketch.stroke(180);
sketch.line(sketch.mouseX, 0, sketch.mouseX, h); // Gray line
sketch.stroke(0);
var mx = sketch.map(sketch.mouseX, 0, width, h / 2, 180);
sketch.line(mx, 0, mx, sketch.height); // Black line
};
})
import {p5} from "@josesho/p5-latest"
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.