Estimation statistics, craft beer, data visualization, web scraping, poetry
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
// Draw a line starting from xy coord (20,50), to (420,110).
sketch.line(20, 50, 420, 110);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
// A quadrilateral has 8 parameters, a pair of parameters for the xy coordinates of each point.
sketch.quad(158, 55, 199, 14, 392, 66, 351, 107);
// Following the pattern above, a triangle is defined by 3 pairs of points, ie. 6 parameters.
// The points go clockwise, starting from the right-most vertex.
sketch.triangle(347, 54, 392, 9, 392, 66);
sketch.triangle(158, 55, 290, 91, 290, 112);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
// The first two parameters are the xy coords of the anchor point.
// The anchor point is the top left corner, by default.
// The next two parameters are the width and the height respectively.
sketch.rect(180, 60, 220, 40);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
// The first two parameters indicate the location of the center of the ellipse.
// The third and fourth parameters determine the shape's width and height, respectively.
sketch.ellipse(278, -100, 400, 400);
sketch.ellipse(120, 100, 110, 110);
sketch.ellipse(412, 60, 18, 18);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
// The first 2 parameters of arc() are the center point of the ellipse.
// The next 2 parameters are the width and height of the ellipse, respectively.
// The last 2 parameters are the angles to start the arc, and to stop the arc, in radians.
sketch.arc(90, 60, 80, 80, 0, sketch.HALF_PI);
sketch.arc(190, 60, 80, 80, 0, sketch.PI + sketch.HALF_PI);
sketch.arc(290, 60, 80, 80, sketch.PI, sketch.TWO_PI + sketch.HALF_PI);
sketch.arc(
390,
60,
80,
80,
sketch.QUARTER_PI,
sketch.PI + sketch.QUARTER_PI
);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
// The first 2 parameters of arc() are the center point of the ellipse.
// The next 2 parameters are the width and height of the ellipse, respectively.
// The last 2 parameters are the angles to start the arc, and to stop the arc, in radians.
sketch.arc(90, 60, 80, 80, 0, sketch.radians(90));
sketch.arc(190, 60, 80, 80, 0, sketch.radians(270));
sketch.arc(290, 60, 80, 80, sketch.radians(180), sketch.radians(450));
sketch.arc(390, 60, 80, 80, sketch.radians(45), sketch.radians(225));
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.angleMode(sketch.DEGREES);
};
sketch.draw = () => {
sketch.background(204);
// The first 2 parameters of arc() are the center point of the ellipse.
// The next 2 parameters are the width and height of the ellipse, respectively.
// The last 2 parameters are the angles to start the arc, and to stop the arc, in radians.
sketch.arc(90, 60, 80, 80, 0, 90);
sketch.arc(190, 60, 80, 80, 0, 270);
sketch.arc(290, 60, 80, 80, 180, 50);
sketch.arc(390, 60, 80, 80, 45, 225);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
sketch.ellipse(140, 0, 190, 190);
sketch.rect(160, 30, 260, 20);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
sketch.rect(160, 30, 260, 20);
sketch.ellipse(140, 0, 190, 190);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
sketch.strokeWeight(1); // Stroke weight to 1 pixel.
sketch.ellipse(75, 60, 90, 90);
sketch.strokeWeight(8); // Stroke weight to 8 pixels
sketch.ellipse(175, 60, 90, 90);
sketch.strokeWeight(15); // Stroke weight to 15 pixels
sketch.ellipse(279, 60, 90, 90);
sketch.strokeWeight(20); // Stroke weight to 20 pixels
sketch.ellipse(389, 60, 90, 90);
};;
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.strokeWeight(12);
};
sketch.draw = () => {
sketch.background(204);
sketch.strokeJoin(sketch.ROUND); // Round the stroke corners
sketch.rect(40, 25, 70, 70);
sketch.strokeJoin(sketch.BEVEL); // Bevel the stroke corners
sketch.rect(140, 25, 70, 70);
sketch.strokeCap(sketch.SQUARE); // Square the line endings
sketch.line(270, 25, 340, 95);
sketch.strokeCap(sketch.ROUND); // Round the line endings
sketch.line(350, 25, 420, 95);
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
// Shades of grey as defined on a scale running from 0 to 255.
// 0 is black, and 255 is white. 128 is medium grey.
sketch.draw = () => {
sketch.background(0); // Black
sketch.fill(204); // Light gray
sketch.ellipse(132, 82, 200, 200); // Light gray circle
sketch.fill(153); // Medium gray
sketch.ellipse(228, -16, 200, 200); // Medium gray circle
sketch.fill(102); // Dark gray
sketch.ellipse(268, 118, 200, 200); // Dark gray circle
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
// Shades of grey as defined on a scale running from 0 to 255.
// 0 is black, and 255 is white. 128 is medium grey.
sketch.draw = () => {
sketch.background(204);
sketch.fill(153); // Medium gray
sketch.ellipse(132, 82, 200, 200); // Gray circle
sketch.noFill(); // Turn off fill
sketch.ellipse(228, -16, 200, 200); // Outline circle
// sketch.noStroke(); // Turn off stroke
// sketch.ellipse(268, 118, 200, 200); // Doesn’t draw!
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
// Using RGB to define fill.
sketch.draw = () => {
sketch.background(0, 26, 51); // Dark blue color
sketch.fill(255, 0, 0); // Red color
sketch.ellipse(132, 82, 200, 200); // Red circle
sketch.fill(0, 255, 0); // Green color
sketch.ellipse(228, -16, 200, 200); // Green circle
sketch.fill(0, 0, 255); // Blue color
sketch.ellipse(268, 118, 200, 200); // Blue circle
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 240);
sketch.noStroke();
};
sketch.draw = () => {
// add a fourth parameter to fill(); this alpha value runs from 0 to 255.
sketch.background(204, 226, 225); // Light blue color
sketch.fill(255, 0, 0, 160); // Red color
sketch.ellipse(132, 82, 200, 200); // Red circle
sketch.fill(0, 255, 0, 160); // Green color
sketch.ellipse(228, -16, 200, 200); // Green circle
sketch.fill(0, 0, 255, 160); // Blue color
sketch.ellipse(268, 118, 200, 200); // Blue circle
};
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
