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"
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.
