Information Density: p5.js – Signal Evidence & AI Readability

[H1] Welcome to p5.js
[H2] Explore the p5.js library reference
Reference
[H2] Learn p5.js with examples
Examples
[IMG: Screenshot of sketch]
Screenshot of sketchGeodata WeavingKaspar Ravel
[IMG: Screenshot of sketch]
Screenshot of sketchSlime MoldsPatt Vira
[H2] See the p5.js community in action
Community
[IMG: Screenshot of sketch]
Screenshot of sketchGenerative Succulentsnewyellow
[IMG: Screenshot of sketch]
Screenshot of sketchPadrão GeométricoGuilherme Vieira
[IMG: Screenshot of sketch]
Screenshot of sketchZen Potsnewyellow
[IMG: Screenshot of sketch]
Screenshot of sketchGlitch animationKarakure178
[H2] Donate to p5.js
Donate
[H2] Download p5.js
Download Library

Looking for p5.sound? Go to the p5.sound reference!
[H2] Shape
[H3] 2D Primitives
arc()Draws an arc.circle()Draws a circle.ellipse()Draws an ellipse (oval).line()Draws a straight line between two points.point()Draws a single point in space.quad()Draws a quadrilateral (four-sided shape).rect()Draws a rectangle.square()Draws a square.triangle()Draws a triangle.
[H3] 3D Models
createModel()Load a 3d model from an OBJ or STL string.loadModel()Loads a 3D model to create a p5.Geometry object.model()Draws a p5.Geometry object to the canvas.
[H3] 3D Primitives
beginGeometry()Begins adding shapes to a new p5.Geometry object.box()Draws a box (rectangular prism).buildGeometry()Creates a custom p5.Geometry object from simpler 3D shapes.cone()Draws a cone.cylinder()Draws a cylinder.ellipsoid()Draws an ellipsoid.endGeometry()Stops adding shapes to a new p5.Geometry object and returns the object.freeGeometry()Clears a p5.Geometry object from the graphics processing unit (GPU) memory.plane()Draws a plane.sphere()Draws a sphere.torus()Draws a torus.
[H3] Attributes
ellipseMode()Changes where ellipses, circles, and arcs are drawn.noSmooth()Draws certain features with jagged (aliased) edges.rectMode()Changes where rectangles and squares are drawn.smooth()Draws certain features with smooth (antialiased) edges.strokeCap()Sets the style for rendering the ends of lines.strokeJoin()Sets the style of the joints that connect line segments.strokeWeight()Sets the width of the stroke used for points, lines, and the outlines of shapes.
[H3] Curves
bezier()Draws a Bézier curve.bezierDetail()Sets the number of segments used to draw Bézier curves in WebGL mode.bezierPoint()Calculates coordinates along a Bézier curve using interpolation.bezierTangent()Calculates coordinates along a line that's tangent to a Bézier curve.curve()Draws a curve using a Catmull-Rom spline.curveDetail()Sets the number of segments used to draw spline curves in WebGL mode.curvePoint()Calculates coordinates along a spline curve using interpolation.curveTangent()Calculates coordinates along a line that's tangent to a spline curve.curveTightness()Adjusts the way curve() and curveVertex() draw.
[H3] Vertex
beginContour()Begins creating a hole within a flat shape.beginShape()Begins adding vertices to a custom shape.bezierVertex()Adds a Bézier curve segment to a custom shape.curveVertex()Adds a spline curve segment to a custom shape.endContour()Stops creating a hole within a flat shape.endShape()Stops adding vertices to a custom shape.normal()Sets the normal vector for vertices in a custom 3D shape.quadraticVertex()Adds a quadratic Bézier curve segment to a custom shape.vertex()Adds a vertex to a custom shape.
[H3] p5.Geometry
calculateBoundingBox()Calculates the position and size of the smallest box that contains the geometry.clearColors()Removes the geometry’s internal colors.computeFaces()Computes the geometry's faces using its vertices.computeNormals()Calculates the normal vector for each vertex on the geometry.facesAn array that lists which of the geometry's vertices form each of its faces.flipU()Flips the geometry’s texture u-coordinates.flipV()Flips the geometry’s texture v-coordinates.normalize()Transforms the geometry's vertices to fit snugly within a 100×100×100 box centered at the origin.saveObj()The saveObj() function exports p5.Geometry objects as 3D models in the Wavefront .obj file formatsaveStl()The saveStl() function exports p5.Geometry objects as 3D models in the STL stereolithography file formatuvsAn array that lists the texture coordinates for each of the geometry's vertices.vertexNormalsAn array with the vectors that are normal to the geometry's vertices.verticesAn array with the geometry's vertices.
[H2] Color
[H3] Creating & Reading
alpha()Gets the alpha (transparency) value of a color.blue()Gets the blue value of a color.brightness()Gets the brightness value of a color.color()Creates a p5.Color object.green()Gets the green value of a color.hue()Gets the hue value of a color.lerpColor()Blends two colors to find a third color between them.lightness()Gets the lightness value of a color.paletteLerp()Blends multiple colors to find a color between them.red()Gets the red value of a color.saturation()Gets the saturation value of a color.
[H3] Setting
background()Sets the color used for the background of the canvas.beginClip()Starts defining a shape that will mask any shapes drawn afterward.clear()Clears the pixels on the canvas.clip()Defines a shape that will mask any shapes drawn afterward.colorMode()Changes the way color values are interpreted.endClip()Ends defining a mask that was started with beginClip().erase()Starts using shapes to erase parts of the canvas.fill()Sets the color used to fill shapes.noErase()Ends erasing that was started with erase().noFill()Disables setting the fill color for shapes.noStroke()Disables drawing points, lines, and the outlines of shapes.stroke()Sets the color used to draw points, lines, and the outlines of shapes.
[H3] p5.Color
setAlpha()Sets the alpha (transparency) value of a color.setBlue()Sets the blue component of a color.setGreen()Sets the green component of a color.setRed()Sets the red component of a color.toString()Returns the color formatted as a String.
[H2] Typography
[H3] Attributes
textAlign()Sets the way text is aligned when text() is called.textAscent()Calculates the ascent of the current font at its current size.textDescent()Calculates the descent of the current font at its current size.textLeading()Sets the spacing between lines of text when text() is called.textSize()Sets the font size when text() is called.textStyle()Sets the style for system fonts when text() is called.textWidth()Calculates the maximum width of a string of text drawn when text() is called.textWrap()Sets the style for wrapping text when text() is called.
[H3] Loading & Displaying
loadFont()Loads a font and creates a p5.Font objecttext()Draws text to the canvas.textFont()Sets the font used by the text() function.
[H3] p5.Font
fontThe font's underlying opentype.js font object.textBounds()Returns the bounding box for a string of text written using the font.textToPoints()Returns an array of points outlining a string of text written using the font.
[H2] Image
createImage()Creates a new p5.Image object.saveCanvas()Saves the current canvas as an image.saveFrames()Captures a sequence of frames from the canvas that can be saved as images.
[H3] Loading & Displaying
image()Draws an image to the canvas.imageMode()Changes the location from which images are drawn when image() is called.loadImage()Loads an image to create a p5.Image object.noTint()Removes the current tint set by tint().saveGif()Generates a gif from a sketch and saves it to a file.tint()Tints images using a color.
[H3] Pixels
blend()Copies a region of pixels from one image to another.copy()Copies pixels from a source image to a region of the canvas.filter()Applies an image filter to the canvas.get()Gets a pixel or a region of pixels from the canvas.loadPixels()Loads the current value of each pixel on the canvas into the pixels array.pixelsAn array containing the color of each pixel on the canvas.set()Sets the color of a pixel or draws an image to the canvas.updatePixels()Updates the canvas with the RGBA values in the pixels array.
[H3] p5.Image
blend()Copies a region of pixels from another image into this one.copy()Copies pixels from a source image to this image.delay()Changes the delay between frames in an animated GIF.filter()Applies an image filter to the image.get()Gets a pixel or a region of pixels from the image.getCurrentFrame()Gets the index of the current frame in an animated GIF.heightThe image's height in pixels.loadPixels()Loads the current value of each pixel in the image into the img.pixels array.mask()Masks part of the image with another.numFrames()Returns the number of frames in an animated GIF.pause()Pauses an animated GIF.pixelDensity()Gets or sets the pixel density for high pixel density displays.pixelsAn array containing the color of each pixel in the image.play()Plays an animated GIF that was paused with img.pause().reset()Restarts an animated GIF at its first frame.resize()Resizes the image to a given width and height.save()Saves the image to a file.set()Sets the color of one or more pixels within an image.setFrame()Sets the current frame in an animated GIF.updatePixels()Updates the canvas with the RGBA values in the img.pixels array.widthThe image's width in pixels.
[H2] Transform
applyMatrix()Applies a transformation matrix to the coordinate system.resetMatrix()Clears all transformations applied to the coordinate system.rotate()Rotates the coordinate system.rotateX()Rotates the coordinate system about the x-axis in WebGL mode.rotateY()Rotates the coordinate system about the y-axis in WebGL mode.rotateZ()Rotates the coordinate system about the z-axis in WebGL mode.scale()Scales the coordinate system.shearX()Shears the x-axis so that shapes appear skewed.shearY()Shears the y-axis so that shapes appear skewed.translate()Translates the coordinate system.
[H2] Environment
cursor()Changes the cursor's appearance.deltaTimeA Number variable that tracks the number of milliseconds it took to draw the last frame.describe()Creates a screen reader-accessible description of the canvas.describeElement()Creates a screen reader-accessible description of elements in the canvas.displayDensity()Returns the display's current pixel density.displayHeightA Number variable that stores the height of the screen display.displayWidthA Number variable that stores the width of the screen display.focusedA Boolean variable that's true if the browser is focused and false if not.frameCountA Number variable that tracks the number of frames drawn since the sketch started.frameRate()Sets the number of frames to draw per second.fullscreen()Toggles full-screen mode or returns the current mode.getTargetFrameRate()Returns the target frame rate.getURL()Returns the sketch's current URL as a String.getURLParams()Returns the current URL parameters in an Object.getURLPath()Returns the current URL path as an Array of Strings.gridOutput()Creates a screen reader-accessible description of shapes on the canvas.heightA Number variable that stores the height of the canvas in pixels.noCursor()Hides the cursor from view.pixelDensity()Sets the pixel density or returns the current density.print()Displays text in the web browser's

[H2] Featured
[IMG: White circles on a black background, with varying degrees of transparency.]
White circles on a black background, with varying degrees of transparency.Mobile Device MovementAnimate based on device motion.
[IMG: A point on the unit circle, together with the corresponding sine and cosine values on their graphs.]
A point on the unit circle, together with the corresponding sine and cosine values on their graphs.Sine and CosineAnimate circular, back and forth, and wave motion.
[IMG: A sphere of dark purple cubes on a light pink background.]
A sphere of dark purple cubes on a light pink background.Orbit ControlControl the camera with the mouse.
[IMG: Rainbow colored smoke angled towards the right of the canvas, with a white arrow above the smoke pointing right.]
Rainbow colored smoke angled towards the right of the canvas, with a white arrow above the smoke pointing right.Smoke ParticlesSimulate smoke with a particle system.
[H2] Shapes And Color
[IMG: A few basic shapes drawn in white and black over a grey background.]
A few basic shapes drawn in white and black over a grey background.Shape PrimitivesDraw 2D shapes.
[IMG: A few basic shapes drawn in different colors over a blue background.]
A few basic shapes drawn in different colors over a blue background.ColorAdd color to your sketch.
[H2] Animation And Variables
[IMG: A squiggly rainbow line on a black background.]
A squiggly rainbow line on a black background.Drawing LinesDraw with the mouse.
[IMG: A small green circle on a black background.]
A small green circle on a black background.Animation with EventsPause and resume animation.
[IMG: White circles on a black background, with varying degrees of transparency.]
White circles on a black background, with varying degrees of transparency.Mobile Device MovementAnimate based on device motion.
[IMG: A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background.]
A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background.ConditionsUse if and else statements to make decisions while your sketch runs.
[H2] Imported Media
[IMG: Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned.]
Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned.WordsLoad fonts and draw text.
[IMG: Black-and-white photograph of a parrot. A curvy line is drawn across the image; within the confines of that line, color is added to the photograph.]
Black-and-white photograph of a parrot. A curvy line is drawn across the image; within the confines of that line, color is added to the photograph.Copy Image DataPaint from an image file onto the canvas.
[IMG: Two leaf sprigs side by side on a white background. The right sprig is labeled]
Two leaf sprigs side by side on a white background. The right sprig is labeled "Mask." The left sprig is labeled "Masked Image," and uses the shape of the right sprig to mask a photograph of tulips.Alpha MaskUse one image to cut out a section of another image.
[IMG: An astronaut on a planet as the background with a slightly transparent version of this image overlaid and to the left.]
An astronaut on a planet as the background with a slightly transparent version of this image overlaid and to the left.Image TransparencyMake an image translucent on the canvas.
[IMG: A close up of an audio player timestamp, reading]
A close up of an audio player timestamp, reading "0:00 / 2."Audio PlayerCreate a player for an audio file.
[IMG: A screenshot of a video of a hand, with the pointer finger touching a desk.]
A screenshot of a video of a hand, with the pointer finger touching a desk.Video PlayerCreate a player for a video file.
[IMG: Two overlaid screenshots of a video of a hand, with the pointer finger touching a desk. Text to the top right of the screenshot reads]
Two overlaid screenshots of a video of a hand, with the pointer finger touching a desk. Text to the top right of the screenshot reads "Click the canvas to start and pause the video feed."Video on CanvasDisplay and stylize a video on the canvas.
[IMG: An inverse, black and white photograph of trees.]
An inverse, black and white photograph of trees.Video CaptureDisplay a live video feed from a camera.
[H2] Input Elements
[IMG: A grey background with white text reading]
A grey background with white text reading "Drag an image file onto the canvas."Image DropDisplay an image that the page visitor dragged and dropped.
[IMG: An input field with a submit button, labeled]
An input field with a submit button, labeled "Hello, p5!"Input and ButtonUse text input from the page visitor.
[IMG: A survey on a yellow background, consisting of an input field, radio buttons, and a dropdown.]
A survey on a yellow background, consisting of an input field, radio buttons, and a dropdown.Form ElementsCreate a form and respond to the results.
[H2] Transformation
[IMG: Green and blue geometric shapes on a black background.]
Green and blue geometric shapes on a black background.TranslateMove the coordinate system origin.
[IMG: Line segments rotated around center of canvas.]
Line segments rotated around center of canvas.RotateRotate the coordinate system.
[IMG: Solid rectangles stacked on top of one another.]
Solid rectangles stacked on top of one another.ScaleModify the coordinate system scale.
[H2] Calculating Values
[IMG: A small white circle on a grey background.]
A small white circle on a grey background.Linear InterpolationConvert a number between 0 and 1 to another range.
[IMG: A large yellow circle on a black background.]
A large yellow circle on a black background.MapConvert a number from one range to another range.
[IMG: A small purple circle on a black background.]
A small purple circle on a black background.RandomGet random numbers.
[IMG: A small white circle in a pink rectangle.]
A small white circle in a pink rectangle.ConstrainKeep a number within a range.
[IMG: A pink clock on a grey background.]
A pink clock on a grey background.ClockGet the current time.
[H2] Repetition
[IMG: Horizontal stripes fading between light green at the top and dark blue at the bottom.]
Horizontal stripes fading between light green at the top and dark blue at the bottom.Color InterpolationFade between two colors.
[IMG: Small circles, each with a different color, arranged in a circular path, displaying hues across the color spectrum.]
Small circles, each with a different color, arranged in a circular path, displaying hues across the color spectrum.Color WheelCreate a visualization of the color spectrum.
[IMG: Ten rainbow-colored lines in a bezier curve formation.]
Ten rainbow-colored lines in a bezier curve formation.BezierDraw a set of curves.
[IMG: Dark grey canvas that reflects the lines drawn within it in symmetrical sections.]
Dark grey canvas that reflects the lines drawn within it in symmetrical sections.KaleidoscopeDraw mirrored designs with the mouse.
[IMG: Black and white abstract noise texture.]
Black and white abstract noise texture.NoiseGenerate naturalistic textures using Perlin noise.
[IMG: A rainbow fractal tree on a black background.]
A rainbow fractal tree on a black background.Recursive TreeDraw a tree using a function that calls itself.
[H2] Listing Data with Arrays
[IMG: A random series of words related to p5.js scattered on a maroon background.]
A random series of words related to p5.js scattered on a maroon background.Random PoetryGenerate a poem with words randomly selected from a bank.
[H2] Angles And Motion
[IMG: A point on the unit circle, together with the corresponding sine and cosine values on their graphs.]
A point on the unit circle, together with the corresponding sine and cosine values on their graphs.Sine and CosineAnimate circular, back and forth, and wave motion.
[IMG: Two eyes on a black background.]
Two eyes on a black background.AimRotate toward a point.
[IMG: Rainbow ring made up of triangles whose vertices lie on two concentric circles.]
Rainbow ring made up of triangles whose vertices lie on two concentric circles.Triangle StripSplit a ring into triangles.
[H2] Games
[IMG: Large purple circle on a grey background.]
Large purple circle on a grey background.Circle ClickerMake a game about clicking a circle quickly and save the high score.
[IMG: Two narrow white rectangles and a white square representing the paddles and ball in a game of ping pong.]
Two narrow white rectangles and a white square representing the paddles and ball in a game of ping pong.Ping PongMake a game inspired by Atari's Pong.
[IMG: A narrow green L shape and a red square representing the snake and fruit in the arcade game Snake.]
A narrow green L shape and a red square representing the snake and fruit in the arcade game Snake.SnakeMake a game based on Snake arcade games.
[H2] 3D
[IMG: Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, ellipsoid, and a model of an astronaut. The surface of the shapes are multicolored.]
Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, ellipsoid, and a model of an astronaut. The surface of the shapes are multicolored.GeometriesDraw 3D shapes, including a custom model.
[IMG: A tiled plane of snake models.]
A tiled plane of snake models.Custom GeometryGenerate a 3D shape programmatically.
[IMG: Astronaut 3D model on a black background.]
Astronaut 3D model on a black background.MaterialsChange 3D objects' color, texture, and how they respond to light.
[IMG: A sphere of dark purple cubes on a light pink background.]
A sphere of dark purple cubes on a light pink background.Orbit ControlControl the camera with the mouse.
[IMG: A screenshot of a video of a city crosswalk, with offset colors.]
A screenshot of a video of a city crosswalk, with offset colors.Filter ShaderManipulate imagery with a shader.
[IMG: A red-to-blue waving ribbon on a white background.]
A red-to-blue waving ribbon on a white background.Adjusting Positions with a ShaderUse a shader to adjust shape vertices.
[IMG: A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.]
A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.Framebuffer BlurSimulate a camera's depth of field.
[H2] Advanced Canvas Rendering
[IMG: Black canvas with a very dark grey rectangle in the middle. A white circle is at the edge of the rectangle.]
Black canvas with a very dark grey rectangle in the middle. A white circle is at the edge of the rectangle.Create GraphicsDraw imagery off-screen.
[IMG: Two curving lines made of repeating white circles and squares with black outlines, on a black and white background.]
Two curving lines made of repeating white circles and squares with black outlines, on a black and white background.Multiple CanvasesUse Instance Mode to put multiple canvases on the page.
[IMG: Two spheres broken up into a square grid with a gradient in each grid.]
Two spheres broken up into a square grid with a gradient in each grid.Shader as a TextureGenerate a texture for a 3D shape using a shader.
[H2] Classes And Objects
[IMG: Snowflakes falling on a black background.]
Snowflakes falling on a black background.SnowflakesAnimate snowfall.
[IMG: Twenty white circles on a black background.]
Twenty white circles on a black background.Shake Ball BounceAnimate ball movement based on mobile device motion.
[IMG: A pattern of multicolored circles connected by white lines, on a black background.]
A pattern of multicolored circles connected by white lines, on a black background.Connected ParticlesDraw circles and connecting lines using the mouse.
[IMG: A group of bird-like objects, represented by rainbow triangles, modeling flocking behavior.]
A group of bird-like objects, represented by rainbow triangles, modeling flocking behavior.FlockingSimulate bird flocking behavior.
[H2] Loading And Saving Data
[IMG: Black outlines of circles on a white background. Text below the circles reads]
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."Local StorageSave data from the browser on the device.
[IMG: Black outlines of circles on a white background. Text below the circles reads]
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."JSONStore data in JavaScript object notation.
[IMG: Black outlines of circles on a white background. Text below the circles reads]
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."TableStore data as comma-separated values.
[H2] Math And Physics
[IMG: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.]
A small green circle hovering over a yellow tilted plane at the bottom of the canvas.Non-Orthogonal ReflectionSimulate a ball bouncing on a slanted surface.
[IMG: A yellow pentagon on a black background.]
A yellow pentagon on a black background.Soft BodySimulate the physics of a soft body accelerating toward the mouse.
[IMG: 9 multicolored circles at varying heights on a grey background.]
9 multicolored circles at varying heights on a grey background.ForcesSimulate forces on multiple bodies as they move through liquid.
[IMG: Rainbow colored smoke angled towards the right of the canvas, with a white arrow above the smoke pointing right.]
Rainbow colored smoke angled towards the right of the canvas, with a white arrow above the smoke pointing right.Smoke ParticlesSimulate smoke with a particle system.
[IMG: Grid of squares made of black lines on a white background. Some squares are filled in with solid black.]
Grid of squares made of black lines on a white background. Some squares are filled in with solid black.Game of LifeRecreate John Conway's cellular automaton.
[IMG: Colorful rendering of the Mandelbrot set.]
Colorful rendering of the Mandelbrot set.Mandelbrot SetVisualize a mathematical set that produces fractal structures.

[H2] Sketches
[IMG: Screenshot of sketch]
Screenshot of sketchFeelings make us humanepibyte
[IMG: Screenshot of sketch]
Screenshot of sketchAll you need is infinite love!jcponcemath
[IMG: Screenshot of sketch]
Screenshot of sketchEmotional Echoes: Multilingual Typography ExperimentRikiya Okawa
[IMG: Screenshot of sketch]
Screenshot of sketchBoiling PointDave Pagurek
[IMG: Screenshot of sketch]
Screenshot of sketchAbracadabra (anamorphic 3D text)Rubén Medellín <chubas>
[IMG: Screenshot of sketch]
Screenshot of sketchHaikuDavid Braziel
[IMG: Screenshot of sketch]
Screenshot of sketchMeditationsJake Welch
[IMG: Screenshot of sketch]
Screenshot of sketchconfusedJack All Sketches
[H2] Libraries
[IMG: The text]
The text "The quick brown fox jumps over the lazy dog" repeated in different weightsp5.woff2An addon to add support for WebGL rendering, textToPoints, and related text methods for woff2 fonts. Load a Google Fonts URL and you're good to go! By Dave Pagurek
[IMG: A matrix and a vector both filled with asterisks. The math is written in white on a red background.]
A matrix and a vector both filled with asterisks. The math is written in white on a red background.númeroA friendly and intuitive math library for p5.js. By Nick McIntyre
[IMG: Text]
Text "Friendly machine learning for the web with ml5.js" on top of a light grey ml5.js logoml5.jsFriendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser. By NYU's Interactive Telecommunications/Interactive Media Arts Program and NYU Shanghai's Interactive Media Arts Program
[IMG: Colorful hexagonal cubes tessellation spelling]
Colorful hexagonal cubes tessellation spelling "p5.grain"p5.grainConveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks. By meezwhite
[IMG: An array of 8 overlapping circles.]
An array of 8 overlapping circles.p5.spatial.jsAdds multichannel audio support for p5.sound.js. By Tommy Martinez
[IMG: p5.capture: Record your p5.js sketches effortlessly!]
p5.capture: Record your p5.js sketches effortlessly!p5.captureRecord your p5.js sketches effortlessly! By tapioca24
[IMG: The cover image for p5Utils library. Depicts the ruler on a yellow background with p5.Utils text in the center.]
The cover image for p5Utils library. Depicts the ruler on a yellow background with p5.Utils text in the center.p5.Utilsp5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners. By Alp Tuğan
[IMG: The text]
The text 'p5.brush' surrounded by colored brush strokes.p5.brushUnlock custom brushes, natural fill effects and intuitive hatching in p5.js. By Alejandro Campos Uribe All Libraries
[H2] Events
[IMG: A group of participants smile and make a p5 sign with their hands.]
A group of participants smile and make a p5 sign with their hands.p5.js Contributors Conference 2015May 25, 2015
[IMG: Group photo of participants smiling enthusiastically with their hands in the air]
Group photo of participants smiling enthusiastically with their hands in the airp5.js Contributors Conference 2019August 13, 2019
[IMG: A grid of speaker profiles overlaid on a warm gradient background.]
A grid of speaker profiles overlaid on a warm gradient background.p5.js Access Day 2022May 21, 2022
[IMG: p5.js salon audience are sitting in a crowded room with curious and serious expression.]
p5.js salon audience are sitting in a crowded room with curious and serious expression.p5.js Community Salon 2023March 30, 2023
[IMG: Announcement graphic with pink and purple gradient background. On the top, the p5.js and Sovereign Tech Fund logo in white and “Contribute Back to Open Source Challenge” text underneath. Under a divider line, the text, “Round 1, €200,000” and “Round 2, €250,000“ and “To Enhance Organization & Accessibility of p5.js Documentation” in white with a star graphic in the bottom left corner.]
Announcement graphic with pink and purple gradient background. On the top, the p5.js and Sovereign Tech Fund logo in white and “Contribute Back to Open Source Challenge” text underneath. Under a divider line, the text, “Round 1, €200,000” and “Round 2, €250,000“ and “To Enhance Organization & Accessibility of p5.js Documentation” in white with a star graphic in the bottom left corner.Sovereign Tech Fund x p5.js Documentation Accessibility ProjectSeptember 1, 2023 All Events