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