// viewof chosenSketch = radio([sketch1, sketch2, sketch3, sketch4, sketch5, sketch6, sketch7, sketch8, sketch9, sketch10, sketch11])
// {
// debugger;
// var chosenSketch = radio({ // chosenSketch.value === 0
viewof chosenSketch = radio({
title: 'Choose a sketch',
description: '',
options: [
{ label: "Example I.1: Traditional random walk", value: '0' },
{ label: "Example I.2: Random number distribution", value: '1' },
{ label: "Example I.3: Walker that tends to move to the right", value: "2" },
{ label: "Example I.4: Gaussian distribution", value: "3" },
{ label: "Example I.5: Perlin noise walker", value: "4" },
{ label: "Example I.6: 2D Perlin noise", value: "5" }
],
value: '0'
})
// }
chosenSketch
p5Container = createContainer()
p5 = require("https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js")
container = ({ width: 640, height: 360 }) // object needs parentheses to differentiate from blocks
createContainer = () => { // create a div or node to attach sketch to
let el = document.createElement("div");
el.style.width = `${container.width}px`;
el.style.height = `${container.height}px`;
return el;
}
class Walker {
constructor(sketch){
this.sketch = sketch;
this.x = container.width/2;
this.y = container.height/2;
}
render() {
// debugger; // let's check docs of p5.stroke (very detailed docs with examples)
this.sketch.stroke(0);
this.sketch.point(this.x,this.y);
}
step() { // create random choice for which direction to move
// debugger; // let's check docs of p5.stroke (very detailed docs with examples)
var choice = this.sketch.floor(this.sketch.random(4));
if (choice === 0) {
this.x++;
} else if (choice == 1) {
this.x--;
} else if (choice == 2) {
this.y++;
} else {
this.y--;
}
this.x = this.sketch.constrain(this.x,0, container.width-1); // I guess it start from 0 to width-1
this.y = this.sketch.constrain(this.y,0, container.height-1);
}
}
sketch1 = function( sketch ) {
let walker;
// debugger; //set a breakpoint here, but it won't be triggered by running this cell, but the main action cell, i.e.g, the last cell in the end
// The usual setup function of p5
sketch.setup = () => {
sketch.createCanvas(container.width, container.height);
walker = new Walker(sketch);
sketch.background(255);
};
// the usual draw function of p5
sketch.draw = () => {
walker.step();
walker.render();
};
}
sketch2 = function( sketch ) {
let randomCounts = [];
let total = 20;
sketch.setup = () => {
sketch.createCanvas(container.width, container.height);
for (let i = 0; i < total; i++) {
randomCounts[i] = 0;
}
};
sketch.draw = () => {
sketch.background(255);
let index = sketch.floor(sketch.random(total));
randomCounts[index]++;
// Draw a rectangle to graph results
sketch.stroke(0);
sketch.strokeWeight(2);
sketch.fill(255);
let w = container.width/randomCounts.length;
for (let x = 0; x < randomCounts.length; x++) {
sketch.rect(x*w,container.height-randomCounts[x],w-1,randomCounts[x]);
}
};
}
class RightWalker {
constructor(sketch){
this.sketch = sketch;
this.x = container.width/2;
this.y = container.height/2;
};
render() {
this.sketch.stroke(0);
this.sketch.point(this.x,this.y);
};
step(){
let choice = this.sketch.floor(this.sketch.random(4));
let r = this.sketch.random(1);
// A 40% of moving to the right!
if (r < 0.4) {
this.x++;
} else if (r < 0.6) {
this.x--;
} else if (r < 0.8) {
this.y++;
} else {
this.y--;
}
this.x = this.sketch.constrain(this.x,0,container.width-1);
this.y = this.sketch.constrain(this.y,0,container.height-1);
};
}
sketch3 = function( sketch ) {
let walker;
sketch.setup = () => {
sketch.createCanvas(container.width, container.height);
walker = new RightWalker(sketch);
sketch.background(255);
};
sketch.draw = () => {
walker.step();
walker.render();
};
}
sketch4 = sketch => {
let walker;
sketch.setup = () => {
sketch.createCanvas(container.width, container.height);
sketch.background(255);
};
sketch.draw = () => {
// Get a gaussian random number w/ mean of 0 and standard deviation of 1.0
let xloc = sketch.randomGaussian();
const sd = 60; // Define a standard deviation
const mean = container.width/2; // Define a mean value (middle of the screen along the x-axis)
xloc = ( xloc * sd ) + mean; // Scale the gaussian random number by standard deviation and mean
sketch.fill(0, 10);
sketch.noStroke();
sketch.ellipse(xloc, container.height/2, 16, 16); // Draw an ellipse at our "normal" random position
};
}
class PerlinWalker {
constructor(sketch){
this.sketch = sketch;
this.position = sketch.createVector(container.width/2, container.height/2);
this.noff = sketch.createVector(sketch.random(1000), sketch.random(1000));
}
display() {
this.sketch.strokeWeight(2);
this.sketch.fill(51);
this.sketch.stroke(0);
this.sketch.ellipse(this.position.x, this.position.y, 48, 48);
}
walk() {
this.position.x = this.sketch.map(this.sketch.noise(this.noff.x),0,1,0, container.width);
this.position.y = this.sketch.map(this.sketch.noise(this.noff.y),0,1,0, container.height);
this.noff.add(0.01,0.01,0);
}
}
sketch5 = function( sketch ) {
let walker;
sketch.setup = () => {
sketch.createCanvas(container.width, container.height);
walker = new PerlinWalker(sketch);
sketch.background(255);
};
sketch.draw = () => {
walker.walk();
walker.display();
};
}
sketch6 = function(sketch) {
sketch.setup = () => {
sketch.createCanvas(container.width, container.height);
sketch.noLoop();
};
sketch.draw = () => {
sketch.background(0);
// Optional: adjust noise detail here
// sketch.noiseDetail(8,0.65);
sketch.loadPixels();
let d = sketch.pixelDensity();
let fullImage = 4 * (container.width * d) * (container.height * d);
let xoff = 0.0;
let yoff = 0.0;
let bright;
for (var i = 0; i < fullImage; i += 4) {
xoff += increment;
yoff += increment;
bright = sketch.map(sketch.noise(xoff, yoff), 0, 1, 0, 100);
sketch.pixels[i] = 0;
sketch.pixels[i + 1] = 0;
sketch.pixels[i + 2] = 0;
sketch.pixels[i + 3] = bright;
}
// let xoff = 0.0;
// for (let x = 0; x < container.width; x++) {
// xoff += increment;
// let yoff = 0.0;
// for (let y = 0; y < container.height; y++) {
// yoff += increment;
// // Calculate noise and scale by 255
// let bright = sketch.map(sketch.noise(xoff, yoff), 0, 1, 0, 255);
// // Try using this line instead
// // let bright = sketch.random(0,255);
// // Set each pixel onscreen to a grayscale value
// sketch.pixels[x + y * container.width] = bright;
// // sketch.pixels[x + y * container.width * d / 2] = bright;
// // sketch.pixels[x + y * container.width * (1/4) * d] = bright;
// // sketch.pixels[x + y * container.width * (3/4) * d] = bright;
// }
// }
sketch.updatePixels();
}
}
{
// debugger; /* to see how p5 constructor work, or docs*/
const sketches = [sketch1, sketch2, sketch3, sketch4, sketch5, sketch6];
const selectedSketch = sketches[parseInt(chosenSketch, 10)];
// Resets div container
// Reinstantiate the p5 with the sketch
p5Container.innerHTML = "";
new p5(selectedSketch, p5Container); // dig into p5 constructor
}
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.
