From f3da0ef272a98126b49d6038233eba58bf977985 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Wed, 28 Feb 2024 14:11:10 -0800
Subject: [PATCH] Working build

---
 src/content/reference/en/JSON/stringify.mdx   |  38 +
 src/content/reference/en/console/log.mdx      |  63 ++
 src/content/reference/en/index.mdx            | 727 ++++++++++++++++++
 .../reference/en/p5.Amplitude/getLevel.mdx    |  58 ++
 .../reference/en/p5.Amplitude/setInput.mdx    |  66 ++
 .../reference/en/p5.Amplitude/smooth.mdx      |  22 +
 .../en/p5.Amplitude/toggleNormalize.mdx       |  29 +
 src/content/reference/en/p5.AudioIn/amp.mdx   |  26 +
 .../reference/en/p5.AudioIn/amplitude.mdx     |  16 +
 .../reference/en/p5.AudioIn/connect.mdx       |  24 +
 .../reference/en/p5.AudioIn/currentSource.mdx |  15 +
 .../reference/en/p5.AudioIn/disconnect.mdx    |  18 +
 .../reference/en/p5.AudioIn/enabled.mdx       |  17 +
 .../reference/en/p5.AudioIn/getLevel.mdx      |  30 +
 .../reference/en/p5.AudioIn/getSources.mdx    |  60 ++
 src/content/reference/en/p5.AudioIn/input.mdx |  15 +
 .../reference/en/p5.AudioIn/mediaStream.mdx   |  15 +
 .../reference/en/p5.AudioIn/output.mdx        |  15 +
 .../reference/en/p5.AudioIn/setSource.mdx     |  47 ++
 src/content/reference/en/p5.AudioIn/start.mdx |  38 +
 src/content/reference/en/p5.AudioIn/stop.mdx  |  17 +
 .../reference/en/p5.AudioIn/stream.mdx        |  15 +
 .../reference/en/p5.AudioVoice/connect.mdx    |  20 +
 .../reference/en/p5.AudioVoice/disconnect.mdx |  16 +
 src/content/reference/en/p5.Camera/camera.mdx |  96 +++
 .../reference/en/p5.Camera/centerX.mdx        |  38 +
 .../reference/en/p5.Camera/centerY.mdx        |  38 +
 .../reference/en/p5.Camera/centerZ.mdx        |  38 +
 src/content/reference/en/p5.Camera/eyeX.mdx   |  38 +
 src/content/reference/en/p5.Camera/eyeY.mdx   |  37 +
 src/content/reference/en/p5.Camera/eyeZ.mdx   |  37 +
 .../reference/en/p5.Camera/frustum.mdx        |  57 ++
 src/content/reference/en/p5.Camera/lookAt.mdx |  73 ++
 src/content/reference/en/p5.Camera/move.mdx   |  76 ++
 src/content/reference/en/p5.Camera/ortho.mdx  |  58 ++
 src/content/reference/en/p5.Camera/pan.mdx    |  71 ++
 .../reference/en/p5.Camera/perspective.mdx    |  58 ++
 src/content/reference/en/p5.Camera/set.mdx    |  67 ++
 .../reference/en/p5.Camera/setPosition.mdx    |  68 ++
 src/content/reference/en/p5.Camera/slerp.mdx  | 158 ++++
 src/content/reference/en/p5.Camera/tilt.mdx   |  71 ++
 src/content/reference/en/p5.Camera/upX.mdx    |  33 +
 src/content/reference/en/p5.Camera/upY.mdx    |  33 +
 src/content/reference/en/p5.Camera/upZ.mdx    |  33 +
 .../reference/en/p5.Color/setAlpha.mdx        |  41 +
 src/content/reference/en/p5.Color/setBlue.mdx |  41 +
 .../reference/en/p5.Color/setGreen.mdx        |  41 +
 src/content/reference/en/p5.Color/setRed.mdx  |  41 +
 .../reference/en/p5.Color/toString.mdx        |  63 ++
 .../reference/en/p5.Compressor/attack.mdx     |  28 +
 .../reference/en/p5.Compressor/compressor.mdx |  19 +
 .../reference/en/p5.Compressor/knee.mdx       |  29 +
 .../reference/en/p5.Compressor/process.mdx    |  53 ++
 .../reference/en/p5.Compressor/ratio.mdx      |  28 +
 .../reference/en/p5.Compressor/reduction.mdx  |  19 +
 .../reference/en/p5.Compressor/release.mdx    |  27 +
 .../reference/en/p5.Compressor/set.mdx        |  43 ++
 .../reference/en/p5.Compressor/threshold.mdx  |  27 +
 .../reference/en/p5.Convolver/addImpulse.mdx  |  32 +
 .../en/p5.Convolver/convolverNode.mdx         |  18 +
 .../reference/en/p5.Convolver/impulses.mdx    |  18 +
 .../reference/en/p5.Convolver/process.mdx     |  59 ++
 .../en/p5.Convolver/resetImpulse.mdx          |  31 +
 .../en/p5.Convolver/toggleImpulse.mdx         |  34 +
 src/content/reference/en/p5.Delay/amp.mdx     |  32 +
 src/content/reference/en/p5.Delay/connect.mdx |  20 +
 .../reference/en/p5.Delay/delayTime.mdx       |  22 +
 .../reference/en/p5.Delay/disconnect.mdx      |  16 +
 .../reference/en/p5.Delay/feedback.mdx        |  30 +
 src/content/reference/en/p5.Delay/filter.mdx  |  31 +
 .../reference/en/p5.Delay/leftDelay.mdx       |  18 +
 src/content/reference/en/p5.Delay/process.mdx |  43 ++
 .../reference/en/p5.Delay/rightDelay.mdx      |  18 +
 src/content/reference/en/p5.Delay/setType.mdx |  23 +
 .../en/p5.Distortion/WaveShaperNode.mdx       |  18 +
 .../reference/en/p5.Distortion/getAmount.mdx  |  21 +
 .../en/p5.Distortion/getOversample.mdx        |  19 +
 .../reference/en/p5.Distortion/process.mdx    |  31 +
 .../reference/en/p5.Distortion/set.mdx        |  30 +
 src/content/reference/en/p5.EQ/bands.mdx      |  20 +
 src/content/reference/en/p5.EQ/process.mdx    |  21 +
 src/content/reference/en/p5.Effect/amp.mdx    |  32 +
 src/content/reference/en/p5.Effect/chain.mdx  |  24 +
 .../reference/en/p5.Effect/connect.mdx        |  21 +
 .../reference/en/p5.Effect/disconnect.mdx     |  16 +
 src/content/reference/en/p5.Effect/drywet.mdx |  22 +
 .../reference/en/p5.Element/addClass.mdx      |  28 +
 .../reference/en/p5.Element/attribute.mdx     |  91 +++
 .../reference/en/p5.Element/center.mdx        |  35 +
 src/content/reference/en/p5.Element/child.mdx |  42 +
 src/content/reference/en/p5.Element/class.mdx |  51 ++
 .../reference/en/p5.Element/doubleClicked.mdx |  73 ++
 .../reference/en/p5.Element/dragLeave.mdx     |  76 ++
 .../reference/en/p5.Element/dragOver.mdx      |  74 ++
 .../reference/en/p5.Element/draggable.mdx     |  64 ++
 src/content/reference/en/p5.Element/drop.mdx  | 140 ++++
 src/content/reference/en/p5.Element/elt.mdx   |  41 +
 .../reference/en/p5.Element/hasClass.mdx      |  41 +
 .../reference/en/p5.Element/height.mdx        |  15 +
 src/content/reference/en/p5.Element/hide.mdx  |  37 +
 src/content/reference/en/p5.Element/html.mdx  |  34 +
 src/content/reference/en/p5.Element/id.mdx    |  43 ++
 .../reference/en/p5.Element/mouseClicked.mdx  |  75 ++
 .../reference/en/p5.Element/mouseMoved.mdx    |  73 ++
 .../reference/en/p5.Element/mouseOut.mdx      |  74 ++
 .../reference/en/p5.Element/mouseOver.mdx     |  74 ++
 .../reference/en/p5.Element/mousePressed.mdx  |  75 ++
 .../reference/en/p5.Element/mouseReleased.mdx |  75 ++
 .../reference/en/p5.Element/mouseWheel.mdx    | 126 +++
 .../reference/en/p5.Element/parent.mdx        | 130 ++++
 .../reference/en/p5.Element/position.mdx      |  49 ++
 .../reference/en/p5.Element/remove.mdx        |  40 +
 .../en/p5.Element/removeAttribute.mdx         |  54 ++
 .../reference/en/p5.Element/removeClass.mdx   |  37 +
 src/content/reference/en/p5.Element/show.mdx  |  40 +
 src/content/reference/en/p5.Element/size.mdx  | 132 ++++
 src/content/reference/en/p5.Element/style.mdx | 127 +++
 .../reference/en/p5.Element/toggleClass.mdx   |  34 +
 .../reference/en/p5.Element/touchEnded.mdx    |  77 ++
 .../reference/en/p5.Element/touchMoved.mdx    |  77 ++
 .../reference/en/p5.Element/touchStarted.mdx  |  75 ++
 src/content/reference/en/p5.Element/value.mdx |  83 ++
 src/content/reference/en/p5.Element/width.mdx |  15 +
 src/content/reference/en/p5.Envelope/add.mdx  |  28 +
 .../reference/en/p5.Envelope/attackLevel.mdx  |  16 +
 .../reference/en/p5.Envelope/attackTime.mdx   |  16 +
 .../reference/en/p5.Envelope/decayLevel.mdx   |  16 +
 .../reference/en/p5.Envelope/decayTime.mdx    |  16 +
 src/content/reference/en/p5.Envelope/mult.mdx |  28 +
 src/content/reference/en/p5.Envelope/play.mdx |  80 ++
 src/content/reference/en/p5.Envelope/ramp.mdx |  84 ++
 .../reference/en/p5.Envelope/releaseLevel.mdx |  16 +
 .../reference/en/p5.Envelope/releaseTime.mdx  |  16 +
 .../reference/en/p5.Envelope/scale.mdx        |  40 +
 src/content/reference/en/p5.Envelope/set.mdx  |  80 ++
 .../reference/en/p5.Envelope/setADSR.mdx      |  89 +++
 .../reference/en/p5.Envelope/setExp.mdx       |  23 +
 .../reference/en/p5.Envelope/setInput.mdx     |  27 +
 .../reference/en/p5.Envelope/setRange.mdx     |  62 ++
 .../en/p5.Envelope/triggerAttack.mdx          |  73 ++
 .../en/p5.Envelope/triggerRelease.mdx         |  70 ++
 src/content/reference/en/p5.FFT/analyze.mdx   |  92 +++
 .../reference/en/p5.FFT/getCentroid.mdx       |  77 ++
 src/content/reference/en/p5.FFT/getEnergy.mdx |  49 ++
 .../reference/en/p5.FFT/getOctaveBands.mdx    |  40 +
 .../reference/en/p5.FFT/linAverages.mdx       |  28 +
 .../reference/en/p5.FFT/logAverages.mdx       |  29 +
 src/content/reference/en/p5.FFT/setInput.mdx  |  23 +
 src/content/reference/en/p5.FFT/smooth.mdx    |  22 +
 src/content/reference/en/p5.FFT/waveform.mdx  |  38 +
 src/content/reference/en/p5.File/data.mdx     |  50 ++
 src/content/reference/en/p5.File/file.mdx     |  55 ++
 src/content/reference/en/p5.File/name.mdx     |  46 ++
 src/content/reference/en/p5.File/size.mdx     |  46 ++
 src/content/reference/en/p5.File/subtype.mdx  |  53 ++
 src/content/reference/en/p5.File/type.mdx     |  53 ++
 .../reference/en/p5.Filter/biquadFilter.mdx   |  18 +
 src/content/reference/en/p5.Filter/freq.mdx   |  32 +
 src/content/reference/en/p5.Filter/gain.mdx   |  26 +
 .../reference/en/p5.Filter/process.mdx        |  33 +
 src/content/reference/en/p5.Filter/res.mdx    |  32 +
 src/content/reference/en/p5.Filter/set.mdx    |  33 +
 .../reference/en/p5.Filter/setType.mdx        |  23 +
 src/content/reference/en/p5.Filter/toggle.mdx |  19 +
 src/content/reference/en/p5.Font/font.mdx     |  18 +
 .../reference/en/p5.Font/textBounds.mdx       | 132 ++++
 .../reference/en/p5.Font/textToPoints.mdx     | 104 +++
 .../reference/en/p5.Framebuffer/autoSized.mdx |  26 +
 .../reference/en/p5.Framebuffer/begin.mdx     |  54 ++
 .../reference/en/p5.Framebuffer/color.mdx     |  49 ++
 .../en/p5.Framebuffer/createCamera.mdx        |  22 +
 .../reference/en/p5.Framebuffer/depth.mdx     |  96 +++
 .../reference/en/p5.Framebuffer/draw.mdx      |  63 ++
 .../reference/en/p5.Framebuffer/end.mdx       |  20 +
 .../reference/en/p5.Framebuffer/get.mdx       |  40 +
 .../en/p5.Framebuffer/pixelDensity.mdx        |  27 +
 .../reference/en/p5.Framebuffer/pixels.mdx    |  35 +
 .../reference/en/p5.Framebuffer/remove.mdx    |  54 ++
 .../reference/en/p5.Framebuffer/resize.mdx    |  60 ++
 src/content/reference/en/p5.Gain/amp.mdx      |  32 +
 src/content/reference/en/p5.Gain/connect.mdx  |  20 +
 .../reference/en/p5.Gain/disconnect.mdx       |  16 +
 src/content/reference/en/p5.Gain/setInput.mdx |  22 +
 .../en/p5.Geometry/averageNormals.mdx         |  17 +
 .../en/p5.Geometry/averagePoleNormals.mdx     |  16 +
 .../reference/en/p5.Geometry/clearColors.mdx  |  66 ++
 .../reference/en/p5.Geometry/computeFaces.mdx |  16 +
 .../en/p5.Geometry/computeNormals.mdx         | 127 +++
 .../reference/en/p5.Geometry/flipU.mdx        |  76 ++
 .../reference/en/p5.Geometry/flipV.mdx        |  76 ++
 .../reference/en/p5.Geometry/normalize.mdx    |  16 +
 .../en/p5.Graphics/createFramebuffer.mdx      |  26 +
 .../reference/en/p5.Graphics/remove.mdx       |  65 ++
 .../reference/en/p5.Graphics/reset.mdx        |  65 ++
 src/content/reference/en/p5.Image/blend.mdx   |  83 ++
 src/content/reference/en/p5.Image/copy.mdx    |  55 ++
 src/content/reference/en/p5.Image/delay.mdx   |  81 ++
 src/content/reference/en/p5.Image/filter.mdx  | 189 +++++
 src/content/reference/en/p5.Image/get.mdx     | 111 +++
 .../reference/en/p5.Image/getCurrentFrame.mdx |  39 +
 src/content/reference/en/p5.Image/height.mdx  |  38 +
 .../reference/en/p5.Image/loadPixels.mdx      |  61 ++
 src/content/reference/en/p5.Image/mask.mdx    |  45 ++
 .../reference/en/p5.Image/numFrames.mdx       |  40 +
 src/content/reference/en/p5.Image/pause.mdx   |  44 ++
 .../reference/en/p5.Image/pixelDensity.mdx    |  32 +
 src/content/reference/en/p5.Image/pixels.mdx  | 101 +++
 src/content/reference/en/p5.Image/play.mdx    |  44 ++
 src/content/reference/en/p5.Image/reset.mdx   |  39 +
 src/content/reference/en/p5.Image/resize.mdx  |  92 +++
 src/content/reference/en/p5.Image/save.mdx    |  80 ++
 src/content/reference/en/p5.Image/set.mdx     | 161 ++++
 .../reference/en/p5.Image/setFrame.mdx        |  49 ++
 .../reference/en/p5.Image/updatePixels.mdx    |  82 ++
 src/content/reference/en/p5.Image/width.mdx   |  38 +
 .../reference/en/p5.MediaElement/addCue.mdx   |  84 ++
 .../reference/en/p5.MediaElement/autoplay.mdx |  72 ++
 .../en/p5.MediaElement/clearCues.mdx          |  63 ++
 .../reference/en/p5.MediaElement/connect.mdx  |  26 +
 .../en/p5.MediaElement/disconnect.mdx         |  18 +
 .../reference/en/p5.MediaElement/duration.mdx |  52 ++
 .../en/p5.MediaElement/hideControls.mdx       |  63 ++
 .../reference/en/p5.MediaElement/loop.mdx     |  63 ++
 .../reference/en/p5.MediaElement/noLoop.mdx   |  64 ++
 .../reference/en/p5.MediaElement/onended.mdx  |  76 ++
 .../reference/en/p5.MediaElement/pause.mdx    |  64 ++
 .../reference/en/p5.MediaElement/play.mdx     |  42 +
 .../en/p5.MediaElement/removeCue.mdx          |  68 ++
 .../en/p5.MediaElement/showControls.mdx       |  23 +
 .../reference/en/p5.MediaElement/speed.mdx    |  70 ++
 .../reference/en/p5.MediaElement/src.mdx      |  41 +
 .../reference/en/p5.MediaElement/stop.mdx     |  62 ++
 .../reference/en/p5.MediaElement/time.mdx     |  89 +++
 .../reference/en/p5.MediaElement/volume.mdx   |  67 ++
 src/content/reference/en/p5.MonoSynth/amp.mdx |  29 +
 .../reference/en/p5.MonoSynth/attack.mdx      |  16 +
 .../reference/en/p5.MonoSynth/connect.mdx     |  21 +
 .../reference/en/p5.MonoSynth/decay.mdx       |  15 +
 .../reference/en/p5.MonoSynth/disconnect.mdx  |  16 +
 .../reference/en/p5.MonoSynth/dispose.mdx     |  16 +
 .../reference/en/p5.MonoSynth/play.mdx        |  72 ++
 .../reference/en/p5.MonoSynth/release.mdx     |  15 +
 .../reference/en/p5.MonoSynth/setADSR.mdx     |  52 ++
 .../reference/en/p5.MonoSynth/sustain.mdx     |  15 +
 .../en/p5.MonoSynth/triggerAttack.mdx         |  61 ++
 .../en/p5.MonoSynth/triggerRelease.mdx        |  47 ++
 src/content/reference/en/p5.Noise/setType.mdx |  23 +
 .../reference/en/p5.NumberDict/add.mdx        |  37 +
 .../reference/en/p5.NumberDict/div.mdx        |  37 +
 .../reference/en/p5.NumberDict/maxKey.mdx     |  30 +
 .../reference/en/p5.NumberDict/maxValue.mdx   |  30 +
 .../reference/en/p5.NumberDict/minKey.mdx     |  30 +
 .../reference/en/p5.NumberDict/minValue.mdx   |  30 +
 .../reference/en/p5.NumberDict/mult.mdx       |  37 +
 .../reference/en/p5.NumberDict/sub.mdx        |  39 +
 .../reference/en/p5.Oscillator/add.mdx        |  28 +
 .../reference/en/p5.Oscillator/amp.mdx        |  42 +
 .../reference/en/p5.Oscillator/connect.mdx    |  21 +
 .../reference/en/p5.Oscillator/disconnect.mdx |  16 +
 .../reference/en/p5.Oscillator/freq.mdx       |  65 ++
 .../reference/en/p5.Oscillator/getAmp.mdx     |  19 +
 .../reference/en/p5.Oscillator/getFreq.mdx    |  19 +
 .../reference/en/p5.Oscillator/getPan.mdx     |  20 +
 .../reference/en/p5.Oscillator/getType.mdx    |  20 +
 .../reference/en/p5.Oscillator/mult.mdx       |  28 +
 .../reference/en/p5.Oscillator/pan.mdx        |  26 +
 .../reference/en/p5.Oscillator/phase.mdx      |  23 +
 .../reference/en/p5.Oscillator/scale.mdx      |  40 +
 .../reference/en/p5.Oscillator/setType.mdx    |  21 +
 .../reference/en/p5.Oscillator/start.mdx      |  30 +
 .../reference/en/p5.Oscillator/stop.mdx       |  23 +
 .../reference/en/p5.Panner3D/maxDist.mdx      |  23 +
 .../reference/en/p5.Panner3D/orient.mdx       |  32 +
 .../reference/en/p5.Panner3D/orientX.mdx      |  19 +
 .../reference/en/p5.Panner3D/orientY.mdx      |  19 +
 .../reference/en/p5.Panner3D/orientZ.mdx      |  19 +
 .../reference/en/p5.Panner3D/panner.mdx       |  23 +
 .../reference/en/p5.Panner3D/positionX.mdx    |  19 +
 .../reference/en/p5.Panner3D/positionY.mdx    |  19 +
 .../reference/en/p5.Panner3D/positionZ.mdx    |  19 +
 .../reference/en/p5.Panner3D/process.mdx      |  21 +
 .../reference/en/p5.Panner3D/rollof.mdx       |  24 +
 src/content/reference/en/p5.Panner3D/set.mdx  |  32 +
 .../reference/en/p5.Panner3D/setFalloff.mdx   |  25 +
 .../reference/en/p5.Part/addPhrase.mdx        |  21 +
 src/content/reference/en/p5.Part/getBPM.mdx   |  19 +
 .../reference/en/p5.Part/getPhrase.mdx        |  21 +
 src/content/reference/en/p5.Part/loop.mdx     |  24 +
 src/content/reference/en/p5.Part/noLoop.mdx   |  16 +
 src/content/reference/en/p5.Part/onStep.mdx   |  24 +
 src/content/reference/en/p5.Part/pause.mdx    |  22 +
 .../reference/en/p5.Part/removePhrase.mdx     |  21 +
 .../reference/en/p5.Part/replaceSequence.mdx  |  26 +
 src/content/reference/en/p5.Part/setBPM.mdx   |  26 +
 src/content/reference/en/p5.Part/start.mdx    |  24 +
 src/content/reference/en/p5.Part/stop.mdx     |  23 +
 .../reference/en/p5.PeakDetect/isDetected.mdx |  16 +
 .../reference/en/p5.PeakDetect/onPeak.mdx     |  84 ++
 .../reference/en/p5.PeakDetect/update.mdx     |  24 +
 .../reference/en/p5.Phrase/sequence.mdx       |  20 +
 .../reference/en/p5.PolySynth/AudioVoice.mdx  |  17 +
 .../reference/en/p5.PolySynth/connect.mdx     |  21 +
 .../reference/en/p5.PolySynth/disconnect.mdx  |  16 +
 .../reference/en/p5.PolySynth/dispose.mdx     |  16 +
 .../reference/en/p5.PolySynth/noteADSR.mdx    |  59 ++
 .../reference/en/p5.PolySynth/noteAttack.mdx  |  64 ++
 .../reference/en/p5.PolySynth/noteRelease.mdx |  60 ++
 .../reference/en/p5.PolySynth/notes.mdx       |  20 +
 .../reference/en/p5.PolySynth/play.mdx        |  70 ++
 .../reference/en/p5.PolySynth/polyvalue.mdx   |  16 +
 .../reference/en/p5.PolySynth/setADSR.mdx     |  49 ++
 .../reference/en/p5.PrintWriter/clear.mdx     |  44 ++
 .../reference/en/p5.PrintWriter/close.mdx     |  37 +
 .../reference/en/p5.PrintWriter/print.mdx     |  56 ++
 .../reference/en/p5.PrintWriter/write.mdx     |  74 ++
 src/content/reference/en/p5.Pulse/width.mdx   |  24 +
 src/content/reference/en/p5.Reverb/amp.mdx    |  32 +
 .../reference/en/p5.Reverb/connect.mdx        |  20 +
 .../reference/en/p5.Reverb/disconnect.mdx     |  16 +
 .../reference/en/p5.Reverb/process.mdx        |  39 +
 src/content/reference/en/p5.Reverb/set.mdx    |  35 +
 src/content/reference/en/p5.Score/loop.mdx    |  16 +
 src/content/reference/en/p5.Score/noLoop.mdx  |  18 +
 src/content/reference/en/p5.Score/pause.mdx   |  16 +
 src/content/reference/en/p5.Score/setBPM.mdx  |  25 +
 src/content/reference/en/p5.Score/start.mdx   |  16 +
 src/content/reference/en/p5.Score/stop.mdx    |  16 +
 .../reference/en/p5.Shader/copyToContext.mdx  |  41 +
 .../reference/en/p5.Shader/setUniform.mdx     | 133 ++++
 .../reference/en/p5.SoundFile/addCue.mdx      |  82 ++
 .../reference/en/p5.SoundFile/channels.mdx    |  20 +
 .../reference/en/p5.SoundFile/clearCues.mdx   |  17 +
 .../reference/en/p5.SoundFile/connect.mdx     |  26 +
 .../reference/en/p5.SoundFile/currentTime.mdx |  24 +
 .../reference/en/p5.SoundFile/disconnect.mdx  |  16 +
 .../reference/en/p5.SoundFile/duration.mdx    |  19 +
 .../reference/en/p5.SoundFile/frames.mdx      |  20 +
 .../reference/en/p5.SoundFile/getBlob.mdx     |  64 ++
 .../reference/en/p5.SoundFile/getPan.mdx      |  22 +
 .../reference/en/p5.SoundFile/getPeaks.mdx    |  32 +
 .../reference/en/p5.SoundFile/isLoaded.mdx    |  19 +
 .../reference/en/p5.SoundFile/isLooping.mdx   |  20 +
 .../reference/en/p5.SoundFile/isPaused.mdx    |  20 +
 .../reference/en/p5.SoundFile/isPlaying.mdx   |  20 +
 .../reference/en/p5.SoundFile/jump.mdx        |  34 +
 .../reference/en/p5.SoundFile/loop.mdx        |  71 ++
 .../reference/en/p5.SoundFile/onended.mdx     |  26 +
 src/content/reference/en/p5.SoundFile/pan.mdx |  58 ++
 .../reference/en/p5.SoundFile/pause.mdx       |  53 ++
 .../reference/en/p5.SoundFile/play.mdx        |  43 ++
 .../reference/en/p5.SoundFile/playMode.mdx    |  56 ++
 .../reference/en/p5.SoundFile/rate.mdx        |  60 ++
 .../reference/en/p5.SoundFile/removeCue.mdx   |  22 +
 .../en/p5.SoundFile/reverseBuffer.mdx         |  40 +
 .../reference/en/p5.SoundFile/sampleRate.mdx  |  19 +
 .../reference/en/p5.SoundFile/save.mdx        |  43 ++
 .../reference/en/p5.SoundFile/setBuffer.mdx   |  23 +
 .../reference/en/p5.SoundFile/setLoop.mdx     |  23 +
 .../reference/en/p5.SoundFile/setPath.mdx     |  26 +
 .../reference/en/p5.SoundFile/setVolume.mdx   |  40 +
 .../reference/en/p5.SoundFile/stop.mdx        |  23 +
 src/content/reference/en/p5.SoundLoop/bpm.mdx |  21 +
 .../reference/en/p5.SoundLoop/interval.mdx    |  16 +
 .../reference/en/p5.SoundLoop/iterations.mdx  |  16 +
 .../en/p5.SoundLoop/maxIterations.mdx         |  16 +
 .../en/p5.SoundLoop/musicalTimeMode.mdx       |  19 +
 .../reference/en/p5.SoundLoop/pause.mdx       |  22 +
 .../reference/en/p5.SoundLoop/start.mdx       |  22 +
 .../reference/en/p5.SoundLoop/stop.mdx        |  22 +
 .../reference/en/p5.SoundLoop/syncedStart.mdx |  34 +
 .../en/p5.SoundLoop/timeSignature.mdx         |  16 +
 .../reference/en/p5.SoundRecorder/record.mdx  |  38 +
 .../en/p5.SoundRecorder/setInput.mdx          |  25 +
 .../reference/en/p5.SoundRecorder/stop.mdx    |  19 +
 .../reference/en/p5.Table/addColumn.mdx       |  65 ++
 src/content/reference/en/p5.Table/addRow.mdx  |  74 ++
 .../reference/en/p5.Table/clearRows.mdx       |  46 ++
 src/content/reference/en/p5.Table/columns.mdx |  48 ++
 src/content/reference/en/p5.Table/findRow.mdx |  63 ++
 .../reference/en/p5.Table/findRows.mdx        |  68 ++
 src/content/reference/en/p5.Table/get.mdx     |  61 ++
 .../reference/en/p5.Table/getArray.mdx        |  49 ++
 .../reference/en/p5.Table/getColumn.mdx       |  54 ++
 .../reference/en/p5.Table/getColumnCount.mdx  |  47 ++
 src/content/reference/en/p5.Table/getNum.mdx  |  59 ++
 .../reference/en/p5.Table/getObject.mdx       |  59 ++
 src/content/reference/en/p5.Table/getRow.mdx  |  60 ++
 .../reference/en/p5.Table/getRowCount.mdx     |  47 ++
 src/content/reference/en/p5.Table/getRows.mdx |  58 ++
 .../reference/en/p5.Table/getString.mdx       |  66 ++
 .../reference/en/p5.Table/matchRow.mdx        |  62 ++
 .../reference/en/p5.Table/matchRows.mdx       |  72 ++
 .../reference/en/p5.Table/removeColumn.mdx    |  58 ++
 .../reference/en/p5.Table/removeRow.mdx       |  55 ++
 .../reference/en/p5.Table/removeTokens.mdx    |  56 ++
 src/content/reference/en/p5.Table/rows.mdx    |  20 +
 src/content/reference/en/p5.Table/set.mdx     |  66 ++
 src/content/reference/en/p5.Table/setNum.mdx  |  63 ++
 .../reference/en/p5.Table/setString.mdx       |  63 ++
 src/content/reference/en/p5.Table/trim.mdx    |  52 ++
 src/content/reference/en/p5.TableRow/get.mdx  |  57 ++
 .../reference/en/p5.TableRow/getNum.mdx       |  59 ++
 .../reference/en/p5.TableRow/getString.mdx    |  61 ++
 src/content/reference/en/p5.TableRow/set.mdx  |  58 ++
 .../reference/en/p5.TableRow/setNum.mdx       |  58 ++
 .../reference/en/p5.TableRow/setString.mdx    |  59 ++
 .../reference/en/p5.TypedDict/clear.mdx       |  29 +
 .../reference/en/p5.TypedDict/create.mdx      |  28 +
 src/content/reference/en/p5.TypedDict/get.mdx |  35 +
 .../reference/en/p5.TypedDict/hasKey.mdx      |  35 +
 .../reference/en/p5.TypedDict/print.mdx       |  30 +
 .../reference/en/p5.TypedDict/remove.mdx      |  36 +
 .../reference/en/p5.TypedDict/saveJSON.mdx    |  39 +
 .../reference/en/p5.TypedDict/saveTable.mdx   |  39 +
 src/content/reference/en/p5.TypedDict/set.mdx |  35 +
 .../reference/en/p5.TypedDict/size.mdx        |  32 +
 src/content/reference/en/p5.Vector/add.mdx    | 151 ++++
 .../reference/en/p5.Vector/angleBetween.mdx   | 117 +++
 src/content/reference/en/p5.Vector/array.mdx  |  29 +
 src/content/reference/en/p5.Vector/copy.mdx   |  33 +
 src/content/reference/en/p5.Vector/cross.mdx  |  52 ++
 src/content/reference/en/p5.Vector/dist.mdx   |  89 +++
 src/content/reference/en/p5.Vector/div.mdx    | 199 +++++
 src/content/reference/en/p5.Vector/dot.mdx    |  99 +++
 src/content/reference/en/p5.Vector/equals.mdx |  80 ++
 .../reference/en/p5.Vector/fromAngle.mdx      |  69 ++
 .../reference/en/p5.Vector/fromAngles.mdx     |  69 ++
 .../reference/en/p5.Vector/heading.mdx        |  95 +++
 src/content/reference/en/p5.Vector/lerp.mdx   |  97 +++
 src/content/reference/en/p5.Vector/limit.mdx  | 100 +++
 src/content/reference/en/p5.Vector/mag.mdx    |  42 +
 src/content/reference/en/p5.Vector/magSq.mdx  |  42 +
 src/content/reference/en/p5.Vector/mult.mdx   | 199 +++++
 .../reference/en/p5.Vector/normalize.mdx      | 110 +++
 .../reference/en/p5.Vector/random2D.mdx       |  61 ++
 .../reference/en/p5.Vector/random3D.mdx       |  30 +
 .../reference/en/p5.Vector/reflect.mdx        |  85 ++
 src/content/reference/en/p5.Vector/rem.mdx    |  72 ++
 src/content/reference/en/p5.Vector/rotate.mdx | 117 +++
 src/content/reference/en/p5.Vector/set.mdx    |  50 ++
 .../reference/en/p5.Vector/setHeading.mdx     |  85 ++
 src/content/reference/en/p5.Vector/setMag.mdx |  80 ++
 src/content/reference/en/p5.Vector/slerp.mdx  | 125 +++
 src/content/reference/en/p5.Vector/sub.mdx    | 151 ++++
 .../reference/en/p5.Vector/toString.mdx       |  32 +
 src/content/reference/en/p5.Vector/x.mdx      |  16 +
 src/content/reference/en/p5.Vector/y.mdx      |  16 +
 src/content/reference/en/p5.Vector/z.mdx      |  16 +
 src/content/reference/en/p5.XML/addChild.mdx  |  66 ++
 .../reference/en/p5.XML/getAttributeCount.mdx |  48 ++
 src/content/reference/en/p5.XML/getChild.mdx  |  69 ++
 .../reference/en/p5.XML/getChildren.mdx       |  63 ++
 .../reference/en/p5.XML/getContent.mdx        |  54 ++
 src/content/reference/en/p5.XML/getName.mdx   |  46 ++
 src/content/reference/en/p5.XML/getNum.mdx    |  60 ++
 src/content/reference/en/p5.XML/getParent.mdx |  49 ++
 src/content/reference/en/p5.XML/getString.mdx |  60 ++
 .../reference/en/p5.XML/hasAttribute.mdx      |  54 ++
 .../reference/en/p5.XML/hasChildren.mdx       |  47 ++
 .../reference/en/p5.XML/listAttributes.mdx    |  48 ++
 .../reference/en/p5.XML/listChildren.mdx      |  51 ++
 .../reference/en/p5.XML/removeChild.mdx       |  72 ++
 src/content/reference/en/p5.XML/serialize.mdx |  41 +
 .../reference/en/p5.XML/setAttribute.mdx      |  57 ++
 .../reference/en/p5.XML/setContent.mdx        |  52 ++
 src/content/reference/en/p5.XML/setName.mdx   |  51 ++
 .../reference/en/p5.sound/p5.Amplitude.mdx    |  51 ++
 .../reference/en/p5.sound/p5.AudioIn.mdx      | 112 +++
 .../reference/en/p5.sound/p5.AudioVoice.mdx   |  25 +
 .../reference/en/p5.sound/p5.BandPass.mdx     |  17 +
 .../reference/en/p5.sound/p5.Compressor.mdx   |  80 ++
 .../reference/en/p5.sound/p5.Convolver.mdx    |  90 +++
 .../reference/en/p5.sound/p5.Delay.mdx        |  98 +++
 .../reference/en/p5.sound/p5.Distortion.mdx   |  69 ++
 src/content/reference/en/p5.sound/p5.EQ.mdx   |  63 ++
 .../reference/en/p5.sound/p5.Effect.mdx       |  81 ++
 .../reference/en/p5.sound/p5.Envelope.mdx     | 160 ++++
 src/content/reference/en/p5.sound/p5.FFT.mdx  | 148 ++++
 .../reference/en/p5.sound/p5.Filter.mdx       | 101 +++
 src/content/reference/en/p5.sound/p5.Gain.mdx |  32 +
 .../reference/en/p5.sound/p5.HighPass.mdx     |  17 +
 .../reference/en/p5.sound/p5.LowPass.mdx      |  17 +
 .../reference/en/p5.sound/p5.MonoSynth.mdx    |  66 ++
 .../reference/en/p5.sound/p5.Noise.mdx        |  27 +
 .../reference/en/p5.sound/p5.OnsetDetect.mdx  |  32 +
 .../reference/en/p5.sound/p5.Oscillator.mdx   | 121 +++
 .../reference/en/p5.sound/p5.Panner3D.mdx     |  83 ++
 src/content/reference/en/p5.sound/p5.Part.mdx |  88 +++
 .../reference/en/p5.sound/p5.PeakDetect.mdx   | 112 +++
 .../reference/en/p5.sound/p5.Phrase.mdx       |  57 ++
 .../reference/en/p5.sound/p5.PolySynth.mdx    | 103 +++
 .../reference/en/p5.sound/p5.Pulse.mdx        |  38 +
 .../reference/en/p5.sound/p5.Reverb.mdx       |  59 ++
 .../reference/en/p5.sound/p5.SawOsc.mdx       |  25 +
 .../reference/en/p5.sound/p5.Score.mdx        |  51 ++
 .../reference/en/p5.sound/p5.SinOsc.mdx       |  25 +
 .../reference/en/p5.sound/p5.SoundFile.mdx    | 276 +++++++
 .../reference/en/p5.sound/p5.SoundLoop.mdx    |  83 ++
 .../en/p5.sound/p5.SoundRecorder.mdx          |  44 ++
 .../reference/en/p5.sound/p5.SqrOsc.mdx       |  25 +
 .../reference/en/p5.sound/p5.TriOsc.mdx       |  25 +
 src/content/reference/en/p5/&gt;.mdx          |  35 +
 src/content/reference/en/p5/&gt;=.mdx         |  34 +
 src/content/reference/en/p5/&lt;.mdx          |  34 +
 src/content/reference/en/p5/&lt;=.mdx         |  34 +
 src/content/reference/en/p5/===.mdx           |  49 ++
 src/content/reference/en/p5/ADD.mdx           |  15 +
 src/content/reference/en/p5/ALT.mdx           |  15 +
 src/content/reference/en/p5/ARROW.mdx         |  15 +
 src/content/reference/en/p5/AUTO.mdx          |  22 +
 src/content/reference/en/p5/AXES.mdx          |  15 +
 src/content/reference/en/p5/BACKSPACE.mdx     |  15 +
 src/content/reference/en/p5/BASELINE.mdx      |  15 +
 src/content/reference/en/p5/BEVEL.mdx         |  15 +
 src/content/reference/en/p5/BLEND.mdx         |  81 ++
 src/content/reference/en/p5/BLUR.mdx          |  15 +
 src/content/reference/en/p5/BOLD.mdx          |  15 +
 src/content/reference/en/p5/BOLDITALIC.mdx    |  15 +
 src/content/reference/en/p5/BOTTOM.mdx        |  15 +
 src/content/reference/en/p5/BURN.mdx          |  15 +
 src/content/reference/en/p5/CENTER.mdx        |  15 +
 src/content/reference/en/p5/CHAR.mdx          |  32 +
 src/content/reference/en/p5/CHORD.mdx         |  15 +
 src/content/reference/en/p5/CLAMP.mdx         |  15 +
 src/content/reference/en/p5/CLOSE.mdx         |  15 +
 src/content/reference/en/p5/CONTAIN.mdx       |  15 +
 src/content/reference/en/p5/CONTROL.mdx       |  15 +
 src/content/reference/en/p5/CORNER.mdx        |  15 +
 src/content/reference/en/p5/CORNERS.mdx       |  15 +
 src/content/reference/en/p5/COVER.mdx         |  15 +
 src/content/reference/en/p5/CROSS.mdx         |  15 +
 src/content/reference/en/p5/DARKEST.mdx       |  15 +
 src/content/reference/en/p5/DEGREES.mdx       |  41 +
 src/content/reference/en/p5/DELETE.mdx        |  15 +
 src/content/reference/en/p5/DIFFERENCE.mdx    |  15 +
 src/content/reference/en/p5/DILATE.mdx        |  15 +
 src/content/reference/en/p5/DODGE.mdx         |  15 +
 src/content/reference/en/p5/DOWN_ARROW.mdx    |  15 +
 src/content/reference/en/p5/ENTER.mdx         |  15 +
 src/content/reference/en/p5/ERODE.mdx         |  15 +
 src/content/reference/en/p5/ESCAPE.mdx        |  15 +
 src/content/reference/en/p5/EXCLUSION.mdx     |  15 +
 src/content/reference/en/p5/FALLBACK.mdx      |  15 +
 src/content/reference/en/p5/FLAT.mdx          |  15 +
 src/content/reference/en/p5/FLOAT.mdx         |  43 ++
 src/content/reference/en/p5/GRAY.mdx          |  15 +
 src/content/reference/en/p5/GRID.mdx          |  15 +
 src/content/reference/en/p5/HALF_FLOAT.mdx    |  15 +
 src/content/reference/en/p5/HALF_PI.mdx       |  30 +
 src/content/reference/en/p5/HAND.mdx          |  15 +
 src/content/reference/en/p5/HARD_LIGHT.mdx    |  15 +
 src/content/reference/en/p5/HSB.mdx           |  21 +
 src/content/reference/en/p5/HSL.mdx           |  15 +
 src/content/reference/en/p5/IMAGE.mdx         | 191 +++++
 src/content/reference/en/p5/IMMEDIATE.mdx     |  15 +
 src/content/reference/en/p5/INVERT.mdx        |  15 +
 src/content/reference/en/p5/ITALIC.mdx        |  15 +
 src/content/reference/en/p5/LABEL.mdx         |  15 +
 src/content/reference/en/p5/LANDSCAPE.mdx     |  15 +
 src/content/reference/en/p5/LEFT.mdx          |  15 +
 src/content/reference/en/p5/LEFT_ARROW.mdx    |  15 +
 src/content/reference/en/p5/LIGHTEST.mdx      |  15 +
 src/content/reference/en/p5/LINEAR.mdx        |  15 +
 src/content/reference/en/p5/LINES.mdx         |  15 +
 src/content/reference/en/p5/LINE_LOOP.mdx     |  15 +
 src/content/reference/en/p5/LINE_STRIP.mdx    |  15 +
 src/content/reference/en/p5/MIRROR.mdx        |  15 +
 src/content/reference/en/p5/MITER.mdx         |  15 +
 src/content/reference/en/p5/MOVE.mdx          |  15 +
 src/content/reference/en/p5/MULTIPLY.mdx      |  15 +
 src/content/reference/en/p5/NEAREST.mdx       |  15 +
 src/content/reference/en/p5/OPAQUE.mdx        |  15 +
 src/content/reference/en/p5/OPEN.mdx          |  15 +
 src/content/reference/en/p5/OPTION.mdx        |  15 +
 src/content/reference/en/p5/OVERLAY.mdx       |  15 +
 src/content/reference/en/p5/P2D.mdx           |  16 +
 src/content/reference/en/p5/PI.mdx            |  30 +
 src/content/reference/en/p5/PIE.mdx           |  15 +
 src/content/reference/en/p5/POINTS.mdx        |  15 +
 src/content/reference/en/p5/PORTRAIT.mdx      |  15 +
 src/content/reference/en/p5/POSTERIZE.mdx     |  15 +
 src/content/reference/en/p5/PROJECT.mdx       |  15 +
 src/content/reference/en/p5/QUADRATIC.mdx     |  15 +
 src/content/reference/en/p5/QUADS.mdx         |  15 +
 src/content/reference/en/p5/QUAD_STRIP.mdx    |  15 +
 src/content/reference/en/p5/QUARTER_PI.mdx    |  26 +
 src/content/reference/en/p5/RADIANS.mdx       |  41 +
 src/content/reference/en/p5/RADIUS.mdx        |  15 +
 src/content/reference/en/p5/REMOVE.mdx        |  35 +
 src/content/reference/en/p5/REPEAT.mdx        |  15 +
 src/content/reference/en/p5/REPLACE.mdx       |  15 +
 src/content/reference/en/p5/RETURN.mdx        |  34 +
 src/content/reference/en/p5/RGB.mdx           |  15 +
 src/content/reference/en/p5/RGBA.mdx          |  15 +
 src/content/reference/en/p5/RIGHT.mdx         |  15 +
 src/content/reference/en/p5/RIGHT_ARROW.mdx   |  15 +
 src/content/reference/en/p5/ROUND.mdx         |  52 ++
 src/content/reference/en/p5/SCREEN.mdx        |  15 +
 src/content/reference/en/p5/SHIFT.mdx         |  15 +
 src/content/reference/en/p5/SOFT_LIGHT.mdx    |  15 +
 src/content/reference/en/p5/SUBTRACT.mdx      |  15 +
 src/content/reference/en/p5/TAB.mdx           |  15 +
 src/content/reference/en/p5/TAU.mdx           |  30 +
 src/content/reference/en/p5/TESS.mdx          |  15 +
 src/content/reference/en/p5/TEXT.mdx          |  89 +++
 src/content/reference/en/p5/TEXTURE.mdx       | 144 ++++
 src/content/reference/en/p5/THRESHOLD.mdx     |  15 +
 src/content/reference/en/p5/TOP.mdx           |  15 +
 src/content/reference/en/p5/TRIANGLES.mdx     |  15 +
 src/content/reference/en/p5/TRIANGLE_FAN.mdx  |  15 +
 .../reference/en/p5/TRIANGLE_STRIP.mdx        |  15 +
 src/content/reference/en/p5/TWO_PI.mdx        |  30 +
 src/content/reference/en/p5/UNSIGNED_BYTE.mdx |  15 +
 src/content/reference/en/p5/UNSIGNED_INT.mdx  |  15 +
 src/content/reference/en/p5/UP_ARROW.mdx      |  15 +
 src/content/reference/en/p5/VERSION.mdx       |  16 +
 src/content/reference/en/p5/WAIT.mdx          |  15 +
 src/content/reference/en/p5/WEBGL.mdx         |  89 +++
 src/content/reference/en/p5/WEBGL2.mdx        |  18 +
 src/content/reference/en/p5/WORD.mdx          |  15 +
 src/content/reference/en/p5/abs.mdx           |  50 ++
 src/content/reference/en/p5/accelerationX.mdx |  34 +
 src/content/reference/en/p5/accelerationY.mdx |  34 +
 src/content/reference/en/p5/accelerationZ.mdx |  34 +
 src/content/reference/en/p5/acos.mdx          |  61 ++
 src/content/reference/en/p5/alpha.mdx         |  56 ++
 src/content/reference/en/p5/ambientLight.mdx  |  77 ++
 .../reference/en/p5/ambientMaterial.mdx       |  83 ++
 src/content/reference/en/p5/angleMode.mdx     |  61 ++
 src/content/reference/en/p5/append.mdx        |  41 +
 src/content/reference/en/p5/applyMatrix.mdx   | 171 ++++
 src/content/reference/en/p5/arc.mdx           | 154 ++++
 src/content/reference/en/p5/arrayCopy.mdx     |  42 +
 src/content/reference/en/p5/asin.mdx          |  63 ++
 src/content/reference/en/p5/atan.mdx          |  63 ++
 src/content/reference/en/p5/atan2.mdx         |  62 ++
 src/content/reference/en/p5/background.mdx    | 158 ++++
 src/content/reference/en/p5/beginClip.mdx     | 118 +++
 src/content/reference/en/p5/beginContour.mdx  |  70 ++
 src/content/reference/en/p5/beginGeometry.mdx |  91 +++
 src/content/reference/en/p5/beginShape.mdx    | 244 ++++++
 src/content/reference/en/p5/bezier.mdx        |  15 +
 src/content/reference/en/p5/bezierDetail.mdx  |  49 ++
 src/content/reference/en/p5/bezierPoint.mdx   |  79 ++
 src/content/reference/en/p5/bezierTangent.mdx |  97 +++
 src/content/reference/en/p5/bezierVertex.mdx  | 101 +++
 src/content/reference/en/p5/blendMode.mdx     | 128 +++
 src/content/reference/en/p5/blue.mdx          |  53 ++
 src/content/reference/en/p5/boolean.mdx       |  39 +
 src/content/reference/en/p5/box.mdx           |  66 ++
 src/content/reference/en/p5/brightness.mdx    |  88 +++
 src/content/reference/en/p5/buildGeometry.mdx |  86 +++
 src/content/reference/en/p5/byte.mdx          |  40 +
 src/content/reference/en/p5/camera.mdx        |  90 +++
 src/content/reference/en/p5/ceil.mdx          |  65 ++
 src/content/reference/en/p5/changed.mdx       |  76 ++
 src/content/reference/en/p5/circle.mdx        |  48 ++
 src/content/reference/en/p5/class.mdx         |  50 ++
 src/content/reference/en/p5/clear.mdx         |  96 +++
 src/content/reference/en/p5/clearDepth.mdx    |  92 +++
 src/content/reference/en/p5/clearStorage.mdx  |  34 +
 src/content/reference/en/p5/clip.mdx          | 117 +++
 src/content/reference/en/p5/color.mdx         | 275 +++++++
 src/content/reference/en/p5/colorMode.mdx     | 149 ++++
 src/content/reference/en/p5/concat.mdx        |  47 ++
 src/content/reference/en/p5/cone.mdx          | 121 +++
 src/content/reference/en/p5/const.mdx         |  85 ++
 src/content/reference/en/p5/constrain.mdx     |  75 ++
 src/content/reference/en/p5/copy.mdx          |  46 ++
 src/content/reference/en/p5/cos.mdx           |  75 ++
 src/content/reference/en/p5/createA.mdx       |  89 +++
 src/content/reference/en/p5/createAudio.mdx   |  77 ++
 src/content/reference/en/p5/createButton.mdx  |  95 +++
 src/content/reference/en/p5/createCamera.mdx  |  81 ++
 src/content/reference/en/p5/createCanvas.mdx  |  84 ++
 src/content/reference/en/p5/createCapture.mdx | 146 ++++
 .../reference/en/p5/createCheckbox.mdx        | 123 +++
 .../reference/en/p5/createColorPicker.mdx     |  90 +++
 .../reference/en/p5/createConvolver.mdx       |  75 ++
 src/content/reference/en/p5/createDiv.mdx     |  63 ++
 src/content/reference/en/p5/createElement.mdx |  71 ++
 .../reference/en/p5/createFileInput.mdx       | 127 +++
 .../reference/en/p5/createFilterShader.mdx    | 119 +++
 .../reference/en/p5/createFramebuffer.mdx     | 131 ++++
 .../reference/en/p5/createGraphics.mdx        |  62 ++
 src/content/reference/en/p5/createImage.mdx   | 142 ++++
 src/content/reference/en/p5/createImg.mdx     |  74 ++
 src/content/reference/en/p5/createInput.mdx   |  86 +++
 .../reference/en/p5/createNumberDict.mdx      |  33 +
 src/content/reference/en/p5/createP.mdx       |  47 ++
 src/content/reference/en/p5/createRadio.mdx   | 168 ++++
 src/content/reference/en/p5/createSelect.mdx  | 196 +++++
 src/content/reference/en/p5/createShader.mdx  | 105 +++
 src/content/reference/en/p5/createSlider.mdx  | 151 ++++
 src/content/reference/en/p5/createSpan.mdx    |  87 +++
 .../reference/en/p5/createStringDict.mdx      |  32 +
 src/content/reference/en/p5/createVector.mdx  | 125 +++
 src/content/reference/en/p5/createVideo.mdx   | 127 +++
 src/content/reference/en/p5/createWriter.mdx  |  50 ++
 src/content/reference/en/p5/cursor.mdx        | 124 +++
 src/content/reference/en/p5/curve.mdx         |  15 +
 src/content/reference/en/p5/curveDetail.mdx   |  43 ++
 src/content/reference/en/p5/curvePoint.mdx    |  68 ++
 src/content/reference/en/p5/curveTangent.mdx  |  64 ++
 .../reference/en/p5/curveTightness.mdx        |  61 ++
 src/content/reference/en/p5/curveVertex.mdx   |  64 ++
 src/content/reference/en/p5/cylinder.mdx      | 125 +++
 src/content/reference/en/p5/day.mdx           |  32 +
 src/content/reference/en/p5/debugMode.mdx     | 162 ++++
 src/content/reference/en/p5/deltaTime.mdx     |  58 ++
 src/content/reference/en/p5/describe.mdx      | 132 ++++
 .../reference/en/p5/describeElement.mdx       | 119 +++
 src/content/reference/en/p5/deviceMoved.mdx   |  46 ++
 .../reference/en/p5/deviceOrientation.mdx     |  19 +
 src/content/reference/en/p5/deviceShaken.mdx  |  47 ++
 src/content/reference/en/p5/deviceTurned.mdx  |  76 ++
 .../reference/en/p5/directionalLight.mdx      |  70 ++
 .../reference/en/p5/disableFriendlyErrors.mdx |  43 ++
 .../reference/en/p5/displayDensity.mdx        |  52 ++
 src/content/reference/en/p5/displayHeight.mdx |  37 +
 src/content/reference/en/p5/displayWidth.mdx  |  37 +
 src/content/reference/en/p5/dist.mdx          |  69 ++
 src/content/reference/en/p5/doubleClicked.mdx |  81 ++
 src/content/reference/en/p5/draw.mdx          |  90 +++
 .../reference/en/p5/drawingContext.mdx        |  50 ++
 src/content/reference/en/p5/ellipse.mdx       |  41 +
 src/content/reference/en/p5/ellipseMode.mdx   | 107 +++
 src/content/reference/en/p5/ellipsoid.mdx     | 120 +++
 .../reference/en/p5/emissiveMaterial.mdx      |  42 +
 src/content/reference/en/p5/endClip.mdx       |  23 +
 src/content/reference/en/p5/endContour.mdx    |  69 ++
 src/content/reference/en/p5/endGeometry.mdx   |  22 +
 src/content/reference/en/p5/endShape.mdx      | 160 ++++
 src/content/reference/en/p5/erase.mdx         | 152 ++++
 .../reference/en/p5/exitPointerLock.mdx       |  44 ++
 src/content/reference/en/p5/exp.mdx           |  45 ++
 src/content/reference/en/p5/fill.mdx          |  15 +
 src/content/reference/en/p5/filter.mdx        | 236 ++++++
 src/content/reference/en/p5/floor.mdx         |  61 ++
 src/content/reference/en/p5/focused.mdx       |  41 +
 src/content/reference/en/p5/for.mdx           |  76 ++
 src/content/reference/en/p5/fract.mdx         |  38 +
 src/content/reference/en/p5/frameCount.mdx    |  63 ++
 src/content/reference/en/p5/frameRate.mdx     |  83 ++
 src/content/reference/en/p5/freeGeometry.mdx  |  26 +
 src/content/reference/en/p5/freqToMidi.mdx    |  26 +
 src/content/reference/en/p5/frustum.mdx       |  95 +++
 src/content/reference/en/p5/fullscreen.mdx    |  60 ++
 src/content/reference/en/p5/function.mdx      |  55 ++
 src/content/reference/en/p5/get.mdx           | 108 +++
 .../reference/en/p5/getAudioContext.mdx       |  49 ++
 src/content/reference/en/p5/getItem.mdx       |  52 ++
 .../reference/en/p5/getOutputVolume.mdx       |  22 +
 .../reference/en/p5/getTargetFrameRate.mdx    |  40 +
 src/content/reference/en/p5/getURL.mdx        |  43 ++
 src/content/reference/en/p5/getURLParams.mdx  |  56 ++
 src/content/reference/en/p5/getURLPath.mdx    |  55 ++
 src/content/reference/en/p5/green.mdx         |  53 ++
 src/content/reference/en/p5/gridOutput.mdx    | 162 ++++
 src/content/reference/en/p5/height.mdx        |  83 ++
 src/content/reference/en/p5/hex.mdx           |  32 +
 src/content/reference/en/p5/hour.mdx          |  32 +
 src/content/reference/en/p5/httpDo.mdx        |  81 ++
 src/content/reference/en/p5/httpGet.mdx       |  65 ++
 src/content/reference/en/p5/httpPost.mdx      |  90 +++
 src/content/reference/en/p5/hue.mdx           |  50 ++
 src/content/reference/en/p5/if-else.mdx       |  53 ++
 src/content/reference/en/p5/imageLight.mdx    | 111 +++
 src/content/reference/en/p5/imageMode.mdx     | 103 +++
 src/content/reference/en/p5/input.mdx         |  76 ++
 src/content/reference/en/p5/int.mdx           |  34 +
 src/content/reference/en/p5/isLooping.mdx     |  74 ++
 src/content/reference/en/p5/join.mdx          |  47 ++
 src/content/reference/en/p5/key.mdx           |  40 +
 src/content/reference/en/p5/keyCode.mdx       |  48 ++
 src/content/reference/en/p5/keyIsDown.mdx     |  97 +++
 src/content/reference/en/p5/keyIsPressed.mdx  |  35 +
 src/content/reference/en/p5/keyPressed.mdx    | 104 +++
 src/content/reference/en/p5/keyReleased.mdx   |  54 ++
 src/content/reference/en/p5/keyTyped.mdx      |  69 ++
 src/content/reference/en/p5/lerp.mdx          | 101 +++
 src/content/reference/en/p5/lerpColor.mdx     |  75 ++
 src/content/reference/en/p5/let.mdx           |  46 ++
 src/content/reference/en/p5/lightFalloff.mdx  |  78 ++
 src/content/reference/en/p5/lightness.mdx     |  58 ++
 src/content/reference/en/p5/lights.mdx        |  44 ++
 src/content/reference/en/p5/line.mdx          |  74 ++
 src/content/reference/en/p5/loadBytes.mdx     |  53 ++
 src/content/reference/en/p5/loadFont.mdx      | 165 ++++
 src/content/reference/en/p5/loadImage.mdx     | 117 +++
 src/content/reference/en/p5/loadJSON.mdx      | 107 +++
 src/content/reference/en/p5/loadModel.mdx     | 121 +++
 src/content/reference/en/p5/loadPixels.mdx    |  44 ++
 src/content/reference/en/p5/loadShader.mdx    |  87 +++
 src/content/reference/en/p5/loadSound.mdx     |  75 ++
 src/content/reference/en/p5/loadStrings.mdx   |  98 +++
 src/content/reference/en/p5/loadTable.mdx     | 120 +++
 src/content/reference/en/p5/loadXML.mdx       | 102 +++
 src/content/reference/en/p5/log.mdx           |  45 ++
 src/content/reference/en/p5/loop.mdx          |  59 ++
 src/content/reference/en/p5/mag.mdx           |  64 ++
 src/content/reference/en/p5/map.mdx           |  90 +++
 src/content/reference/en/p5/match.mdx         |  53 ++
 src/content/reference/en/p5/matchAll.mdx      |  52 ++
 src/content/reference/en/p5/max.mdx           | 105 +++
 src/content/reference/en/p5/metalness.mdx     | 113 +++
 src/content/reference/en/p5/midiToFreq.mdx    |  63 ++
 src/content/reference/en/p5/millis.mdx        |  34 +
 src/content/reference/en/p5/min.mdx           | 105 +++
 src/content/reference/en/p5/minute.mdx        |  32 +
 src/content/reference/en/p5/model.mdx         |  47 ++
 src/content/reference/en/p5/month.mdx         |  32 +
 src/content/reference/en/p5/mouseButton.mdx   |  46 ++
 src/content/reference/en/p5/mouseClicked.mdx  |  83 ++
 src/content/reference/en/p5/mouseDragged.mdx  |  78 ++
 .../reference/en/p5/mouseIsPressed.mdx        |  38 +
 src/content/reference/en/p5/mouseMoved.mdx    |  74 ++
 src/content/reference/en/p5/mousePressed.mdx  |  81 ++
 src/content/reference/en/p5/mouseReleased.mdx |  78 ++
 src/content/reference/en/p5/mouseWheel.mdx    |  70 ++
 src/content/reference/en/p5/mouseX.mdx        |  33 +
 src/content/reference/en/p5/mouseY.mdx        |  33 +
 src/content/reference/en/p5/movedX.mdx        |  41 +
 src/content/reference/en/p5/movedY.mdx        |  42 +
 src/content/reference/en/p5/nf.mdx            |  62 ++
 src/content/reference/en/p5/nfc.mdx           |  48 ++
 src/content/reference/en/p5/nfp.mdx           |  54 ++
 src/content/reference/en/p5/nfs.mdx           |  81 ++
 src/content/reference/en/p5/noCanvas.mdx      |  28 +
 src/content/reference/en/p5/noCursor.mdx      |  35 +
 src/content/reference/en/p5/noDebugMode.mdx   |  48 ++
 src/content/reference/en/p5/noErase.mdx       |  48 ++
 src/content/reference/en/p5/noFill.mdx        |  63 ++
 src/content/reference/en/p5/noLights.mdx      |  58 ++
 src/content/reference/en/p5/noLoop.mdx        | 101 +++
 src/content/reference/en/p5/noSmooth.mdx      |  42 +
 src/content/reference/en/p5/noStroke.mdx      |  47 ++
 src/content/reference/en/p5/noTint.mdx        |  37 +
 src/content/reference/en/p5/noise.mdx         | 222 ++++++
 src/content/reference/en/p5/noiseDetail.mdx   |  92 +++
 src/content/reference/en/p5/noiseSeed.mdx     |  54 ++
 src/content/reference/en/p5/norm.mdx          |  59 ++
 src/content/reference/en/p5/normal.mdx        |  15 +
 .../reference/en/p5/normalMaterial.mdx        |  40 +
 src/content/reference/en/p5/number.mdx        |  33 +
 src/content/reference/en/p5/object.mdx        |  38 +
 src/content/reference/en/p5/orbitControl.mdx  | 100 +++
 src/content/reference/en/p5/ortho.mdx         | 101 +++
 src/content/reference/en/p5/outputVolume.mdx  |  48 ++
 src/content/reference/en/p5/p5.Camera.mdx     | 119 +++
 src/content/reference/en/p5/p5.Color.mdx      |  85 ++
 src/content/reference/en/p5/p5.Element.mdx    | 434 +++++++++++
 src/content/reference/en/p5/p5.File.mdx       |  69 ++
 src/content/reference/en/p5/p5.Font.mdx       |  94 +++
 .../reference/en/p5/p5.Framebuffer.mdx        | 186 +++++
 src/content/reference/en/p5/p5.Geometry.mdx   |  89 +++
 src/content/reference/en/p5/p5.Graphics.mdx   |  70 ++
 src/content/reference/en/p5/p5.Image.mdx      | 363 +++++++++
 .../reference/en/p5/p5.MediaElement.mdx       | 212 +++++
 src/content/reference/en/p5/p5.NumberDict.mdx |  60 ++
 .../reference/en/p5/p5.PrintWriter.mdx        |  21 +
 src/content/reference/en/p5/p5.Renderer.mdx   |  31 +
 src/content/reference/en/p5/p5.Shader.mdx     |  95 +++
 src/content/reference/en/p5/p5.StringDict.mdx |  14 +
 src/content/reference/en/p5/p5.Table.mdx      | 207 +++++
 src/content/reference/en/p5/p5.TableRow.mdx   |  63 ++
 src/content/reference/en/p5/p5.TypedDict.mdx  |  63 ++
 src/content/reference/en/p5/p5.Vector.mdx     | 470 +++++++++++
 src/content/reference/en/p5/p5.XML.mdx        | 141 ++++
 src/content/reference/en/p5/p5.mdx            |  39 +
 .../reference/en/p5/pAccelerationX.mdx        |  18 +
 .../reference/en/p5/pAccelerationY.mdx        |  18 +
 .../reference/en/p5/pAccelerationZ.mdx        |  18 +
 src/content/reference/en/p5/pRotationX.mdx    |  53 ++
 src/content/reference/en/p5/pRotationY.mdx    |  52 ++
 src/content/reference/en/p5/pRotationZ.mdx    |  48 ++
 src/content/reference/en/p5/perspective.mdx   | 125 +++
 src/content/reference/en/p5/pixelDensity.mdx  |  62 ++
 src/content/reference/en/p5/pixels.mdx        | 124 +++
 src/content/reference/en/p5/plane.mdx         |  65 ++
 src/content/reference/en/p5/pmouseX.mdx       |  45 ++
 src/content/reference/en/p5/pmouseY.mdx       |  44 ++
 src/content/reference/en/p5/point.mdx         |  80 ++
 src/content/reference/en/p5/pointLight.mdx    |  57 ++
 src/content/reference/en/p5/pop.mdx           | 148 ++++
 src/content/reference/en/p5/pow.mdx           |  67 ++
 src/content/reference/en/p5/preload.mdx       |  63 ++
 src/content/reference/en/p5/print.mdx         |  52 ++
 src/content/reference/en/p5/push.mdx          | 148 ++++
 src/content/reference/en/p5/pwinMouseX.mdx    |  48 ++
 src/content/reference/en/p5/pwinMouseY.mdx    |  48 ++
 src/content/reference/en/p5/quad.mdx          |  64 ++
 .../reference/en/p5/quadraticVertex.mdx       |  83 ++
 src/content/reference/en/p5/random.mdx        |  20 +
 .../reference/en/p5/randomGaussian.mdx        |  93 +++
 src/content/reference/en/p5/randomSeed.mdx    |  66 ++
 src/content/reference/en/p5/rect.mdx          |  85 ++
 src/content/reference/en/p5/rectMode.mdx      | 108 +++
 src/content/reference/en/p5/red.mdx           |  44 ++
 src/content/reference/en/p5/redraw.mdx        |  96 +++
 .../reference/en/p5/removeElements.mdx        |  74 ++
 src/content/reference/en/p5/removeItem.mdx    |  33 +
 .../reference/en/p5/requestPointerLock.mdx    |  54 ++
 src/content/reference/en/p5/resetMatrix.mdx   |  30 +
 src/content/reference/en/p5/resetShader.mdx   |  98 +++
 src/content/reference/en/p5/resizeCanvas.mdx  |  49 ++
 src/content/reference/en/p5/reverse.mdx       |  36 +
 src/content/reference/en/p5/rotate.mdx        |  62 ++
 src/content/reference/en/p5/rotateX.mdx       |  49 ++
 src/content/reference/en/p5/rotateY.mdx       |  49 ++
 src/content/reference/en/p5/rotateZ.mdx       |  51 ++
 src/content/reference/en/p5/rotationX.mdx     |  42 +
 src/content/reference/en/p5/rotationY.mdx     |  42 +
 src/content/reference/en/p5/rotationZ.mdx     |  44 ++
 src/content/reference/en/p5/sampleRate.mdx    |  23 +
 src/content/reference/en/p5/saturation.mdx    |  49 ++
 src/content/reference/en/p5/save.mdx          | 121 +++
 src/content/reference/en/p5/saveCanvas.mdx    |  79 ++
 src/content/reference/en/p5/saveFrames.mdx    | 127 +++
 src/content/reference/en/p5/saveGif.mdx       |  78 ++
 src/content/reference/en/p5/saveJSON.mdx      |  63 ++
 src/content/reference/en/p5/saveSound.mdx     |  32 +
 src/content/reference/en/p5/saveStrings.mdx   |  66 ++
 src/content/reference/en/p5/saveTable.mdx     |  67 ++
 src/content/reference/en/p5/scale.mdx         |  60 ++
 src/content/reference/en/p5/second.mdx        |  32 +
 src/content/reference/en/p5/select.mdx        | 106 +++
 src/content/reference/en/p5/selectAll.mdx     | 111 +++
 src/content/reference/en/p5/set.mdx           | 148 ++++
 src/content/reference/en/p5/setAttributes.mdx | 143 ++++
 src/content/reference/en/p5/setBPM.mdx        |  26 +
 src/content/reference/en/p5/setCamera.mdx     |  93 +++
 .../reference/en/p5/setMoveThreshold.mdx      |  56 ++
 .../reference/en/p5/setShakeThreshold.mdx     |  56 ++
 src/content/reference/en/p5/setup.mdx         |  48 ++
 src/content/reference/en/p5/shader.mdx        | 134 ++++
 src/content/reference/en/p5/shearX.mdx        |  57 ++
 src/content/reference/en/p5/shearY.mdx        |  57 ++
 src/content/reference/en/p5/shininess.mdx     |  50 ++
 src/content/reference/en/p5/shorten.mdx       |  37 +
 src/content/reference/en/p5/shuffle.mdx       |  47 ++
 src/content/reference/en/p5/sin.mdx           |  74 ++
 src/content/reference/en/p5/smooth.mdx        |  15 +
 src/content/reference/en/p5/sort.mdx          |  56 ++
 src/content/reference/en/p5/soundFormats.mdx  |  48 ++
 src/content/reference/en/p5/soundOut.mdx      |  23 +
 src/content/reference/en/p5/specularColor.mdx |  85 ++
 .../reference/en/p5/specularMaterial.mdx      |  71 ++
 src/content/reference/en/p5/sphere.mdx        | 104 +++
 src/content/reference/en/p5/splice.mdx        |  51 ++
 src/content/reference/en/p5/split.mdx         |  65 ++
 src/content/reference/en/p5/splitTokens.mdx   |  54 ++
 src/content/reference/en/p5/spotLight.mdx     |  87 +++
 src/content/reference/en/p5/sq.mdx            |  51 ++
 src/content/reference/en/p5/sqrt.mdx          |  52 ++
 src/content/reference/en/p5/square.mdx        |  15 +
 src/content/reference/en/p5/storeItem.mdx     |  58 ++
 src/content/reference/en/p5/str.mdx           |  37 +
 src/content/reference/en/p5/string.mdx        |  38 +
 src/content/reference/en/p5/stroke.mdx        |  15 +
 src/content/reference/en/p5/strokeCap.mdx     |  61 ++
 src/content/reference/en/p5/strokeJoin.mdx    | 120 +++
 src/content/reference/en/p5/strokeWeight.mdx  |  81 ++
 src/content/reference/en/p5/subset.mdx        |  52 ++
 src/content/reference/en/p5/tan.mdx           |  46 ++
 src/content/reference/en/p5/textAlign.mdx     | 122 +++
 src/content/reference/en/p5/textAscent.mdx    |  62 ++
 src/content/reference/en/p5/textDescent.mdx   |  62 ++
 src/content/reference/en/p5/textFont.mdx      | 104 +++
 src/content/reference/en/p5/textLeading.mdx   |  47 ++
 src/content/reference/en/p5/textOutput.mdx    | 158 ++++
 src/content/reference/en/p5/textSize.mdx      |  47 ++
 src/content/reference/en/p5/textStyle.mdx     |  61 ++
 src/content/reference/en/p5/textWidth.mdx     |  62 ++
 src/content/reference/en/p5/textWrap.mdx      |  75 ++
 src/content/reference/en/p5/textureMode.mdx   |  88 +++
 src/content/reference/en/p5/textureWrap.mdx   |  91 +++
 src/content/reference/en/p5/tint.mdx          | 121 +++
 src/content/reference/en/p5/torus.mdx         | 126 +++
 src/content/reference/en/p5/touchEnded.mdx    |  79 ++
 src/content/reference/en/p5/touchMoved.mdx    |  78 ++
 src/content/reference/en/p5/touchStarted.mdx  |  78 ++
 src/content/reference/en/p5/touches.mdx       |  38 +
 src/content/reference/en/p5/translate.mdx     |  70 ++
 src/content/reference/en/p5/triangle.mdx      |  58 ++
 src/content/reference/en/p5/trim.mdx          |  31 +
 src/content/reference/en/p5/turnAxis.mdx      |  51 ++
 src/content/reference/en/p5/unchar.mdx        |  29 +
 src/content/reference/en/p5/unhex.mdx         |  29 +
 src/content/reference/en/p5/updatePixels.mdx  |  75 ++
 .../reference/en/p5/userStartAudio.mdx        |  78 ++
 src/content/reference/en/p5/vertex.mdx        | 146 ++++
 src/content/reference/en/p5/webglVersion.mdx  | 100 +++
 src/content/reference/en/p5/while.mdx         |  66 ++
 src/content/reference/en/p5/width.mdx         |  83 ++
 src/content/reference/en/p5/winMouseX.mdx     |  46 ++
 src/content/reference/en/p5/winMouseY.mdx     |  46 ++
 src/content/reference/en/p5/windowHeight.mdx  |  38 +
 src/content/reference/en/p5/windowResized.mdx |  55 ++
 src/content/reference/en/p5/windowWidth.mdx   |  38 +
 src/content/reference/en/p5/year.mdx          |  32 +
 src/scripts/builders/reference.ts             |   7 +-
 1002 files changed, 55995 insertions(+), 2 deletions(-)
 create mode 100644 src/content/reference/en/JSON/stringify.mdx
 create mode 100644 src/content/reference/en/console/log.mdx
 create mode 100644 src/content/reference/en/index.mdx
 create mode 100644 src/content/reference/en/p5.Amplitude/getLevel.mdx
 create mode 100644 src/content/reference/en/p5.Amplitude/setInput.mdx
 create mode 100644 src/content/reference/en/p5.Amplitude/smooth.mdx
 create mode 100644 src/content/reference/en/p5.Amplitude/toggleNormalize.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/amp.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/amplitude.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/connect.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/currentSource.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/enabled.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/getLevel.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/getSources.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/input.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/mediaStream.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/output.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/setSource.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/start.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/stop.mdx
 create mode 100644 src/content/reference/en/p5.AudioIn/stream.mdx
 create mode 100644 src/content/reference/en/p5.AudioVoice/connect.mdx
 create mode 100644 src/content/reference/en/p5.AudioVoice/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.Camera/camera.mdx
 create mode 100644 src/content/reference/en/p5.Camera/centerX.mdx
 create mode 100644 src/content/reference/en/p5.Camera/centerY.mdx
 create mode 100644 src/content/reference/en/p5.Camera/centerZ.mdx
 create mode 100644 src/content/reference/en/p5.Camera/eyeX.mdx
 create mode 100644 src/content/reference/en/p5.Camera/eyeY.mdx
 create mode 100644 src/content/reference/en/p5.Camera/eyeZ.mdx
 create mode 100644 src/content/reference/en/p5.Camera/frustum.mdx
 create mode 100644 src/content/reference/en/p5.Camera/lookAt.mdx
 create mode 100644 src/content/reference/en/p5.Camera/move.mdx
 create mode 100644 src/content/reference/en/p5.Camera/ortho.mdx
 create mode 100644 src/content/reference/en/p5.Camera/pan.mdx
 create mode 100644 src/content/reference/en/p5.Camera/perspective.mdx
 create mode 100644 src/content/reference/en/p5.Camera/set.mdx
 create mode 100644 src/content/reference/en/p5.Camera/setPosition.mdx
 create mode 100644 src/content/reference/en/p5.Camera/slerp.mdx
 create mode 100644 src/content/reference/en/p5.Camera/tilt.mdx
 create mode 100644 src/content/reference/en/p5.Camera/upX.mdx
 create mode 100644 src/content/reference/en/p5.Camera/upY.mdx
 create mode 100644 src/content/reference/en/p5.Camera/upZ.mdx
 create mode 100644 src/content/reference/en/p5.Color/setAlpha.mdx
 create mode 100644 src/content/reference/en/p5.Color/setBlue.mdx
 create mode 100644 src/content/reference/en/p5.Color/setGreen.mdx
 create mode 100644 src/content/reference/en/p5.Color/setRed.mdx
 create mode 100644 src/content/reference/en/p5.Color/toString.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/attack.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/compressor.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/knee.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/process.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/ratio.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/reduction.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/release.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/set.mdx
 create mode 100644 src/content/reference/en/p5.Compressor/threshold.mdx
 create mode 100644 src/content/reference/en/p5.Convolver/addImpulse.mdx
 create mode 100644 src/content/reference/en/p5.Convolver/convolverNode.mdx
 create mode 100644 src/content/reference/en/p5.Convolver/impulses.mdx
 create mode 100644 src/content/reference/en/p5.Convolver/process.mdx
 create mode 100644 src/content/reference/en/p5.Convolver/resetImpulse.mdx
 create mode 100644 src/content/reference/en/p5.Convolver/toggleImpulse.mdx
 create mode 100644 src/content/reference/en/p5.Delay/amp.mdx
 create mode 100644 src/content/reference/en/p5.Delay/connect.mdx
 create mode 100644 src/content/reference/en/p5.Delay/delayTime.mdx
 create mode 100644 src/content/reference/en/p5.Delay/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.Delay/feedback.mdx
 create mode 100644 src/content/reference/en/p5.Delay/filter.mdx
 create mode 100644 src/content/reference/en/p5.Delay/leftDelay.mdx
 create mode 100644 src/content/reference/en/p5.Delay/process.mdx
 create mode 100644 src/content/reference/en/p5.Delay/rightDelay.mdx
 create mode 100644 src/content/reference/en/p5.Delay/setType.mdx
 create mode 100644 src/content/reference/en/p5.Distortion/WaveShaperNode.mdx
 create mode 100644 src/content/reference/en/p5.Distortion/getAmount.mdx
 create mode 100644 src/content/reference/en/p5.Distortion/getOversample.mdx
 create mode 100644 src/content/reference/en/p5.Distortion/process.mdx
 create mode 100644 src/content/reference/en/p5.Distortion/set.mdx
 create mode 100644 src/content/reference/en/p5.EQ/bands.mdx
 create mode 100644 src/content/reference/en/p5.EQ/process.mdx
 create mode 100644 src/content/reference/en/p5.Effect/amp.mdx
 create mode 100644 src/content/reference/en/p5.Effect/chain.mdx
 create mode 100644 src/content/reference/en/p5.Effect/connect.mdx
 create mode 100644 src/content/reference/en/p5.Effect/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.Effect/drywet.mdx
 create mode 100644 src/content/reference/en/p5.Element/addClass.mdx
 create mode 100644 src/content/reference/en/p5.Element/attribute.mdx
 create mode 100644 src/content/reference/en/p5.Element/center.mdx
 create mode 100644 src/content/reference/en/p5.Element/child.mdx
 create mode 100644 src/content/reference/en/p5.Element/class.mdx
 create mode 100644 src/content/reference/en/p5.Element/doubleClicked.mdx
 create mode 100644 src/content/reference/en/p5.Element/dragLeave.mdx
 create mode 100644 src/content/reference/en/p5.Element/dragOver.mdx
 create mode 100644 src/content/reference/en/p5.Element/draggable.mdx
 create mode 100644 src/content/reference/en/p5.Element/drop.mdx
 create mode 100644 src/content/reference/en/p5.Element/elt.mdx
 create mode 100644 src/content/reference/en/p5.Element/hasClass.mdx
 create mode 100644 src/content/reference/en/p5.Element/height.mdx
 create mode 100644 src/content/reference/en/p5.Element/hide.mdx
 create mode 100644 src/content/reference/en/p5.Element/html.mdx
 create mode 100644 src/content/reference/en/p5.Element/id.mdx
 create mode 100644 src/content/reference/en/p5.Element/mouseClicked.mdx
 create mode 100644 src/content/reference/en/p5.Element/mouseMoved.mdx
 create mode 100644 src/content/reference/en/p5.Element/mouseOut.mdx
 create mode 100644 src/content/reference/en/p5.Element/mouseOver.mdx
 create mode 100644 src/content/reference/en/p5.Element/mousePressed.mdx
 create mode 100644 src/content/reference/en/p5.Element/mouseReleased.mdx
 create mode 100644 src/content/reference/en/p5.Element/mouseWheel.mdx
 create mode 100644 src/content/reference/en/p5.Element/parent.mdx
 create mode 100644 src/content/reference/en/p5.Element/position.mdx
 create mode 100644 src/content/reference/en/p5.Element/remove.mdx
 create mode 100644 src/content/reference/en/p5.Element/removeAttribute.mdx
 create mode 100644 src/content/reference/en/p5.Element/removeClass.mdx
 create mode 100644 src/content/reference/en/p5.Element/show.mdx
 create mode 100644 src/content/reference/en/p5.Element/size.mdx
 create mode 100644 src/content/reference/en/p5.Element/style.mdx
 create mode 100644 src/content/reference/en/p5.Element/toggleClass.mdx
 create mode 100644 src/content/reference/en/p5.Element/touchEnded.mdx
 create mode 100644 src/content/reference/en/p5.Element/touchMoved.mdx
 create mode 100644 src/content/reference/en/p5.Element/touchStarted.mdx
 create mode 100644 src/content/reference/en/p5.Element/value.mdx
 create mode 100644 src/content/reference/en/p5.Element/width.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/add.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/attackLevel.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/attackTime.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/decayLevel.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/decayTime.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/mult.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/play.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/ramp.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/releaseLevel.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/releaseTime.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/scale.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/set.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/setADSR.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/setExp.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/setInput.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/setRange.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/triggerAttack.mdx
 create mode 100644 src/content/reference/en/p5.Envelope/triggerRelease.mdx
 create mode 100644 src/content/reference/en/p5.FFT/analyze.mdx
 create mode 100644 src/content/reference/en/p5.FFT/getCentroid.mdx
 create mode 100644 src/content/reference/en/p5.FFT/getEnergy.mdx
 create mode 100644 src/content/reference/en/p5.FFT/getOctaveBands.mdx
 create mode 100644 src/content/reference/en/p5.FFT/linAverages.mdx
 create mode 100644 src/content/reference/en/p5.FFT/logAverages.mdx
 create mode 100644 src/content/reference/en/p5.FFT/setInput.mdx
 create mode 100644 src/content/reference/en/p5.FFT/smooth.mdx
 create mode 100644 src/content/reference/en/p5.FFT/waveform.mdx
 create mode 100644 src/content/reference/en/p5.File/data.mdx
 create mode 100644 src/content/reference/en/p5.File/file.mdx
 create mode 100644 src/content/reference/en/p5.File/name.mdx
 create mode 100644 src/content/reference/en/p5.File/size.mdx
 create mode 100644 src/content/reference/en/p5.File/subtype.mdx
 create mode 100644 src/content/reference/en/p5.File/type.mdx
 create mode 100644 src/content/reference/en/p5.Filter/biquadFilter.mdx
 create mode 100644 src/content/reference/en/p5.Filter/freq.mdx
 create mode 100644 src/content/reference/en/p5.Filter/gain.mdx
 create mode 100644 src/content/reference/en/p5.Filter/process.mdx
 create mode 100644 src/content/reference/en/p5.Filter/res.mdx
 create mode 100644 src/content/reference/en/p5.Filter/set.mdx
 create mode 100644 src/content/reference/en/p5.Filter/setType.mdx
 create mode 100644 src/content/reference/en/p5.Filter/toggle.mdx
 create mode 100644 src/content/reference/en/p5.Font/font.mdx
 create mode 100644 src/content/reference/en/p5.Font/textBounds.mdx
 create mode 100644 src/content/reference/en/p5.Font/textToPoints.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/autoSized.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/begin.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/color.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/createCamera.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/depth.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/draw.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/end.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/get.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/pixelDensity.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/pixels.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/remove.mdx
 create mode 100644 src/content/reference/en/p5.Framebuffer/resize.mdx
 create mode 100644 src/content/reference/en/p5.Gain/amp.mdx
 create mode 100644 src/content/reference/en/p5.Gain/connect.mdx
 create mode 100644 src/content/reference/en/p5.Gain/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.Gain/setInput.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/averageNormals.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/averagePoleNormals.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/clearColors.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/computeFaces.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/computeNormals.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/flipU.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/flipV.mdx
 create mode 100644 src/content/reference/en/p5.Geometry/normalize.mdx
 create mode 100644 src/content/reference/en/p5.Graphics/createFramebuffer.mdx
 create mode 100644 src/content/reference/en/p5.Graphics/remove.mdx
 create mode 100644 src/content/reference/en/p5.Graphics/reset.mdx
 create mode 100644 src/content/reference/en/p5.Image/blend.mdx
 create mode 100644 src/content/reference/en/p5.Image/copy.mdx
 create mode 100644 src/content/reference/en/p5.Image/delay.mdx
 create mode 100644 src/content/reference/en/p5.Image/filter.mdx
 create mode 100644 src/content/reference/en/p5.Image/get.mdx
 create mode 100644 src/content/reference/en/p5.Image/getCurrentFrame.mdx
 create mode 100644 src/content/reference/en/p5.Image/height.mdx
 create mode 100644 src/content/reference/en/p5.Image/loadPixels.mdx
 create mode 100644 src/content/reference/en/p5.Image/mask.mdx
 create mode 100644 src/content/reference/en/p5.Image/numFrames.mdx
 create mode 100644 src/content/reference/en/p5.Image/pause.mdx
 create mode 100644 src/content/reference/en/p5.Image/pixelDensity.mdx
 create mode 100644 src/content/reference/en/p5.Image/pixels.mdx
 create mode 100644 src/content/reference/en/p5.Image/play.mdx
 create mode 100644 src/content/reference/en/p5.Image/reset.mdx
 create mode 100644 src/content/reference/en/p5.Image/resize.mdx
 create mode 100644 src/content/reference/en/p5.Image/save.mdx
 create mode 100644 src/content/reference/en/p5.Image/set.mdx
 create mode 100644 src/content/reference/en/p5.Image/setFrame.mdx
 create mode 100644 src/content/reference/en/p5.Image/updatePixels.mdx
 create mode 100644 src/content/reference/en/p5.Image/width.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/addCue.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/autoplay.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/clearCues.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/connect.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/duration.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/hideControls.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/loop.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/noLoop.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/onended.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/pause.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/play.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/removeCue.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/showControls.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/speed.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/src.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/stop.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/time.mdx
 create mode 100644 src/content/reference/en/p5.MediaElement/volume.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/amp.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/attack.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/connect.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/decay.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/dispose.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/play.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/release.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/setADSR.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/sustain.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/triggerAttack.mdx
 create mode 100644 src/content/reference/en/p5.MonoSynth/triggerRelease.mdx
 create mode 100644 src/content/reference/en/p5.Noise/setType.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/add.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/div.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/maxKey.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/maxValue.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/minKey.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/minValue.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/mult.mdx
 create mode 100644 src/content/reference/en/p5.NumberDict/sub.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/add.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/amp.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/connect.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/freq.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/getAmp.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/getFreq.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/getPan.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/getType.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/mult.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/pan.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/phase.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/scale.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/setType.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/start.mdx
 create mode 100644 src/content/reference/en/p5.Oscillator/stop.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/maxDist.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/orient.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/orientX.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/orientY.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/orientZ.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/panner.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/positionX.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/positionY.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/positionZ.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/process.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/rollof.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/set.mdx
 create mode 100644 src/content/reference/en/p5.Panner3D/setFalloff.mdx
 create mode 100644 src/content/reference/en/p5.Part/addPhrase.mdx
 create mode 100644 src/content/reference/en/p5.Part/getBPM.mdx
 create mode 100644 src/content/reference/en/p5.Part/getPhrase.mdx
 create mode 100644 src/content/reference/en/p5.Part/loop.mdx
 create mode 100644 src/content/reference/en/p5.Part/noLoop.mdx
 create mode 100644 src/content/reference/en/p5.Part/onStep.mdx
 create mode 100644 src/content/reference/en/p5.Part/pause.mdx
 create mode 100644 src/content/reference/en/p5.Part/removePhrase.mdx
 create mode 100644 src/content/reference/en/p5.Part/replaceSequence.mdx
 create mode 100644 src/content/reference/en/p5.Part/setBPM.mdx
 create mode 100644 src/content/reference/en/p5.Part/start.mdx
 create mode 100644 src/content/reference/en/p5.Part/stop.mdx
 create mode 100644 src/content/reference/en/p5.PeakDetect/isDetected.mdx
 create mode 100644 src/content/reference/en/p5.PeakDetect/onPeak.mdx
 create mode 100644 src/content/reference/en/p5.PeakDetect/update.mdx
 create mode 100644 src/content/reference/en/p5.Phrase/sequence.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/AudioVoice.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/connect.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/dispose.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/noteADSR.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/noteAttack.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/noteRelease.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/notes.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/play.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/polyvalue.mdx
 create mode 100644 src/content/reference/en/p5.PolySynth/setADSR.mdx
 create mode 100644 src/content/reference/en/p5.PrintWriter/clear.mdx
 create mode 100644 src/content/reference/en/p5.PrintWriter/close.mdx
 create mode 100644 src/content/reference/en/p5.PrintWriter/print.mdx
 create mode 100644 src/content/reference/en/p5.PrintWriter/write.mdx
 create mode 100644 src/content/reference/en/p5.Pulse/width.mdx
 create mode 100644 src/content/reference/en/p5.Reverb/amp.mdx
 create mode 100644 src/content/reference/en/p5.Reverb/connect.mdx
 create mode 100644 src/content/reference/en/p5.Reverb/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.Reverb/process.mdx
 create mode 100644 src/content/reference/en/p5.Reverb/set.mdx
 create mode 100644 src/content/reference/en/p5.Score/loop.mdx
 create mode 100644 src/content/reference/en/p5.Score/noLoop.mdx
 create mode 100644 src/content/reference/en/p5.Score/pause.mdx
 create mode 100644 src/content/reference/en/p5.Score/setBPM.mdx
 create mode 100644 src/content/reference/en/p5.Score/start.mdx
 create mode 100644 src/content/reference/en/p5.Score/stop.mdx
 create mode 100644 src/content/reference/en/p5.Shader/copyToContext.mdx
 create mode 100644 src/content/reference/en/p5.Shader/setUniform.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/addCue.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/channels.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/clearCues.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/connect.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/currentTime.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/disconnect.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/duration.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/frames.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/getBlob.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/getPan.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/getPeaks.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/isLoaded.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/isLooping.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/isPaused.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/isPlaying.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/jump.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/loop.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/onended.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/pan.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/pause.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/play.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/playMode.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/rate.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/removeCue.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/reverseBuffer.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/sampleRate.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/save.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/setBuffer.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/setLoop.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/setPath.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/setVolume.mdx
 create mode 100644 src/content/reference/en/p5.SoundFile/stop.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/bpm.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/interval.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/iterations.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/maxIterations.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/pause.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/start.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/stop.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/syncedStart.mdx
 create mode 100644 src/content/reference/en/p5.SoundLoop/timeSignature.mdx
 create mode 100644 src/content/reference/en/p5.SoundRecorder/record.mdx
 create mode 100644 src/content/reference/en/p5.SoundRecorder/setInput.mdx
 create mode 100644 src/content/reference/en/p5.SoundRecorder/stop.mdx
 create mode 100644 src/content/reference/en/p5.Table/addColumn.mdx
 create mode 100644 src/content/reference/en/p5.Table/addRow.mdx
 create mode 100644 src/content/reference/en/p5.Table/clearRows.mdx
 create mode 100644 src/content/reference/en/p5.Table/columns.mdx
 create mode 100644 src/content/reference/en/p5.Table/findRow.mdx
 create mode 100644 src/content/reference/en/p5.Table/findRows.mdx
 create mode 100644 src/content/reference/en/p5.Table/get.mdx
 create mode 100644 src/content/reference/en/p5.Table/getArray.mdx
 create mode 100644 src/content/reference/en/p5.Table/getColumn.mdx
 create mode 100644 src/content/reference/en/p5.Table/getColumnCount.mdx
 create mode 100644 src/content/reference/en/p5.Table/getNum.mdx
 create mode 100644 src/content/reference/en/p5.Table/getObject.mdx
 create mode 100644 src/content/reference/en/p5.Table/getRow.mdx
 create mode 100644 src/content/reference/en/p5.Table/getRowCount.mdx
 create mode 100644 src/content/reference/en/p5.Table/getRows.mdx
 create mode 100644 src/content/reference/en/p5.Table/getString.mdx
 create mode 100644 src/content/reference/en/p5.Table/matchRow.mdx
 create mode 100644 src/content/reference/en/p5.Table/matchRows.mdx
 create mode 100644 src/content/reference/en/p5.Table/removeColumn.mdx
 create mode 100644 src/content/reference/en/p5.Table/removeRow.mdx
 create mode 100644 src/content/reference/en/p5.Table/removeTokens.mdx
 create mode 100644 src/content/reference/en/p5.Table/rows.mdx
 create mode 100644 src/content/reference/en/p5.Table/set.mdx
 create mode 100644 src/content/reference/en/p5.Table/setNum.mdx
 create mode 100644 src/content/reference/en/p5.Table/setString.mdx
 create mode 100644 src/content/reference/en/p5.Table/trim.mdx
 create mode 100644 src/content/reference/en/p5.TableRow/get.mdx
 create mode 100644 src/content/reference/en/p5.TableRow/getNum.mdx
 create mode 100644 src/content/reference/en/p5.TableRow/getString.mdx
 create mode 100644 src/content/reference/en/p5.TableRow/set.mdx
 create mode 100644 src/content/reference/en/p5.TableRow/setNum.mdx
 create mode 100644 src/content/reference/en/p5.TableRow/setString.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/clear.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/create.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/get.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/hasKey.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/print.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/remove.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/saveJSON.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/saveTable.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/set.mdx
 create mode 100644 src/content/reference/en/p5.TypedDict/size.mdx
 create mode 100644 src/content/reference/en/p5.Vector/add.mdx
 create mode 100644 src/content/reference/en/p5.Vector/angleBetween.mdx
 create mode 100644 src/content/reference/en/p5.Vector/array.mdx
 create mode 100644 src/content/reference/en/p5.Vector/copy.mdx
 create mode 100644 src/content/reference/en/p5.Vector/cross.mdx
 create mode 100644 src/content/reference/en/p5.Vector/dist.mdx
 create mode 100644 src/content/reference/en/p5.Vector/div.mdx
 create mode 100644 src/content/reference/en/p5.Vector/dot.mdx
 create mode 100644 src/content/reference/en/p5.Vector/equals.mdx
 create mode 100644 src/content/reference/en/p5.Vector/fromAngle.mdx
 create mode 100644 src/content/reference/en/p5.Vector/fromAngles.mdx
 create mode 100644 src/content/reference/en/p5.Vector/heading.mdx
 create mode 100644 src/content/reference/en/p5.Vector/lerp.mdx
 create mode 100644 src/content/reference/en/p5.Vector/limit.mdx
 create mode 100644 src/content/reference/en/p5.Vector/mag.mdx
 create mode 100644 src/content/reference/en/p5.Vector/magSq.mdx
 create mode 100644 src/content/reference/en/p5.Vector/mult.mdx
 create mode 100644 src/content/reference/en/p5.Vector/normalize.mdx
 create mode 100644 src/content/reference/en/p5.Vector/random2D.mdx
 create mode 100644 src/content/reference/en/p5.Vector/random3D.mdx
 create mode 100644 src/content/reference/en/p5.Vector/reflect.mdx
 create mode 100644 src/content/reference/en/p5.Vector/rem.mdx
 create mode 100644 src/content/reference/en/p5.Vector/rotate.mdx
 create mode 100644 src/content/reference/en/p5.Vector/set.mdx
 create mode 100644 src/content/reference/en/p5.Vector/setHeading.mdx
 create mode 100644 src/content/reference/en/p5.Vector/setMag.mdx
 create mode 100644 src/content/reference/en/p5.Vector/slerp.mdx
 create mode 100644 src/content/reference/en/p5.Vector/sub.mdx
 create mode 100644 src/content/reference/en/p5.Vector/toString.mdx
 create mode 100644 src/content/reference/en/p5.Vector/x.mdx
 create mode 100644 src/content/reference/en/p5.Vector/y.mdx
 create mode 100644 src/content/reference/en/p5.Vector/z.mdx
 create mode 100644 src/content/reference/en/p5.XML/addChild.mdx
 create mode 100644 src/content/reference/en/p5.XML/getAttributeCount.mdx
 create mode 100644 src/content/reference/en/p5.XML/getChild.mdx
 create mode 100644 src/content/reference/en/p5.XML/getChildren.mdx
 create mode 100644 src/content/reference/en/p5.XML/getContent.mdx
 create mode 100644 src/content/reference/en/p5.XML/getName.mdx
 create mode 100644 src/content/reference/en/p5.XML/getNum.mdx
 create mode 100644 src/content/reference/en/p5.XML/getParent.mdx
 create mode 100644 src/content/reference/en/p5.XML/getString.mdx
 create mode 100644 src/content/reference/en/p5.XML/hasAttribute.mdx
 create mode 100644 src/content/reference/en/p5.XML/hasChildren.mdx
 create mode 100644 src/content/reference/en/p5.XML/listAttributes.mdx
 create mode 100644 src/content/reference/en/p5.XML/listChildren.mdx
 create mode 100644 src/content/reference/en/p5.XML/removeChild.mdx
 create mode 100644 src/content/reference/en/p5.XML/serialize.mdx
 create mode 100644 src/content/reference/en/p5.XML/setAttribute.mdx
 create mode 100644 src/content/reference/en/p5.XML/setContent.mdx
 create mode 100644 src/content/reference/en/p5.XML/setName.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Amplitude.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.AudioIn.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.AudioVoice.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.BandPass.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Compressor.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Convolver.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Delay.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Distortion.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.EQ.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Effect.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Envelope.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.FFT.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Filter.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Gain.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.HighPass.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.LowPass.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.MonoSynth.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Noise.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.OnsetDetect.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Oscillator.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Panner3D.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Part.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.PeakDetect.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Phrase.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.PolySynth.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Pulse.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Reverb.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.SawOsc.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.Score.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.SinOsc.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.SoundFile.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.SoundLoop.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.SoundRecorder.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.SqrOsc.mdx
 create mode 100644 src/content/reference/en/p5.sound/p5.TriOsc.mdx
 create mode 100644 src/content/reference/en/p5/&gt;.mdx
 create mode 100644 src/content/reference/en/p5/&gt;=.mdx
 create mode 100644 src/content/reference/en/p5/&lt;.mdx
 create mode 100644 src/content/reference/en/p5/&lt;=.mdx
 create mode 100644 src/content/reference/en/p5/===.mdx
 create mode 100644 src/content/reference/en/p5/ADD.mdx
 create mode 100644 src/content/reference/en/p5/ALT.mdx
 create mode 100644 src/content/reference/en/p5/ARROW.mdx
 create mode 100644 src/content/reference/en/p5/AUTO.mdx
 create mode 100644 src/content/reference/en/p5/AXES.mdx
 create mode 100644 src/content/reference/en/p5/BACKSPACE.mdx
 create mode 100644 src/content/reference/en/p5/BASELINE.mdx
 create mode 100644 src/content/reference/en/p5/BEVEL.mdx
 create mode 100644 src/content/reference/en/p5/BLEND.mdx
 create mode 100644 src/content/reference/en/p5/BLUR.mdx
 create mode 100644 src/content/reference/en/p5/BOLD.mdx
 create mode 100644 src/content/reference/en/p5/BOLDITALIC.mdx
 create mode 100644 src/content/reference/en/p5/BOTTOM.mdx
 create mode 100644 src/content/reference/en/p5/BURN.mdx
 create mode 100644 src/content/reference/en/p5/CENTER.mdx
 create mode 100644 src/content/reference/en/p5/CHAR.mdx
 create mode 100644 src/content/reference/en/p5/CHORD.mdx
 create mode 100644 src/content/reference/en/p5/CLAMP.mdx
 create mode 100644 src/content/reference/en/p5/CLOSE.mdx
 create mode 100644 src/content/reference/en/p5/CONTAIN.mdx
 create mode 100644 src/content/reference/en/p5/CONTROL.mdx
 create mode 100644 src/content/reference/en/p5/CORNER.mdx
 create mode 100644 src/content/reference/en/p5/CORNERS.mdx
 create mode 100644 src/content/reference/en/p5/COVER.mdx
 create mode 100644 src/content/reference/en/p5/CROSS.mdx
 create mode 100644 src/content/reference/en/p5/DARKEST.mdx
 create mode 100644 src/content/reference/en/p5/DEGREES.mdx
 create mode 100644 src/content/reference/en/p5/DELETE.mdx
 create mode 100644 src/content/reference/en/p5/DIFFERENCE.mdx
 create mode 100644 src/content/reference/en/p5/DILATE.mdx
 create mode 100644 src/content/reference/en/p5/DODGE.mdx
 create mode 100644 src/content/reference/en/p5/DOWN_ARROW.mdx
 create mode 100644 src/content/reference/en/p5/ENTER.mdx
 create mode 100644 src/content/reference/en/p5/ERODE.mdx
 create mode 100644 src/content/reference/en/p5/ESCAPE.mdx
 create mode 100644 src/content/reference/en/p5/EXCLUSION.mdx
 create mode 100644 src/content/reference/en/p5/FALLBACK.mdx
 create mode 100644 src/content/reference/en/p5/FLAT.mdx
 create mode 100644 src/content/reference/en/p5/FLOAT.mdx
 create mode 100644 src/content/reference/en/p5/GRAY.mdx
 create mode 100644 src/content/reference/en/p5/GRID.mdx
 create mode 100644 src/content/reference/en/p5/HALF_FLOAT.mdx
 create mode 100644 src/content/reference/en/p5/HALF_PI.mdx
 create mode 100644 src/content/reference/en/p5/HAND.mdx
 create mode 100644 src/content/reference/en/p5/HARD_LIGHT.mdx
 create mode 100644 src/content/reference/en/p5/HSB.mdx
 create mode 100644 src/content/reference/en/p5/HSL.mdx
 create mode 100644 src/content/reference/en/p5/IMAGE.mdx
 create mode 100644 src/content/reference/en/p5/IMMEDIATE.mdx
 create mode 100644 src/content/reference/en/p5/INVERT.mdx
 create mode 100644 src/content/reference/en/p5/ITALIC.mdx
 create mode 100644 src/content/reference/en/p5/LABEL.mdx
 create mode 100644 src/content/reference/en/p5/LANDSCAPE.mdx
 create mode 100644 src/content/reference/en/p5/LEFT.mdx
 create mode 100644 src/content/reference/en/p5/LEFT_ARROW.mdx
 create mode 100644 src/content/reference/en/p5/LIGHTEST.mdx
 create mode 100644 src/content/reference/en/p5/LINEAR.mdx
 create mode 100644 src/content/reference/en/p5/LINES.mdx
 create mode 100644 src/content/reference/en/p5/LINE_LOOP.mdx
 create mode 100644 src/content/reference/en/p5/LINE_STRIP.mdx
 create mode 100644 src/content/reference/en/p5/MIRROR.mdx
 create mode 100644 src/content/reference/en/p5/MITER.mdx
 create mode 100644 src/content/reference/en/p5/MOVE.mdx
 create mode 100644 src/content/reference/en/p5/MULTIPLY.mdx
 create mode 100644 src/content/reference/en/p5/NEAREST.mdx
 create mode 100644 src/content/reference/en/p5/OPAQUE.mdx
 create mode 100644 src/content/reference/en/p5/OPEN.mdx
 create mode 100644 src/content/reference/en/p5/OPTION.mdx
 create mode 100644 src/content/reference/en/p5/OVERLAY.mdx
 create mode 100644 src/content/reference/en/p5/P2D.mdx
 create mode 100644 src/content/reference/en/p5/PI.mdx
 create mode 100644 src/content/reference/en/p5/PIE.mdx
 create mode 100644 src/content/reference/en/p5/POINTS.mdx
 create mode 100644 src/content/reference/en/p5/PORTRAIT.mdx
 create mode 100644 src/content/reference/en/p5/POSTERIZE.mdx
 create mode 100644 src/content/reference/en/p5/PROJECT.mdx
 create mode 100644 src/content/reference/en/p5/QUADRATIC.mdx
 create mode 100644 src/content/reference/en/p5/QUADS.mdx
 create mode 100644 src/content/reference/en/p5/QUAD_STRIP.mdx
 create mode 100644 src/content/reference/en/p5/QUARTER_PI.mdx
 create mode 100644 src/content/reference/en/p5/RADIANS.mdx
 create mode 100644 src/content/reference/en/p5/RADIUS.mdx
 create mode 100644 src/content/reference/en/p5/REMOVE.mdx
 create mode 100644 src/content/reference/en/p5/REPEAT.mdx
 create mode 100644 src/content/reference/en/p5/REPLACE.mdx
 create mode 100644 src/content/reference/en/p5/RETURN.mdx
 create mode 100644 src/content/reference/en/p5/RGB.mdx
 create mode 100644 src/content/reference/en/p5/RGBA.mdx
 create mode 100644 src/content/reference/en/p5/RIGHT.mdx
 create mode 100644 src/content/reference/en/p5/RIGHT_ARROW.mdx
 create mode 100644 src/content/reference/en/p5/ROUND.mdx
 create mode 100644 src/content/reference/en/p5/SCREEN.mdx
 create mode 100644 src/content/reference/en/p5/SHIFT.mdx
 create mode 100644 src/content/reference/en/p5/SOFT_LIGHT.mdx
 create mode 100644 src/content/reference/en/p5/SUBTRACT.mdx
 create mode 100644 src/content/reference/en/p5/TAB.mdx
 create mode 100644 src/content/reference/en/p5/TAU.mdx
 create mode 100644 src/content/reference/en/p5/TESS.mdx
 create mode 100644 src/content/reference/en/p5/TEXT.mdx
 create mode 100644 src/content/reference/en/p5/TEXTURE.mdx
 create mode 100644 src/content/reference/en/p5/THRESHOLD.mdx
 create mode 100644 src/content/reference/en/p5/TOP.mdx
 create mode 100644 src/content/reference/en/p5/TRIANGLES.mdx
 create mode 100644 src/content/reference/en/p5/TRIANGLE_FAN.mdx
 create mode 100644 src/content/reference/en/p5/TRIANGLE_STRIP.mdx
 create mode 100644 src/content/reference/en/p5/TWO_PI.mdx
 create mode 100644 src/content/reference/en/p5/UNSIGNED_BYTE.mdx
 create mode 100644 src/content/reference/en/p5/UNSIGNED_INT.mdx
 create mode 100644 src/content/reference/en/p5/UP_ARROW.mdx
 create mode 100644 src/content/reference/en/p5/VERSION.mdx
 create mode 100644 src/content/reference/en/p5/WAIT.mdx
 create mode 100644 src/content/reference/en/p5/WEBGL.mdx
 create mode 100644 src/content/reference/en/p5/WEBGL2.mdx
 create mode 100644 src/content/reference/en/p5/WORD.mdx
 create mode 100644 src/content/reference/en/p5/abs.mdx
 create mode 100644 src/content/reference/en/p5/accelerationX.mdx
 create mode 100644 src/content/reference/en/p5/accelerationY.mdx
 create mode 100644 src/content/reference/en/p5/accelerationZ.mdx
 create mode 100644 src/content/reference/en/p5/acos.mdx
 create mode 100644 src/content/reference/en/p5/alpha.mdx
 create mode 100644 src/content/reference/en/p5/ambientLight.mdx
 create mode 100644 src/content/reference/en/p5/ambientMaterial.mdx
 create mode 100644 src/content/reference/en/p5/angleMode.mdx
 create mode 100644 src/content/reference/en/p5/append.mdx
 create mode 100644 src/content/reference/en/p5/applyMatrix.mdx
 create mode 100644 src/content/reference/en/p5/arc.mdx
 create mode 100644 src/content/reference/en/p5/arrayCopy.mdx
 create mode 100644 src/content/reference/en/p5/asin.mdx
 create mode 100644 src/content/reference/en/p5/atan.mdx
 create mode 100644 src/content/reference/en/p5/atan2.mdx
 create mode 100644 src/content/reference/en/p5/background.mdx
 create mode 100644 src/content/reference/en/p5/beginClip.mdx
 create mode 100644 src/content/reference/en/p5/beginContour.mdx
 create mode 100644 src/content/reference/en/p5/beginGeometry.mdx
 create mode 100644 src/content/reference/en/p5/beginShape.mdx
 create mode 100644 src/content/reference/en/p5/bezier.mdx
 create mode 100644 src/content/reference/en/p5/bezierDetail.mdx
 create mode 100644 src/content/reference/en/p5/bezierPoint.mdx
 create mode 100644 src/content/reference/en/p5/bezierTangent.mdx
 create mode 100644 src/content/reference/en/p5/bezierVertex.mdx
 create mode 100644 src/content/reference/en/p5/blendMode.mdx
 create mode 100644 src/content/reference/en/p5/blue.mdx
 create mode 100644 src/content/reference/en/p5/boolean.mdx
 create mode 100644 src/content/reference/en/p5/box.mdx
 create mode 100644 src/content/reference/en/p5/brightness.mdx
 create mode 100644 src/content/reference/en/p5/buildGeometry.mdx
 create mode 100644 src/content/reference/en/p5/byte.mdx
 create mode 100644 src/content/reference/en/p5/camera.mdx
 create mode 100644 src/content/reference/en/p5/ceil.mdx
 create mode 100644 src/content/reference/en/p5/changed.mdx
 create mode 100644 src/content/reference/en/p5/circle.mdx
 create mode 100644 src/content/reference/en/p5/class.mdx
 create mode 100644 src/content/reference/en/p5/clear.mdx
 create mode 100644 src/content/reference/en/p5/clearDepth.mdx
 create mode 100644 src/content/reference/en/p5/clearStorage.mdx
 create mode 100644 src/content/reference/en/p5/clip.mdx
 create mode 100644 src/content/reference/en/p5/color.mdx
 create mode 100644 src/content/reference/en/p5/colorMode.mdx
 create mode 100644 src/content/reference/en/p5/concat.mdx
 create mode 100644 src/content/reference/en/p5/cone.mdx
 create mode 100644 src/content/reference/en/p5/const.mdx
 create mode 100644 src/content/reference/en/p5/constrain.mdx
 create mode 100644 src/content/reference/en/p5/copy.mdx
 create mode 100644 src/content/reference/en/p5/cos.mdx
 create mode 100644 src/content/reference/en/p5/createA.mdx
 create mode 100644 src/content/reference/en/p5/createAudio.mdx
 create mode 100644 src/content/reference/en/p5/createButton.mdx
 create mode 100644 src/content/reference/en/p5/createCamera.mdx
 create mode 100644 src/content/reference/en/p5/createCanvas.mdx
 create mode 100644 src/content/reference/en/p5/createCapture.mdx
 create mode 100644 src/content/reference/en/p5/createCheckbox.mdx
 create mode 100644 src/content/reference/en/p5/createColorPicker.mdx
 create mode 100644 src/content/reference/en/p5/createConvolver.mdx
 create mode 100644 src/content/reference/en/p5/createDiv.mdx
 create mode 100644 src/content/reference/en/p5/createElement.mdx
 create mode 100644 src/content/reference/en/p5/createFileInput.mdx
 create mode 100644 src/content/reference/en/p5/createFilterShader.mdx
 create mode 100644 src/content/reference/en/p5/createFramebuffer.mdx
 create mode 100644 src/content/reference/en/p5/createGraphics.mdx
 create mode 100644 src/content/reference/en/p5/createImage.mdx
 create mode 100644 src/content/reference/en/p5/createImg.mdx
 create mode 100644 src/content/reference/en/p5/createInput.mdx
 create mode 100644 src/content/reference/en/p5/createNumberDict.mdx
 create mode 100644 src/content/reference/en/p5/createP.mdx
 create mode 100644 src/content/reference/en/p5/createRadio.mdx
 create mode 100644 src/content/reference/en/p5/createSelect.mdx
 create mode 100644 src/content/reference/en/p5/createShader.mdx
 create mode 100644 src/content/reference/en/p5/createSlider.mdx
 create mode 100644 src/content/reference/en/p5/createSpan.mdx
 create mode 100644 src/content/reference/en/p5/createStringDict.mdx
 create mode 100644 src/content/reference/en/p5/createVector.mdx
 create mode 100644 src/content/reference/en/p5/createVideo.mdx
 create mode 100644 src/content/reference/en/p5/createWriter.mdx
 create mode 100644 src/content/reference/en/p5/cursor.mdx
 create mode 100644 src/content/reference/en/p5/curve.mdx
 create mode 100644 src/content/reference/en/p5/curveDetail.mdx
 create mode 100644 src/content/reference/en/p5/curvePoint.mdx
 create mode 100644 src/content/reference/en/p5/curveTangent.mdx
 create mode 100644 src/content/reference/en/p5/curveTightness.mdx
 create mode 100644 src/content/reference/en/p5/curveVertex.mdx
 create mode 100644 src/content/reference/en/p5/cylinder.mdx
 create mode 100644 src/content/reference/en/p5/day.mdx
 create mode 100644 src/content/reference/en/p5/debugMode.mdx
 create mode 100644 src/content/reference/en/p5/deltaTime.mdx
 create mode 100644 src/content/reference/en/p5/describe.mdx
 create mode 100644 src/content/reference/en/p5/describeElement.mdx
 create mode 100644 src/content/reference/en/p5/deviceMoved.mdx
 create mode 100644 src/content/reference/en/p5/deviceOrientation.mdx
 create mode 100644 src/content/reference/en/p5/deviceShaken.mdx
 create mode 100644 src/content/reference/en/p5/deviceTurned.mdx
 create mode 100644 src/content/reference/en/p5/directionalLight.mdx
 create mode 100644 src/content/reference/en/p5/disableFriendlyErrors.mdx
 create mode 100644 src/content/reference/en/p5/displayDensity.mdx
 create mode 100644 src/content/reference/en/p5/displayHeight.mdx
 create mode 100644 src/content/reference/en/p5/displayWidth.mdx
 create mode 100644 src/content/reference/en/p5/dist.mdx
 create mode 100644 src/content/reference/en/p5/doubleClicked.mdx
 create mode 100644 src/content/reference/en/p5/draw.mdx
 create mode 100644 src/content/reference/en/p5/drawingContext.mdx
 create mode 100644 src/content/reference/en/p5/ellipse.mdx
 create mode 100644 src/content/reference/en/p5/ellipseMode.mdx
 create mode 100644 src/content/reference/en/p5/ellipsoid.mdx
 create mode 100644 src/content/reference/en/p5/emissiveMaterial.mdx
 create mode 100644 src/content/reference/en/p5/endClip.mdx
 create mode 100644 src/content/reference/en/p5/endContour.mdx
 create mode 100644 src/content/reference/en/p5/endGeometry.mdx
 create mode 100644 src/content/reference/en/p5/endShape.mdx
 create mode 100644 src/content/reference/en/p5/erase.mdx
 create mode 100644 src/content/reference/en/p5/exitPointerLock.mdx
 create mode 100644 src/content/reference/en/p5/exp.mdx
 create mode 100644 src/content/reference/en/p5/fill.mdx
 create mode 100644 src/content/reference/en/p5/filter.mdx
 create mode 100644 src/content/reference/en/p5/floor.mdx
 create mode 100644 src/content/reference/en/p5/focused.mdx
 create mode 100644 src/content/reference/en/p5/for.mdx
 create mode 100644 src/content/reference/en/p5/fract.mdx
 create mode 100644 src/content/reference/en/p5/frameCount.mdx
 create mode 100644 src/content/reference/en/p5/frameRate.mdx
 create mode 100644 src/content/reference/en/p5/freeGeometry.mdx
 create mode 100644 src/content/reference/en/p5/freqToMidi.mdx
 create mode 100644 src/content/reference/en/p5/frustum.mdx
 create mode 100644 src/content/reference/en/p5/fullscreen.mdx
 create mode 100644 src/content/reference/en/p5/function.mdx
 create mode 100644 src/content/reference/en/p5/get.mdx
 create mode 100644 src/content/reference/en/p5/getAudioContext.mdx
 create mode 100644 src/content/reference/en/p5/getItem.mdx
 create mode 100644 src/content/reference/en/p5/getOutputVolume.mdx
 create mode 100644 src/content/reference/en/p5/getTargetFrameRate.mdx
 create mode 100644 src/content/reference/en/p5/getURL.mdx
 create mode 100644 src/content/reference/en/p5/getURLParams.mdx
 create mode 100644 src/content/reference/en/p5/getURLPath.mdx
 create mode 100644 src/content/reference/en/p5/green.mdx
 create mode 100644 src/content/reference/en/p5/gridOutput.mdx
 create mode 100644 src/content/reference/en/p5/height.mdx
 create mode 100644 src/content/reference/en/p5/hex.mdx
 create mode 100644 src/content/reference/en/p5/hour.mdx
 create mode 100644 src/content/reference/en/p5/httpDo.mdx
 create mode 100644 src/content/reference/en/p5/httpGet.mdx
 create mode 100644 src/content/reference/en/p5/httpPost.mdx
 create mode 100644 src/content/reference/en/p5/hue.mdx
 create mode 100644 src/content/reference/en/p5/if-else.mdx
 create mode 100644 src/content/reference/en/p5/imageLight.mdx
 create mode 100644 src/content/reference/en/p5/imageMode.mdx
 create mode 100644 src/content/reference/en/p5/input.mdx
 create mode 100644 src/content/reference/en/p5/int.mdx
 create mode 100644 src/content/reference/en/p5/isLooping.mdx
 create mode 100644 src/content/reference/en/p5/join.mdx
 create mode 100644 src/content/reference/en/p5/key.mdx
 create mode 100644 src/content/reference/en/p5/keyCode.mdx
 create mode 100644 src/content/reference/en/p5/keyIsDown.mdx
 create mode 100644 src/content/reference/en/p5/keyIsPressed.mdx
 create mode 100644 src/content/reference/en/p5/keyPressed.mdx
 create mode 100644 src/content/reference/en/p5/keyReleased.mdx
 create mode 100644 src/content/reference/en/p5/keyTyped.mdx
 create mode 100644 src/content/reference/en/p5/lerp.mdx
 create mode 100644 src/content/reference/en/p5/lerpColor.mdx
 create mode 100644 src/content/reference/en/p5/let.mdx
 create mode 100644 src/content/reference/en/p5/lightFalloff.mdx
 create mode 100644 src/content/reference/en/p5/lightness.mdx
 create mode 100644 src/content/reference/en/p5/lights.mdx
 create mode 100644 src/content/reference/en/p5/line.mdx
 create mode 100644 src/content/reference/en/p5/loadBytes.mdx
 create mode 100644 src/content/reference/en/p5/loadFont.mdx
 create mode 100644 src/content/reference/en/p5/loadImage.mdx
 create mode 100644 src/content/reference/en/p5/loadJSON.mdx
 create mode 100644 src/content/reference/en/p5/loadModel.mdx
 create mode 100644 src/content/reference/en/p5/loadPixels.mdx
 create mode 100644 src/content/reference/en/p5/loadShader.mdx
 create mode 100644 src/content/reference/en/p5/loadSound.mdx
 create mode 100644 src/content/reference/en/p5/loadStrings.mdx
 create mode 100644 src/content/reference/en/p5/loadTable.mdx
 create mode 100644 src/content/reference/en/p5/loadXML.mdx
 create mode 100644 src/content/reference/en/p5/log.mdx
 create mode 100644 src/content/reference/en/p5/loop.mdx
 create mode 100644 src/content/reference/en/p5/mag.mdx
 create mode 100644 src/content/reference/en/p5/map.mdx
 create mode 100644 src/content/reference/en/p5/match.mdx
 create mode 100644 src/content/reference/en/p5/matchAll.mdx
 create mode 100644 src/content/reference/en/p5/max.mdx
 create mode 100644 src/content/reference/en/p5/metalness.mdx
 create mode 100644 src/content/reference/en/p5/midiToFreq.mdx
 create mode 100644 src/content/reference/en/p5/millis.mdx
 create mode 100644 src/content/reference/en/p5/min.mdx
 create mode 100644 src/content/reference/en/p5/minute.mdx
 create mode 100644 src/content/reference/en/p5/model.mdx
 create mode 100644 src/content/reference/en/p5/month.mdx
 create mode 100644 src/content/reference/en/p5/mouseButton.mdx
 create mode 100644 src/content/reference/en/p5/mouseClicked.mdx
 create mode 100644 src/content/reference/en/p5/mouseDragged.mdx
 create mode 100644 src/content/reference/en/p5/mouseIsPressed.mdx
 create mode 100644 src/content/reference/en/p5/mouseMoved.mdx
 create mode 100644 src/content/reference/en/p5/mousePressed.mdx
 create mode 100644 src/content/reference/en/p5/mouseReleased.mdx
 create mode 100644 src/content/reference/en/p5/mouseWheel.mdx
 create mode 100644 src/content/reference/en/p5/mouseX.mdx
 create mode 100644 src/content/reference/en/p5/mouseY.mdx
 create mode 100644 src/content/reference/en/p5/movedX.mdx
 create mode 100644 src/content/reference/en/p5/movedY.mdx
 create mode 100644 src/content/reference/en/p5/nf.mdx
 create mode 100644 src/content/reference/en/p5/nfc.mdx
 create mode 100644 src/content/reference/en/p5/nfp.mdx
 create mode 100644 src/content/reference/en/p5/nfs.mdx
 create mode 100644 src/content/reference/en/p5/noCanvas.mdx
 create mode 100644 src/content/reference/en/p5/noCursor.mdx
 create mode 100644 src/content/reference/en/p5/noDebugMode.mdx
 create mode 100644 src/content/reference/en/p5/noErase.mdx
 create mode 100644 src/content/reference/en/p5/noFill.mdx
 create mode 100644 src/content/reference/en/p5/noLights.mdx
 create mode 100644 src/content/reference/en/p5/noLoop.mdx
 create mode 100644 src/content/reference/en/p5/noSmooth.mdx
 create mode 100644 src/content/reference/en/p5/noStroke.mdx
 create mode 100644 src/content/reference/en/p5/noTint.mdx
 create mode 100644 src/content/reference/en/p5/noise.mdx
 create mode 100644 src/content/reference/en/p5/noiseDetail.mdx
 create mode 100644 src/content/reference/en/p5/noiseSeed.mdx
 create mode 100644 src/content/reference/en/p5/norm.mdx
 create mode 100644 src/content/reference/en/p5/normal.mdx
 create mode 100644 src/content/reference/en/p5/normalMaterial.mdx
 create mode 100644 src/content/reference/en/p5/number.mdx
 create mode 100644 src/content/reference/en/p5/object.mdx
 create mode 100644 src/content/reference/en/p5/orbitControl.mdx
 create mode 100644 src/content/reference/en/p5/ortho.mdx
 create mode 100644 src/content/reference/en/p5/outputVolume.mdx
 create mode 100644 src/content/reference/en/p5/p5.Camera.mdx
 create mode 100644 src/content/reference/en/p5/p5.Color.mdx
 create mode 100644 src/content/reference/en/p5/p5.Element.mdx
 create mode 100644 src/content/reference/en/p5/p5.File.mdx
 create mode 100644 src/content/reference/en/p5/p5.Font.mdx
 create mode 100644 src/content/reference/en/p5/p5.Framebuffer.mdx
 create mode 100644 src/content/reference/en/p5/p5.Geometry.mdx
 create mode 100644 src/content/reference/en/p5/p5.Graphics.mdx
 create mode 100644 src/content/reference/en/p5/p5.Image.mdx
 create mode 100644 src/content/reference/en/p5/p5.MediaElement.mdx
 create mode 100644 src/content/reference/en/p5/p5.NumberDict.mdx
 create mode 100644 src/content/reference/en/p5/p5.PrintWriter.mdx
 create mode 100644 src/content/reference/en/p5/p5.Renderer.mdx
 create mode 100644 src/content/reference/en/p5/p5.Shader.mdx
 create mode 100644 src/content/reference/en/p5/p5.StringDict.mdx
 create mode 100644 src/content/reference/en/p5/p5.Table.mdx
 create mode 100644 src/content/reference/en/p5/p5.TableRow.mdx
 create mode 100644 src/content/reference/en/p5/p5.TypedDict.mdx
 create mode 100644 src/content/reference/en/p5/p5.Vector.mdx
 create mode 100644 src/content/reference/en/p5/p5.XML.mdx
 create mode 100644 src/content/reference/en/p5/p5.mdx
 create mode 100644 src/content/reference/en/p5/pAccelerationX.mdx
 create mode 100644 src/content/reference/en/p5/pAccelerationY.mdx
 create mode 100644 src/content/reference/en/p5/pAccelerationZ.mdx
 create mode 100644 src/content/reference/en/p5/pRotationX.mdx
 create mode 100644 src/content/reference/en/p5/pRotationY.mdx
 create mode 100644 src/content/reference/en/p5/pRotationZ.mdx
 create mode 100644 src/content/reference/en/p5/perspective.mdx
 create mode 100644 src/content/reference/en/p5/pixelDensity.mdx
 create mode 100644 src/content/reference/en/p5/pixels.mdx
 create mode 100644 src/content/reference/en/p5/plane.mdx
 create mode 100644 src/content/reference/en/p5/pmouseX.mdx
 create mode 100644 src/content/reference/en/p5/pmouseY.mdx
 create mode 100644 src/content/reference/en/p5/point.mdx
 create mode 100644 src/content/reference/en/p5/pointLight.mdx
 create mode 100644 src/content/reference/en/p5/pop.mdx
 create mode 100644 src/content/reference/en/p5/pow.mdx
 create mode 100644 src/content/reference/en/p5/preload.mdx
 create mode 100644 src/content/reference/en/p5/print.mdx
 create mode 100644 src/content/reference/en/p5/push.mdx
 create mode 100644 src/content/reference/en/p5/pwinMouseX.mdx
 create mode 100644 src/content/reference/en/p5/pwinMouseY.mdx
 create mode 100644 src/content/reference/en/p5/quad.mdx
 create mode 100644 src/content/reference/en/p5/quadraticVertex.mdx
 create mode 100644 src/content/reference/en/p5/random.mdx
 create mode 100644 src/content/reference/en/p5/randomGaussian.mdx
 create mode 100644 src/content/reference/en/p5/randomSeed.mdx
 create mode 100644 src/content/reference/en/p5/rect.mdx
 create mode 100644 src/content/reference/en/p5/rectMode.mdx
 create mode 100644 src/content/reference/en/p5/red.mdx
 create mode 100644 src/content/reference/en/p5/redraw.mdx
 create mode 100644 src/content/reference/en/p5/removeElements.mdx
 create mode 100644 src/content/reference/en/p5/removeItem.mdx
 create mode 100644 src/content/reference/en/p5/requestPointerLock.mdx
 create mode 100644 src/content/reference/en/p5/resetMatrix.mdx
 create mode 100644 src/content/reference/en/p5/resetShader.mdx
 create mode 100644 src/content/reference/en/p5/resizeCanvas.mdx
 create mode 100644 src/content/reference/en/p5/reverse.mdx
 create mode 100644 src/content/reference/en/p5/rotate.mdx
 create mode 100644 src/content/reference/en/p5/rotateX.mdx
 create mode 100644 src/content/reference/en/p5/rotateY.mdx
 create mode 100644 src/content/reference/en/p5/rotateZ.mdx
 create mode 100644 src/content/reference/en/p5/rotationX.mdx
 create mode 100644 src/content/reference/en/p5/rotationY.mdx
 create mode 100644 src/content/reference/en/p5/rotationZ.mdx
 create mode 100644 src/content/reference/en/p5/sampleRate.mdx
 create mode 100644 src/content/reference/en/p5/saturation.mdx
 create mode 100644 src/content/reference/en/p5/save.mdx
 create mode 100644 src/content/reference/en/p5/saveCanvas.mdx
 create mode 100644 src/content/reference/en/p5/saveFrames.mdx
 create mode 100644 src/content/reference/en/p5/saveGif.mdx
 create mode 100644 src/content/reference/en/p5/saveJSON.mdx
 create mode 100644 src/content/reference/en/p5/saveSound.mdx
 create mode 100644 src/content/reference/en/p5/saveStrings.mdx
 create mode 100644 src/content/reference/en/p5/saveTable.mdx
 create mode 100644 src/content/reference/en/p5/scale.mdx
 create mode 100644 src/content/reference/en/p5/second.mdx
 create mode 100644 src/content/reference/en/p5/select.mdx
 create mode 100644 src/content/reference/en/p5/selectAll.mdx
 create mode 100644 src/content/reference/en/p5/set.mdx
 create mode 100644 src/content/reference/en/p5/setAttributes.mdx
 create mode 100644 src/content/reference/en/p5/setBPM.mdx
 create mode 100644 src/content/reference/en/p5/setCamera.mdx
 create mode 100644 src/content/reference/en/p5/setMoveThreshold.mdx
 create mode 100644 src/content/reference/en/p5/setShakeThreshold.mdx
 create mode 100644 src/content/reference/en/p5/setup.mdx
 create mode 100644 src/content/reference/en/p5/shader.mdx
 create mode 100644 src/content/reference/en/p5/shearX.mdx
 create mode 100644 src/content/reference/en/p5/shearY.mdx
 create mode 100644 src/content/reference/en/p5/shininess.mdx
 create mode 100644 src/content/reference/en/p5/shorten.mdx
 create mode 100644 src/content/reference/en/p5/shuffle.mdx
 create mode 100644 src/content/reference/en/p5/sin.mdx
 create mode 100644 src/content/reference/en/p5/smooth.mdx
 create mode 100644 src/content/reference/en/p5/sort.mdx
 create mode 100644 src/content/reference/en/p5/soundFormats.mdx
 create mode 100644 src/content/reference/en/p5/soundOut.mdx
 create mode 100644 src/content/reference/en/p5/specularColor.mdx
 create mode 100644 src/content/reference/en/p5/specularMaterial.mdx
 create mode 100644 src/content/reference/en/p5/sphere.mdx
 create mode 100644 src/content/reference/en/p5/splice.mdx
 create mode 100644 src/content/reference/en/p5/split.mdx
 create mode 100644 src/content/reference/en/p5/splitTokens.mdx
 create mode 100644 src/content/reference/en/p5/spotLight.mdx
 create mode 100644 src/content/reference/en/p5/sq.mdx
 create mode 100644 src/content/reference/en/p5/sqrt.mdx
 create mode 100644 src/content/reference/en/p5/square.mdx
 create mode 100644 src/content/reference/en/p5/storeItem.mdx
 create mode 100644 src/content/reference/en/p5/str.mdx
 create mode 100644 src/content/reference/en/p5/string.mdx
 create mode 100644 src/content/reference/en/p5/stroke.mdx
 create mode 100644 src/content/reference/en/p5/strokeCap.mdx
 create mode 100644 src/content/reference/en/p5/strokeJoin.mdx
 create mode 100644 src/content/reference/en/p5/strokeWeight.mdx
 create mode 100644 src/content/reference/en/p5/subset.mdx
 create mode 100644 src/content/reference/en/p5/tan.mdx
 create mode 100644 src/content/reference/en/p5/textAlign.mdx
 create mode 100644 src/content/reference/en/p5/textAscent.mdx
 create mode 100644 src/content/reference/en/p5/textDescent.mdx
 create mode 100644 src/content/reference/en/p5/textFont.mdx
 create mode 100644 src/content/reference/en/p5/textLeading.mdx
 create mode 100644 src/content/reference/en/p5/textOutput.mdx
 create mode 100644 src/content/reference/en/p5/textSize.mdx
 create mode 100644 src/content/reference/en/p5/textStyle.mdx
 create mode 100644 src/content/reference/en/p5/textWidth.mdx
 create mode 100644 src/content/reference/en/p5/textWrap.mdx
 create mode 100644 src/content/reference/en/p5/textureMode.mdx
 create mode 100644 src/content/reference/en/p5/textureWrap.mdx
 create mode 100644 src/content/reference/en/p5/tint.mdx
 create mode 100644 src/content/reference/en/p5/torus.mdx
 create mode 100644 src/content/reference/en/p5/touchEnded.mdx
 create mode 100644 src/content/reference/en/p5/touchMoved.mdx
 create mode 100644 src/content/reference/en/p5/touchStarted.mdx
 create mode 100644 src/content/reference/en/p5/touches.mdx
 create mode 100644 src/content/reference/en/p5/translate.mdx
 create mode 100644 src/content/reference/en/p5/triangle.mdx
 create mode 100644 src/content/reference/en/p5/trim.mdx
 create mode 100644 src/content/reference/en/p5/turnAxis.mdx
 create mode 100644 src/content/reference/en/p5/unchar.mdx
 create mode 100644 src/content/reference/en/p5/unhex.mdx
 create mode 100644 src/content/reference/en/p5/updatePixels.mdx
 create mode 100644 src/content/reference/en/p5/userStartAudio.mdx
 create mode 100644 src/content/reference/en/p5/vertex.mdx
 create mode 100644 src/content/reference/en/p5/webglVersion.mdx
 create mode 100644 src/content/reference/en/p5/while.mdx
 create mode 100644 src/content/reference/en/p5/width.mdx
 create mode 100644 src/content/reference/en/p5/winMouseX.mdx
 create mode 100644 src/content/reference/en/p5/winMouseY.mdx
 create mode 100644 src/content/reference/en/p5/windowHeight.mdx
 create mode 100644 src/content/reference/en/p5/windowResized.mdx
 create mode 100644 src/content/reference/en/p5/windowWidth.mdx
 create mode 100644 src/content/reference/en/p5/year.mdx

diff --git a/src/content/reference/en/JSON/stringify.mdx b/src/content/reference/en/JSON/stringify.mdx
new file mode 100644
index 0000000000..7713922071
--- /dev/null
+++ b/src/content/reference/en/JSON/stringify.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stringify
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">the
+  MDN entry</a>:
+
+  The JSON.stringify() method converts a JavaScript object or value to a JSON <a
+  href="#/p5/string">string</a>.</p>
+line: 490
+params:
+  - name: object
+    description: |
+      <p>:Javascript object that you would like to convert to JSON</p>
+    type: Object
+itemtype: method
+class: JSON
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let myObject = { x: 5, y: 6 };
+    let myObjectAsString = JSON.stringify(myObject);
+    console.log(myObjectAsString); // prints "{"x":5,"y":6}" to the console
+    console.log(typeof myObjectAsString); // prints 'string' to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# stringify
diff --git a/src/content/reference/en/console/log.mdx b/src/content/reference/en/console/log.mdx
new file mode 100644
index 0000000000..6dc3c2b7d1
--- /dev/null
+++ b/src/content/reference/en/console/log.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: log
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Prints a message to your browser's web console. When using p5, you can use
+  <a href="#/p5/print">print</a>
+
+  and <a href="#/p5/console/log">console.log</a> interchangeably.</p>
+
+  <p>The console is opened differently depending on which browser you are using.
+
+  Here are links on how to open the console in <a
+  href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">Firefox</a>
+
+  , <a
+  href="https://developers.google.com/web/tools/chrome-devtools/open">Chrome</a>,
+  <a
+  href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console">Edge</a>,
+
+  and <a
+  href="https://support.apple.com/en-ca/guide/safari/sfri20948/mac">Safari</a>.
+
+  With the <a href="https://editor.p5js.org/">online p5 editor</a> the console
+
+  is embedded directly in the page underneath the code editor.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Console/log">the MDN
+  entry</a>:
+
+  The Console method log() outputs a message to the web console. The message may
+
+  be a single <a href="#/p5/string">string</a> (with optional substitution
+  values),
+
+  or it may be any one or more JavaScript <a href="#/p5/object">objects</a>.</p>
+line: 512
+params:
+  - name: message
+    description: |
+      <p>:Message that you would like to print to the console</p>
+    type: String|Expression|Object
+itemtype: method
+class: console
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let myNum = 5;
+    console.log(myNum); // prints 5 to the console
+    console.log(myNum + 12); // prints 17 to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# log
diff --git a/src/content/reference/en/index.mdx b/src/content/reference/en/index.mdx
new file mode 100644
index 0000000000..ecdfc3b471
--- /dev/null
+++ b/src/content/reference/en/index.mdx
@@ -0,0 +1,727 @@
+---
+title: Reference
+---
+
+
+# Reference
+
+## p5.sound
+
+### p5.sound
+
+* [getAudioContext](././src/content/reference/en//p5/getAudioContext/)
+* [userStartAudio](././src/content/reference/en//p5/userStartAudio/)
+* [getOutputVolume](././src/content/reference/en//p5/getOutputVolume/)
+* [outputVolume](././src/content/reference/en//p5/outputVolume/)
+* [soundOut](././src/content/reference/en//p5/soundOut/)
+* [sampleRate](././src/content/reference/en//p5/sampleRate/)
+* [freqToMidi](././src/content/reference/en//p5/freqToMidi/)
+* [midiToFreq](././src/content/reference/en//p5/midiToFreq/)
+* [soundFormats](././src/content/reference/en//p5/soundFormats/)
+* [saveSound](././src/content/reference/en//p5/saveSound/)
+* [loadSound](././src/content/reference/en//p5/loadSound/)
+* [createConvolver](././src/content/reference/en//p5/createConvolver/)
+* [setBPM](././src/content/reference/en//p5/setBPM/)
+* [p5.sound](././src/content/reference/en//p5.sound/p5.sound/)
+* [p5.SoundFile](././src/content/reference/en//p5.sound/p5.SoundFile/)
+* [p5.Amplitude](././src/content/reference/en//p5.sound/p5.Amplitude/)
+* [p5.FFT](././src/content/reference/en//p5.sound/p5.FFT/)
+* [p5.Oscillator](././src/content/reference/en//p5.sound/p5.Oscillator/)
+* [p5.SinOsc](././src/content/reference/en//p5.sound/p5.SinOsc/)
+* [p5.TriOsc](././src/content/reference/en//p5.sound/p5.TriOsc/)
+* [p5.SawOsc](././src/content/reference/en//p5.sound/p5.SawOsc/)
+* [p5.SqrOsc](././src/content/reference/en//p5.sound/p5.SqrOsc/)
+* [p5.Envelope](././src/content/reference/en//p5.sound/p5.Envelope/)
+* [p5.Noise](././src/content/reference/en//p5.sound/p5.Noise/)
+* [p5.Pulse](././src/content/reference/en//p5.sound/p5.Pulse/)
+* [p5.AudioIn](././src/content/reference/en//p5.sound/p5.AudioIn/)
+* [p5.Effect](././src/content/reference/en//p5.sound/p5.Effect/)
+* [p5.Filter](././src/content/reference/en//p5.sound/p5.Filter/)
+* [p5.LowPass](././src/content/reference/en//p5.sound/p5.LowPass/)
+* [p5.HighPass](././src/content/reference/en//p5.sound/p5.HighPass/)
+* [p5.BandPass](././src/content/reference/en//p5.sound/p5.BandPass/)
+* [p5.EQ](././src/content/reference/en//p5.sound/p5.EQ/)
+* [p5.Panner3D](././src/content/reference/en//p5.sound/p5.Panner3D/)
+* [p5.Delay](././src/content/reference/en//p5.sound/p5.Delay/)
+* [p5.Reverb](././src/content/reference/en//p5.sound/p5.Reverb/)
+* [p5.Convolver](././src/content/reference/en//p5.sound/p5.Convolver/)
+* [p5.Phrase](././src/content/reference/en//p5.sound/p5.Phrase/)
+* [p5.Part](././src/content/reference/en//p5.sound/p5.Part/)
+* [p5.Score](././src/content/reference/en//p5.sound/p5.Score/)
+* [p5.SoundLoop](././src/content/reference/en//p5.sound/p5.SoundLoop/)
+* [p5.Compressor](././src/content/reference/en//p5.sound/p5.Compressor/)
+* [p5.PeakDetect](././src/content/reference/en//p5.sound/p5.PeakDetect/)
+* [p5.SoundRecorder](././src/content/reference/en//p5.sound/p5.SoundRecorder/)
+* [p5.Distortion](././src/content/reference/en//p5.sound/p5.Distortion/)
+* [p5.Gain](././src/content/reference/en//p5.sound/p5.Gain/)
+* [p5.AudioVoice](././src/content/reference/en//p5.sound/p5.AudioVoice/)
+* [p5.MonoSynth](././src/content/reference/en//p5.sound/p5.MonoSynth/)
+* [p5.OnsetDetect](././src/content/reference/en//p5.sound/p5.OnsetDetect/)
+* [p5.PolySynth](././src/content/reference/en//p5.sound/p5.PolySynth/)
+
+## Environment
+
+### Environment
+
+* [describe](././src/content/reference/en//p5/describe/)
+* [describeElement](././src/content/reference/en//p5/describeElement/)
+* [textOutput](././src/content/reference/en//p5/textOutput/)
+* [gridOutput](././src/content/reference/en//p5/gridOutput/)
+* [print](././src/content/reference/en//p5/print/)
+* [frameCount](././src/content/reference/en//p5/frameCount/)
+* [deltaTime](././src/content/reference/en//p5/deltaTime/)
+* [focused](././src/content/reference/en//p5/focused/)
+* [cursor](././src/content/reference/en//p5/cursor/)
+* [frameRate](././src/content/reference/en//p5/frameRate/)
+* [getTargetFrameRate](././src/content/reference/en//p5/getTargetFrameRate/)
+* [noCursor](././src/content/reference/en//p5/noCursor/)
+* [webglVersion](././src/content/reference/en//p5/webglVersion/)
+* [displayWidth](././src/content/reference/en//p5/displayWidth/)
+* [displayHeight](././src/content/reference/en//p5/displayHeight/)
+* [windowWidth](././src/content/reference/en//p5/windowWidth/)
+* [windowHeight](././src/content/reference/en//p5/windowHeight/)
+* [windowResized](././src/content/reference/en//p5/windowResized/)
+* [width](././src/content/reference/en//p5/width/)
+* [height](././src/content/reference/en//p5/height/)
+* [fullscreen](././src/content/reference/en//p5/fullscreen/)
+* [pixelDensity](././src/content/reference/en//p5/pixelDensity/)
+* [displayDensity](././src/content/reference/en//p5/displayDensity/)
+* [getURL](././src/content/reference/en//p5/getURL/)
+* [getURLPath](././src/content/reference/en//p5/getURLPath/)
+* [getURLParams](././src/content/reference/en//p5/getURLParams/)
+
+## Color
+
+### Creating & Reading
+
+* [alpha](././src/content/reference/en//p5/alpha/)
+* [blue](././src/content/reference/en//p5/blue/)
+* [brightness](././src/content/reference/en//p5/brightness/)
+* [color](././src/content/reference/en//p5/color/)
+* [green](././src/content/reference/en//p5/green/)
+* [hue](././src/content/reference/en//p5/hue/)
+* [lerpColor](././src/content/reference/en//p5/lerpColor/)
+* [lightness](././src/content/reference/en//p5/lightness/)
+* [red](././src/content/reference/en//p5/red/)
+* [saturation](././src/content/reference/en//p5/saturation/)
+* [p5.Color](././src/content/reference/en//p5/p5.Color/)
+
+### Setting
+
+* [beginClip](././src/content/reference/en//p5/beginClip/)
+* [endClip](././src/content/reference/en//p5/endClip/)
+* [clip](././src/content/reference/en//p5/clip/)
+* [background](././src/content/reference/en//p5/background/)
+* [clear](././src/content/reference/en//p5/clear/)
+* [colorMode](././src/content/reference/en//p5/colorMode/)
+* [fill](././src/content/reference/en//p5/fill/)
+* [noFill](././src/content/reference/en//p5/noFill/)
+* [noStroke](././src/content/reference/en//p5/noStroke/)
+* [stroke](././src/content/reference/en//p5/stroke/)
+* [erase](././src/content/reference/en//p5/erase/)
+* [noErase](././src/content/reference/en//p5/noErase/)
+
+## Shape
+
+### 2D Primitives
+
+* [arc](././src/content/reference/en//p5/arc/)
+* [ellipse](././src/content/reference/en//p5/ellipse/)
+* [circle](././src/content/reference/en//p5/circle/)
+* [line](././src/content/reference/en//p5/line/)
+* [point](././src/content/reference/en//p5/point/)
+* [quad](././src/content/reference/en//p5/quad/)
+* [rect](././src/content/reference/en//p5/rect/)
+* [square](././src/content/reference/en//p5/square/)
+* [triangle](././src/content/reference/en//p5/triangle/)
+
+### Attributes
+
+* [ellipseMode](././src/content/reference/en//p5/ellipseMode/)
+* [noSmooth](././src/content/reference/en//p5/noSmooth/)
+* [rectMode](././src/content/reference/en//p5/rectMode/)
+* [smooth](././src/content/reference/en//p5/smooth/)
+* [strokeCap](././src/content/reference/en//p5/strokeCap/)
+* [strokeJoin](././src/content/reference/en//p5/strokeJoin/)
+* [strokeWeight](././src/content/reference/en//p5/strokeWeight/)
+
+### Curves
+
+* [bezier](././src/content/reference/en//p5/bezier/)
+* [bezierDetail](././src/content/reference/en//p5/bezierDetail/)
+* [bezierPoint](././src/content/reference/en//p5/bezierPoint/)
+* [bezierTangent](././src/content/reference/en//p5/bezierTangent/)
+* [curve](././src/content/reference/en//p5/curve/)
+* [curveDetail](././src/content/reference/en//p5/curveDetail/)
+* [curveTightness](././src/content/reference/en//p5/curveTightness/)
+* [curvePoint](././src/content/reference/en//p5/curvePoint/)
+* [curveTangent](././src/content/reference/en//p5/curveTangent/)
+
+### Vertex
+
+* [beginContour](././src/content/reference/en//p5/beginContour/)
+* [beginShape](././src/content/reference/en//p5/beginShape/)
+* [bezierVertex](././src/content/reference/en//p5/bezierVertex/)
+* [curveVertex](././src/content/reference/en//p5/curveVertex/)
+* [endContour](././src/content/reference/en//p5/endContour/)
+* [endShape](././src/content/reference/en//p5/endShape/)
+* [quadraticVertex](././src/content/reference/en//p5/quadraticVertex/)
+* [vertex](././src/content/reference/en//p5/vertex/)
+* [normal](././src/content/reference/en//p5/normal/)
+
+### 3D Primitives
+
+* [beginGeometry](././src/content/reference/en//p5/beginGeometry/)
+* [endGeometry](././src/content/reference/en//p5/endGeometry/)
+* [buildGeometry](././src/content/reference/en//p5/buildGeometry/)
+* [freeGeometry](././src/content/reference/en//p5/freeGeometry/)
+* [plane](././src/content/reference/en//p5/plane/)
+* [box](././src/content/reference/en//p5/box/)
+* [sphere](././src/content/reference/en//p5/sphere/)
+* [cylinder](././src/content/reference/en//p5/cylinder/)
+* [cone](././src/content/reference/en//p5/cone/)
+* [ellipsoid](././src/content/reference/en//p5/ellipsoid/)
+* [torus](././src/content/reference/en//p5/torus/)
+* [p5.Geometry](././src/content/reference/en//p5/p5.Geometry/)
+
+### 3D Models
+
+* [loadModel](././src/content/reference/en//p5/loadModel/)
+* [model](././src/content/reference/en//p5/model/)
+
+## Constants
+
+### Constants
+
+* [VERSION](././src/content/reference/en//p5/VERSION/)
+* [P2D](././src/content/reference/en//p5/P2D/)
+* [WEBGL](././src/content/reference/en//p5/WEBGL/)
+* [WEBGL2](././src/content/reference/en//p5/WEBGL2/)
+* [ARROW](././src/content/reference/en//p5/ARROW/)
+* [CROSS](././src/content/reference/en//p5/CROSS/)
+* [HAND](././src/content/reference/en//p5/HAND/)
+* [MOVE](././src/content/reference/en//p5/MOVE/)
+* [TEXT](././src/content/reference/en//p5/TEXT/)
+* [WAIT](././src/content/reference/en//p5/WAIT/)
+* [HALF\_PI](././src/content/reference/en//p5/HALF_PI/)
+* [PI](././src/content/reference/en//p5/PI/)
+* [QUARTER\_PI](././src/content/reference/en//p5/QUARTER_PI/)
+* [TAU](././src/content/reference/en//p5/TAU/)
+* [TWO\_PI](././src/content/reference/en//p5/TWO_PI/)
+* [DEGREES](././src/content/reference/en//p5/DEGREES/)
+* [RADIANS](././src/content/reference/en//p5/RADIANS/)
+* [CORNER](././src/content/reference/en//p5/CORNER/)
+* [CORNERS](././src/content/reference/en//p5/CORNERS/)
+* [RADIUS](././src/content/reference/en//p5/RADIUS/)
+* [RIGHT](././src/content/reference/en//p5/RIGHT/)
+* [LEFT](././src/content/reference/en//p5/LEFT/)
+* [CENTER](././src/content/reference/en//p5/CENTER/)
+* [TOP](././src/content/reference/en//p5/TOP/)
+* [BOTTOM](././src/content/reference/en//p5/BOTTOM/)
+* [BASELINE](././src/content/reference/en//p5/BASELINE/)
+* [POINTS](././src/content/reference/en//p5/POINTS/)
+* [LINES](././src/content/reference/en//p5/LINES/)
+* [LINE\_STRIP](././src/content/reference/en//p5/LINE_STRIP/)
+* [LINE\_LOOP](././src/content/reference/en//p5/LINE_LOOP/)
+* [TRIANGLES](././src/content/reference/en//p5/TRIANGLES/)
+* [TRIANGLE\_FAN](././src/content/reference/en//p5/TRIANGLE_FAN/)
+* [TRIANGLE\_STRIP](././src/content/reference/en//p5/TRIANGLE_STRIP/)
+* [QUADS](././src/content/reference/en//p5/QUADS/)
+* [QUAD\_STRIP](././src/content/reference/en//p5/QUAD_STRIP/)
+* [TESS](././src/content/reference/en//p5/TESS/)
+* [CLOSE](././src/content/reference/en//p5/CLOSE/)
+* [OPEN](././src/content/reference/en//p5/OPEN/)
+* [CHORD](././src/content/reference/en//p5/CHORD/)
+* [PIE](././src/content/reference/en//p5/PIE/)
+* [PROJECT](././src/content/reference/en//p5/PROJECT/)
+* [SQUARE](././src/content/reference/en//p5/SQUARE/)
+* [ROUND](././src/content/reference/en//p5/ROUND/)
+* [BEVEL](././src/content/reference/en//p5/BEVEL/)
+* [MITER](././src/content/reference/en//p5/MITER/)
+* [RGB](././src/content/reference/en//p5/RGB/)
+* [HSB](././src/content/reference/en//p5/HSB/)
+* [HSL](././src/content/reference/en//p5/HSL/)
+* [AUTO](././src/content/reference/en//p5/AUTO/)
+* [ALT](././src/content/reference/en//p5/ALT/)
+* [BACKSPACE](././src/content/reference/en//p5/BACKSPACE/)
+* [CONTROL](././src/content/reference/en//p5/CONTROL/)
+* [DELETE](././src/content/reference/en//p5/DELETE/)
+* [DOWN\_ARROW](././src/content/reference/en//p5/DOWN_ARROW/)
+* [ENTER](././src/content/reference/en//p5/ENTER/)
+* [ESCAPE](././src/content/reference/en//p5/ESCAPE/)
+* [LEFT\_ARROW](././src/content/reference/en//p5/LEFT_ARROW/)
+* [OPTION](././src/content/reference/en//p5/OPTION/)
+* [RETURN](././src/content/reference/en//p5/RETURN/)
+* [RIGHT\_ARROW](././src/content/reference/en//p5/RIGHT_ARROW/)
+* [SHIFT](././src/content/reference/en//p5/SHIFT/)
+* [TAB](././src/content/reference/en//p5/TAB/)
+* [UP\_ARROW](././src/content/reference/en//p5/UP_ARROW/)
+* [BLEND](././src/content/reference/en//p5/BLEND/)
+* [REMOVE](././src/content/reference/en//p5/REMOVE/)
+* [ADD](././src/content/reference/en//p5/ADD/)
+* [DARKEST](././src/content/reference/en//p5/DARKEST/)
+* [LIGHTEST](././src/content/reference/en//p5/LIGHTEST/)
+* [DIFFERENCE](././src/content/reference/en//p5/DIFFERENCE/)
+* [SUBTRACT](././src/content/reference/en//p5/SUBTRACT/)
+* [EXCLUSION](././src/content/reference/en//p5/EXCLUSION/)
+* [MULTIPLY](././src/content/reference/en//p5/MULTIPLY/)
+* [SCREEN](././src/content/reference/en//p5/SCREEN/)
+* [REPLACE](././src/content/reference/en//p5/REPLACE/)
+* [OVERLAY](././src/content/reference/en//p5/OVERLAY/)
+* [HARD\_LIGHT](././src/content/reference/en//p5/HARD_LIGHT/)
+* [SOFT\_LIGHT](././src/content/reference/en//p5/SOFT_LIGHT/)
+* [DODGE](././src/content/reference/en//p5/DODGE/)
+* [BURN](././src/content/reference/en//p5/BURN/)
+* [THRESHOLD](././src/content/reference/en//p5/THRESHOLD/)
+* [GRAY](././src/content/reference/en//p5/GRAY/)
+* [OPAQUE](././src/content/reference/en//p5/OPAQUE/)
+* [INVERT](././src/content/reference/en//p5/INVERT/)
+* [POSTERIZE](././src/content/reference/en//p5/POSTERIZE/)
+* [DILATE](././src/content/reference/en//p5/DILATE/)
+* [ERODE](././src/content/reference/en//p5/ERODE/)
+* [BLUR](././src/content/reference/en//p5/BLUR/)
+* [NORMAL](././src/content/reference/en//p5/NORMAL/)
+* [ITALIC](././src/content/reference/en//p5/ITALIC/)
+* [BOLD](././src/content/reference/en//p5/BOLD/)
+* [BOLDITALIC](././src/content/reference/en//p5/BOLDITALIC/)
+* [CHAR](././src/content/reference/en//p5/CHAR/)
+* [WORD](././src/content/reference/en//p5/WORD/)
+* [LINEAR](././src/content/reference/en//p5/LINEAR/)
+* [QUADRATIC](././src/content/reference/en//p5/QUADRATIC/)
+* [BEZIER](././src/content/reference/en//p5/BEZIER/)
+* [CURVE](././src/content/reference/en//p5/CURVE/)
+* [STROKE](././src/content/reference/en//p5/STROKE/)
+* [FILL](././src/content/reference/en//p5/FILL/)
+* [TEXTURE](././src/content/reference/en//p5/TEXTURE/)
+* [IMMEDIATE](././src/content/reference/en//p5/IMMEDIATE/)
+* [IMAGE](././src/content/reference/en//p5/IMAGE/)
+* [NEAREST](././src/content/reference/en//p5/NEAREST/)
+* [REPEAT](././src/content/reference/en//p5/REPEAT/)
+* [CLAMP](././src/content/reference/en//p5/CLAMP/)
+* [MIRROR](././src/content/reference/en//p5/MIRROR/)
+* [FLAT](././src/content/reference/en//p5/FLAT/)
+* [SMOOTH](././src/content/reference/en//p5/SMOOTH/)
+* [LANDSCAPE](././src/content/reference/en//p5/LANDSCAPE/)
+* [PORTRAIT](././src/content/reference/en//p5/PORTRAIT/)
+* [GRID](././src/content/reference/en//p5/GRID/)
+* [AXES](././src/content/reference/en//p5/AXES/)
+* [LABEL](././src/content/reference/en//p5/LABEL/)
+* [FALLBACK](././src/content/reference/en//p5/FALLBACK/)
+* [CONTAIN](././src/content/reference/en//p5/CONTAIN/)
+* [COVER](././src/content/reference/en//p5/COVER/)
+* [UNSIGNED\_BYTE](././src/content/reference/en//p5/UNSIGNED_BYTE/)
+* [UNSIGNED\_INT](././src/content/reference/en//p5/UNSIGNED_INT/)
+* [FLOAT](././src/content/reference/en//p5/FLOAT/)
+* [HALF\_FLOAT](././src/content/reference/en//p5/HALF_FLOAT/)
+* [RGBA](././src/content/reference/en//p5/RGBA/)
+
+## Structure
+
+### Structure
+
+* [preload](././src/content/reference/en//p5/preload/)
+* [setup](././src/content/reference/en//p5/setup/)
+* [draw](././src/content/reference/en//p5/draw/)
+* [remove](././src/content/reference/en//p5/remove/)
+* [disableFriendlyErrors](././src/content/reference/en//p5/disableFriendlyErrors/)
+* [noLoop](././src/content/reference/en//p5/noLoop/)
+* [loop](././src/content/reference/en//p5/loop/)
+* [isLooping](././src/content/reference/en//p5/isLooping/)
+* [push](././src/content/reference/en//p5/push/)
+* [pop](././src/content/reference/en//p5/pop/)
+* [redraw](././src/content/reference/en//p5/redraw/)
+* [p5](././src/content/reference/en//p5/p5/)
+
+## Foundation
+
+### Foundation
+
+* [let](././src/content/reference/en//p5/let/)
+* [const](././src/content/reference/en//p5/const/)
+* [===](././src/content/reference/en//p5/===/)
+* [>](././src/content/reference/en//p5/>/)
+* [>=](././src/content/reference/en//p5/>=/)
+* [\<](././src/content/reference/en//p5/\</)
+* [\<=](././src/content/reference/en//p5/\<=/)
+* [if-else](././src/content/reference/en//p5/if-else/)
+* [function](././src/content/reference/en//p5/function/)
+* [return](././src/content/reference/en//p5/return/)
+* [boolean](././src/content/reference/en//p5/boolean/)
+* [string](././src/content/reference/en//p5/string/)
+* [number](././src/content/reference/en//p5/number/)
+* [object](././src/content/reference/en//p5/object/)
+* [class](././src/content/reference/en//p5/class/)
+* [for](././src/content/reference/en//p5/for/)
+* [while](././src/content/reference/en//p5/while/)
+* [JSON](././src/content/reference/en//p5/JSON/)
+* [console](././src/content/reference/en//p5/console/)
+
+## Rendering
+
+### Rendering
+
+* [createCanvas](././src/content/reference/en//p5/createCanvas/)
+* [resizeCanvas](././src/content/reference/en//p5/resizeCanvas/)
+* [noCanvas](././src/content/reference/en//p5/noCanvas/)
+* [createGraphics](././src/content/reference/en//p5/createGraphics/)
+* [createFramebuffer](././src/content/reference/en//p5/createFramebuffer/)
+* [clearDepth](././src/content/reference/en//p5/clearDepth/)
+* [blendMode](././src/content/reference/en//p5/blendMode/)
+* [drawingContext](././src/content/reference/en//p5/drawingContext/)
+* [setAttributes](././src/content/reference/en//p5/setAttributes/)
+* [p5.Graphics](././src/content/reference/en//p5/p5.Graphics/)
+* [p5.Renderer](././src/content/reference/en//p5/p5.Renderer/)
+* [p5.Framebuffer](././src/content/reference/en//p5/p5.Framebuffer/)
+
+## Transform
+
+### Transform
+
+* [applyMatrix](././src/content/reference/en//p5/applyMatrix/)
+* [resetMatrix](././src/content/reference/en//p5/resetMatrix/)
+* [rotate](././src/content/reference/en//p5/rotate/)
+* [rotateX](././src/content/reference/en//p5/rotateX/)
+* [rotateY](././src/content/reference/en//p5/rotateY/)
+* [rotateZ](././src/content/reference/en//p5/rotateZ/)
+* [scale](././src/content/reference/en//p5/scale/)
+* [shearX](././src/content/reference/en//p5/shearX/)
+* [shearY](././src/content/reference/en//p5/shearY/)
+* [translate](././src/content/reference/en//p5/translate/)
+
+## Data
+
+### LocalStorage
+
+* [storeItem](././src/content/reference/en//p5/storeItem/)
+* [getItem](././src/content/reference/en//p5/getItem/)
+* [clearStorage](././src/content/reference/en//p5/clearStorage/)
+* [removeItem](././src/content/reference/en//p5/removeItem/)
+
+### Dictionary
+
+* [createStringDict](././src/content/reference/en//p5/createStringDict/)
+* [createNumberDict](././src/content/reference/en//p5/createNumberDict/)
+* [p5.StringDict](././src/content/reference/en//p5/p5.StringDict/)
+* [p5.TypedDict](././src/content/reference/en//p5/p5.TypedDict/)
+* [p5.NumberDict](././src/content/reference/en//p5/p5.NumberDict/)
+
+### Array Functions
+
+* [append](././src/content/reference/en//p5/append/)
+* [arrayCopy](././src/content/reference/en//p5/arrayCopy/)
+* [concat](././src/content/reference/en//p5/concat/)
+* [reverse](././src/content/reference/en//p5/reverse/)
+* [shorten](././src/content/reference/en//p5/shorten/)
+* [shuffle](././src/content/reference/en//p5/shuffle/)
+* [sort](././src/content/reference/en//p5/sort/)
+* [splice](././src/content/reference/en//p5/splice/)
+* [subset](././src/content/reference/en//p5/subset/)
+
+### Conversion
+
+* [float](././src/content/reference/en//p5/float/)
+* [int](././src/content/reference/en//p5/int/)
+* [str](././src/content/reference/en//p5/str/)
+* [boolean](././src/content/reference/en//p5/boolean/)
+* [byte](././src/content/reference/en//p5/byte/)
+* [char](././src/content/reference/en//p5/char/)
+* [unchar](././src/content/reference/en//p5/unchar/)
+* [hex](././src/content/reference/en//p5/hex/)
+* [unhex](././src/content/reference/en//p5/unhex/)
+
+### String Functions
+
+* [join](././src/content/reference/en//p5/join/)
+* [match](././src/content/reference/en//p5/match/)
+* [matchAll](././src/content/reference/en//p5/matchAll/)
+* [nf](././src/content/reference/en//p5/nf/)
+* [nfc](././src/content/reference/en//p5/nfc/)
+* [nfp](././src/content/reference/en//p5/nfp/)
+* [nfs](././src/content/reference/en//p5/nfs/)
+* [split](././src/content/reference/en//p5/split/)
+* [splitTokens](././src/content/reference/en//p5/splitTokens/)
+* [trim](././src/content/reference/en//p5/trim/)
+
+## DOM
+
+### DOM
+
+* [select](././src/content/reference/en//p5/select/)
+* [selectAll](././src/content/reference/en//p5/selectAll/)
+* [removeElements](././src/content/reference/en//p5/removeElements/)
+* [changed](././src/content/reference/en//p5/changed/)
+* [input](././src/content/reference/en//p5/input/)
+* [createDiv](././src/content/reference/en//p5/createDiv/)
+* [createP](././src/content/reference/en//p5/createP/)
+* [createSpan](././src/content/reference/en//p5/createSpan/)
+* [createImg](././src/content/reference/en//p5/createImg/)
+* [createA](././src/content/reference/en//p5/createA/)
+* [createSlider](././src/content/reference/en//p5/createSlider/)
+* [createButton](././src/content/reference/en//p5/createButton/)
+* [createCheckbox](././src/content/reference/en//p5/createCheckbox/)
+* [createSelect](././src/content/reference/en//p5/createSelect/)
+* [createRadio](././src/content/reference/en//p5/createRadio/)
+* [createColorPicker](././src/content/reference/en//p5/createColorPicker/)
+* [createInput](././src/content/reference/en//p5/createInput/)
+* [createFileInput](././src/content/reference/en//p5/createFileInput/)
+* [createVideo](././src/content/reference/en//p5/createVideo/)
+* [createAudio](././src/content/reference/en//p5/createAudio/)
+* [createCapture](././src/content/reference/en//p5/createCapture/)
+* [createElement](././src/content/reference/en//p5/createElement/)
+* [p5.Element](././src/content/reference/en//p5/p5.Element/)
+* [p5.MediaElement](././src/content/reference/en//p5/p5.MediaElement/)
+* [p5.File](././src/content/reference/en//p5/p5.File/)
+
+## Events
+
+### Acceleration
+
+* [deviceOrientation](././src/content/reference/en//p5/deviceOrientation/)
+* [accelerationX](././src/content/reference/en//p5/accelerationX/)
+* [accelerationY](././src/content/reference/en//p5/accelerationY/)
+* [accelerationZ](././src/content/reference/en//p5/accelerationZ/)
+* [pAccelerationX](././src/content/reference/en//p5/pAccelerationX/)
+* [pAccelerationY](././src/content/reference/en//p5/pAccelerationY/)
+* [pAccelerationZ](././src/content/reference/en//p5/pAccelerationZ/)
+* [rotationX](././src/content/reference/en//p5/rotationX/)
+* [rotationY](././src/content/reference/en//p5/rotationY/)
+* [rotationZ](././src/content/reference/en//p5/rotationZ/)
+* [pRotationX](././src/content/reference/en//p5/pRotationX/)
+* [pRotationY](././src/content/reference/en//p5/pRotationY/)
+* [pRotationZ](././src/content/reference/en//p5/pRotationZ/)
+* [turnAxis](././src/content/reference/en//p5/turnAxis/)
+* [setMoveThreshold](././src/content/reference/en//p5/setMoveThreshold/)
+* [setShakeThreshold](././src/content/reference/en//p5/setShakeThreshold/)
+* [deviceMoved](././src/content/reference/en//p5/deviceMoved/)
+* [deviceTurned](././src/content/reference/en//p5/deviceTurned/)
+* [deviceShaken](././src/content/reference/en//p5/deviceShaken/)
+
+### Keyboard
+
+* [keyIsPressed](././src/content/reference/en//p5/keyIsPressed/)
+* [key](././src/content/reference/en//p5/key/)
+* [keyCode](././src/content/reference/en//p5/keyCode/)
+* [keyPressed](././src/content/reference/en//p5/keyPressed/)
+* [keyReleased](././src/content/reference/en//p5/keyReleased/)
+* [keyTyped](././src/content/reference/en//p5/keyTyped/)
+* [keyIsDown](././src/content/reference/en//p5/keyIsDown/)
+
+### Mouse
+
+* [movedX](././src/content/reference/en//p5/movedX/)
+* [movedY](././src/content/reference/en//p5/movedY/)
+* [mouseX](././src/content/reference/en//p5/mouseX/)
+* [mouseY](././src/content/reference/en//p5/mouseY/)
+* [pmouseX](././src/content/reference/en//p5/pmouseX/)
+* [pmouseY](././src/content/reference/en//p5/pmouseY/)
+* [winMouseX](././src/content/reference/en//p5/winMouseX/)
+* [winMouseY](././src/content/reference/en//p5/winMouseY/)
+* [pwinMouseX](././src/content/reference/en//p5/pwinMouseX/)
+* [pwinMouseY](././src/content/reference/en//p5/pwinMouseY/)
+* [mouseButton](././src/content/reference/en//p5/mouseButton/)
+* [mouseIsPressed](././src/content/reference/en//p5/mouseIsPressed/)
+* [mouseMoved](././src/content/reference/en//p5/mouseMoved/)
+* [mouseDragged](././src/content/reference/en//p5/mouseDragged/)
+* [mousePressed](././src/content/reference/en//p5/mousePressed/)
+* [mouseReleased](././src/content/reference/en//p5/mouseReleased/)
+* [mouseClicked](././src/content/reference/en//p5/mouseClicked/)
+* [doubleClicked](././src/content/reference/en//p5/doubleClicked/)
+* [mouseWheel](././src/content/reference/en//p5/mouseWheel/)
+* [requestPointerLock](././src/content/reference/en//p5/requestPointerLock/)
+* [exitPointerLock](././src/content/reference/en//p5/exitPointerLock/)
+
+### Touch
+
+* [touches](././src/content/reference/en//p5/touches/)
+* [touchStarted](././src/content/reference/en//p5/touchStarted/)
+* [touchMoved](././src/content/reference/en//p5/touchMoved/)
+* [touchEnded](././src/content/reference/en//p5/touchEnded/)
+
+## Image
+
+### Image
+
+* [createImage](././src/content/reference/en//p5/createImage/)
+* [saveCanvas](././src/content/reference/en//p5/saveCanvas/)
+* [saveFrames](././src/content/reference/en//p5/saveFrames/)
+* [p5.Image](././src/content/reference/en//p5/p5.Image/)
+
+### Loading & Displaying
+
+* [loadImage](././src/content/reference/en//p5/loadImage/)
+* [saveGif](././src/content/reference/en//p5/saveGif/)
+* [image](././src/content/reference/en//p5/image/)
+* [tint](././src/content/reference/en//p5/tint/)
+* [noTint](././src/content/reference/en//p5/noTint/)
+* [imageMode](././src/content/reference/en//p5/imageMode/)
+
+### Pixels
+
+* [pixels](././src/content/reference/en//p5/pixels/)
+* [blend](././src/content/reference/en//p5/blend/)
+* [copy](././src/content/reference/en//p5/copy/)
+* [filter](././src/content/reference/en//p5/filter/)
+* [get](././src/content/reference/en//p5/get/)
+* [loadPixels](././src/content/reference/en//p5/loadPixels/)
+* [set](././src/content/reference/en//p5/set/)
+* [updatePixels](././src/content/reference/en//p5/updatePixels/)
+
+## IO
+
+### Input
+
+* [loadJSON](././src/content/reference/en//p5/loadJSON/)
+* [loadStrings](././src/content/reference/en//p5/loadStrings/)
+* [loadTable](././src/content/reference/en//p5/loadTable/)
+* [loadXML](././src/content/reference/en//p5/loadXML/)
+* [loadBytes](././src/content/reference/en//p5/loadBytes/)
+* [httpGet](././src/content/reference/en//p5/httpGet/)
+* [httpPost](././src/content/reference/en//p5/httpPost/)
+* [httpDo](././src/content/reference/en//p5/httpDo/)
+* [p5.XML](././src/content/reference/en//p5/p5.XML/)
+
+### Output
+
+* [createWriter](././src/content/reference/en//p5/createWriter/)
+* [save](././src/content/reference/en//p5/save/)
+* [saveJSON](././src/content/reference/en//p5/saveJSON/)
+* [saveStrings](././src/content/reference/en//p5/saveStrings/)
+* [saveTable](././src/content/reference/en//p5/saveTable/)
+* [p5.PrintWriter](././src/content/reference/en//p5/p5.PrintWriter/)
+* [p5](././src/content/reference/en//p5/p5/)
+
+### Time & Date
+
+* [day](././src/content/reference/en//p5/day/)
+* [hour](././src/content/reference/en//p5/hour/)
+* [minute](././src/content/reference/en//p5/minute/)
+* [millis](././src/content/reference/en//p5/millis/)
+* [month](././src/content/reference/en//p5/month/)
+* [second](././src/content/reference/en//p5/second/)
+* [year](././src/content/reference/en//p5/year/)
+
+### Table
+
+* [p5.Table](././src/content/reference/en//p5/p5.Table/)
+* [p5.TableRow](././src/content/reference/en//p5/p5.TableRow/)
+
+## Math
+
+### Calculation
+
+* [abs](././src/content/reference/en//p5/abs/)
+* [ceil](././src/content/reference/en//p5/ceil/)
+* [constrain](././src/content/reference/en//p5/constrain/)
+* [dist](././src/content/reference/en//p5/dist/)
+* [exp](././src/content/reference/en//p5/exp/)
+* [floor](././src/content/reference/en//p5/floor/)
+* [lerp](././src/content/reference/en//p5/lerp/)
+* [log](././src/content/reference/en//p5/log/)
+* [mag](././src/content/reference/en//p5/mag/)
+* [map](././src/content/reference/en//p5/map/)
+* [max](././src/content/reference/en//p5/max/)
+* [min](././src/content/reference/en//p5/min/)
+* [norm](././src/content/reference/en//p5/norm/)
+* [pow](././src/content/reference/en//p5/pow/)
+* [round](././src/content/reference/en//p5/round/)
+* [sq](././src/content/reference/en//p5/sq/)
+* [sqrt](././src/content/reference/en//p5/sqrt/)
+* [fract](././src/content/reference/en//p5/fract/)
+
+### Vector
+
+* [createVector](././src/content/reference/en//p5/createVector/)
+* [p5.Vector](././src/content/reference/en//p5/p5.Vector/)
+
+### Noise
+
+* [noise](././src/content/reference/en//p5/noise/)
+* [noiseDetail](././src/content/reference/en//p5/noiseDetail/)
+* [noiseSeed](././src/content/reference/en//p5/noiseSeed/)
+
+### Random
+
+* [randomSeed](././src/content/reference/en//p5/randomSeed/)
+* [random](././src/content/reference/en//p5/random/)
+* [randomGaussian](././src/content/reference/en//p5/randomGaussian/)
+
+### Trigonometry
+
+* [acos](././src/content/reference/en//p5/acos/)
+* [asin](././src/content/reference/en//p5/asin/)
+* [atan](././src/content/reference/en//p5/atan/)
+* [atan2](././src/content/reference/en//p5/atan2/)
+* [cos](././src/content/reference/en//p5/cos/)
+* [sin](././src/content/reference/en//p5/sin/)
+* [tan](././src/content/reference/en//p5/tan/)
+* [degrees](././src/content/reference/en//p5/degrees/)
+* [radians](././src/content/reference/en//p5/radians/)
+* [angleMode](././src/content/reference/en//p5/angleMode/)
+
+## Typography
+
+### Attributes
+
+* [textAlign](././src/content/reference/en//p5/textAlign/)
+* [textLeading](././src/content/reference/en//p5/textLeading/)
+* [textSize](././src/content/reference/en//p5/textSize/)
+* [textStyle](././src/content/reference/en//p5/textStyle/)
+* [textWidth](././src/content/reference/en//p5/textWidth/)
+* [textAscent](././src/content/reference/en//p5/textAscent/)
+* [textDescent](././src/content/reference/en//p5/textDescent/)
+* [textWrap](././src/content/reference/en//p5/textWrap/)
+
+### Loading & Displaying
+
+* [loadFont](././src/content/reference/en//p5/loadFont/)
+* [text](././src/content/reference/en//p5/text/)
+* [textFont](././src/content/reference/en//p5/textFont/)
+* [p5.Font](././src/content/reference/en//p5/p5.Font/)
+
+## 3D
+
+### Interaction
+
+* [orbitControl](././src/content/reference/en//p5/orbitControl/)
+* [debugMode](././src/content/reference/en//p5/debugMode/)
+* [noDebugMode](././src/content/reference/en//p5/noDebugMode/)
+
+### Lights
+
+* [ambientLight](././src/content/reference/en//p5/ambientLight/)
+* [specularColor](././src/content/reference/en//p5/specularColor/)
+* [directionalLight](././src/content/reference/en//p5/directionalLight/)
+* [pointLight](././src/content/reference/en//p5/pointLight/)
+* [imageLight](././src/content/reference/en//p5/imageLight/)
+* [lights](././src/content/reference/en//p5/lights/)
+* [lightFalloff](././src/content/reference/en//p5/lightFalloff/)
+* [spotLight](././src/content/reference/en//p5/spotLight/)
+* [noLights](././src/content/reference/en//p5/noLights/)
+
+### Material
+
+* [loadShader](././src/content/reference/en//p5/loadShader/)
+* [createShader](././src/content/reference/en//p5/createShader/)
+* [createFilterShader](././src/content/reference/en//p5/createFilterShader/)
+* [shader](././src/content/reference/en//p5/shader/)
+* [resetShader](././src/content/reference/en//p5/resetShader/)
+* [texture](././src/content/reference/en//p5/texture/)
+* [textureMode](././src/content/reference/en//p5/textureMode/)
+* [textureWrap](././src/content/reference/en//p5/textureWrap/)
+* [normalMaterial](././src/content/reference/en//p5/normalMaterial/)
+* [ambientMaterial](././src/content/reference/en//p5/ambientMaterial/)
+* [emissiveMaterial](././src/content/reference/en//p5/emissiveMaterial/)
+* [specularMaterial](././src/content/reference/en//p5/specularMaterial/)
+* [shininess](././src/content/reference/en//p5/shininess/)
+* [metalness](././src/content/reference/en//p5/metalness/)
+* [p5.Shader](././src/content/reference/en//p5/p5.Shader/)
+
+### Camera
+
+* [perspective](././src/content/reference/en//p5/perspective/)
+* [ortho](././src/content/reference/en//p5/ortho/)
+* [frustum](././src/content/reference/en//p5/frustum/)
+* [createCamera](././src/content/reference/en//p5/createCamera/)
+* [setCamera](././src/content/reference/en//p5/setCamera/)
+* [camera](././src/content/reference/en//p5/camera/)
+* [p5.Camera](././src/content/reference/en//p5/p5.Camera/)
diff --git a/src/content/reference/en/p5.Amplitude/getLevel.mdx b/src/content/reference/en/p5.Amplitude/getLevel.mdx
new file mode 100644
index 0000000000..3e49d7862d
--- /dev/null
+++ b/src/content/reference/en/p5.Amplitude/getLevel.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getLevel
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a single Amplitude reading at the moment it is called.
+  For continuous readings, run in the draw loop.</p>
+line: 3209
+params:
+  - name: channel
+    description: |
+      <p>Optionally return only channel 0 (left) or 1 (right)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Amplitude
+example:
+  - |-
+
+    <div><code>
+    function preload(){
+      sound = loadSound('assets/beat.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mouseClicked(toggleSound);
+      amplitude = new p5.Amplitude();
+    }
+
+    function draw() {
+      background(220, 150);
+      textAlign(CENTER);
+      text('tap to play', width/2, 20);
+
+      let level = amplitude.getLevel();
+      let size = map(level, 0, 1, 0, 200);
+      ellipse(width/2, height/2, size, size);
+    }
+
+    function toggleSound(){
+      if (sound.isPlaying()) {
+        sound.stop();
+      } else {
+        sound.play();
+      }
+    }
+    </code></div>
+return:
+  description: Amplitude as a number between 0.0 and 1.0
+  type: Number
+chainable: false
+---
+
+
+# getLevel
diff --git a/src/content/reference/en/p5.Amplitude/setInput.mdx b/src/content/reference/en/p5.Amplitude/setInput.mdx
new file mode 100644
index 0000000000..7d76706367
--- /dev/null
+++ b/src/content/reference/en/p5.Amplitude/setInput.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setInput
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connects to the p5sound instance (main output) by default.
+  Optionally, you can pass in a specific source (i.e. a soundfile).</p>
+line: 3117
+params:
+  - name: snd
+    description: |
+      <p>set the sound source
+                                           (optional, defaults to
+                                           main output)</p>
+    type: SoundObject|undefined
+    optional: true
+  - name: smoothing
+    description: |
+      <p>a range between 0.0 and 1.0
+                                            to smooth amplitude readings</p>
+    type: Number|undefined
+    optional: true
+itemtype: method
+class: p5.Amplitude
+example:
+  - |-
+
+    <div><code>
+    function preload(){
+      sound1 = loadSound('assets/beat.mp3');
+      sound2 = loadSound('assets/drum.mp3');
+    }
+    function setup(){
+      cnv = createCanvas(100, 100);
+      cnv.mouseClicked(toggleSound);
+
+      amplitude = new p5.Amplitude();
+      amplitude.setInput(sound2);
+    }
+
+    function draw() {
+      background(220);
+      text('tap to play', 20, 20);
+
+      let level = amplitude.getLevel();
+      let size = map(level, 0, 1, 0, 200);
+      ellipse(width/2, height/2, size, size);
+    }
+
+    function toggleSound(){
+      if (sound1.isPlaying() && sound2.isPlaying()) {
+        sound1.stop();
+        sound2.stop();
+      } else {
+        sound1.play();
+        sound2.play();
+      }
+    }
+    </code></div>
+chainable: false
+---
+
+
+# setInput
diff --git a/src/content/reference/en/p5.Amplitude/smooth.mdx b/src/content/reference/en/p5.Amplitude/smooth.mdx
new file mode 100644
index 0000000000..68e6950792
--- /dev/null
+++ b/src/content/reference/en/p5.Amplitude/smooth.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: smooth
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Smooth Amplitude analysis by averaging with the last analysis
+  frame. Off by default.</p>
+line: 3293
+params:
+  - name: set
+    description: |
+      <p>smoothing from 0.0 <= 1</p>
+    type: Number
+itemtype: method
+class: p5.Amplitude
+chainable: false
+---
+
+
+# smooth
diff --git a/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx b/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx
new file mode 100644
index 0000000000..b9d7204a21
--- /dev/null
+++ b/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: toggleNormalize
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Determines whether the results of Amplitude.process() will be
+  Normalized. To normalize, Amplitude finds the difference the
+  loudest reading it has processed and the maximum amplitude of
+  1.0. Amplitude adds this difference to all values to produce
+  results that will reliably map between 0.0 and 1.0. However,
+  if a louder moment occurs, the amount that Normalize adds to
+  all the values will change. Accepts an optional boolean parameter
+  (true or false). Normalizing is off by default.</p>
+line: 3264
+params:
+  - name: boolean
+    description: |
+      <p>set normalize to true (1) or false (0)</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5.Amplitude
+chainable: false
+---
+
+
+# toggleNormalize
diff --git a/src/content/reference/en/p5.AudioIn/amp.mdx b/src/content/reference/en/p5.AudioIn/amp.mdx
new file mode 100644
index 0000000000..58d38b3d9a
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/amp.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>
+line: 6257
+params:
+  - name: vol
+    description: |
+      <p>between 0 and 1.0</p>
+    type: Number
+  - name: time
+    description: |
+      <p>ramp time (optional)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.AudioIn
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.AudioIn/amplitude.mdx b/src/content/reference/en/p5.AudioIn/amplitude.mdx
new file mode 100644
index 0000000000..5bfa93272d
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/amplitude.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amplitude
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Input amplitude, connect to it by default but not to master out</p>
+line: 6098
+itemtype: property
+class: p5.AudioIn
+chainable: false
+---
+
+
+# amplitude
diff --git a/src/content/reference/en/p5.AudioIn/connect.mdx b/src/content/reference/en/p5.AudioIn/connect.mdx
new file mode 100644
index 0000000000..a08dc2d603
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/connect.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect to an audio unit. If no parameter is provided, will
+  connect to the main output (i.e. your speakers).<br/></p>
+line: 6191
+params:
+  - name: unit
+    description: |
+      <p>An object that accepts audio input,
+                              such as an FFT</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.AudioIn
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.AudioIn/currentSource.mdx b/src/content/reference/en/p5.AudioIn/currentSource.mdx
new file mode 100644
index 0000000000..6f501cfc1d
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/currentSource.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: currentSource
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 6085
+itemtype: property
+class: p5.AudioIn
+chainable: false
+---
+
+
+# currentSource
diff --git a/src/content/reference/en/p5.AudioIn/disconnect.mdx b/src/content/reference/en/p5.AudioIn/disconnect.mdx
new file mode 100644
index 0000000000..06bbb68a98
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/disconnect.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect the AudioIn from all audio units. For example, if
+  connect() had been called, disconnect() will stop sending
+  signal to your speakers.<br/></p>
+line: 6216
+itemtype: method
+class: p5.AudioIn
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.AudioIn/enabled.mdx b/src/content/reference/en/p5.AudioIn/enabled.mdx
new file mode 100644
index 0000000000..303204606b
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/enabled.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: enabled
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Client must allow browser to access their microphone / audioin source.
+  Default: false. Will become true when the client enables access.</p>
+line: 6090
+itemtype: property
+class: p5.AudioIn
+chainable: false
+---
+
+
+# enabled
diff --git a/src/content/reference/en/p5.AudioIn/getLevel.mdx b/src/content/reference/en/p5.AudioIn/getLevel.mdx
new file mode 100644
index 0000000000..d8b0c8c4be
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/getLevel.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getLevel
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Read the Amplitude (volume level) of an AudioIn. The AudioIn
+  class contains its own instance of the Amplitude class to help
+  make it easy to get a microphone's volume level. Accepts an
+  optional smoothing value (0.0 < 1.0). <em>NOTE: AudioIn must
+  .start() before using .getLevel().</em><br/></p>
+line: 6234
+params:
+  - name: smoothing
+    description: |
+      <p>Smoothing is 0.0 by default.
+                                   Smooths values based on previous values.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.AudioIn
+return:
+  description: Volume level (between 0.0 and 1.0)
+  type: Number
+chainable: false
+---
+
+
+# getLevel
diff --git a/src/content/reference/en/p5.AudioIn/getSources.mdx b/src/content/reference/en/p5.AudioIn/getSources.mdx
new file mode 100644
index 0000000000..23728ecc22
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/getSources.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getSources
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a list of available input sources. This is a wrapper
+  for <a href="https://developer.mozilla.org/
+  en-US/docs/Web/API/MediaDevices/enumerateDevices" target="_blank">
+  MediaDevices.enumerateDevices() - Web APIs | MDN</a>
+  and it returns a Promise.</p>
+line: 6280
+params:
+  - name: successCallback
+    description: |
+      <p>This callback function handles the sources when they
+                                           have been enumerated. The callback function
+                                           receives the deviceList array as its only argument</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>This optional callback receives the error
+                                         message as its argument.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5.AudioIn
+example:
+  - |2-
+
+     <div><code>
+     let audioIn;
+
+     function setup(){
+       text('getting sources...', 0, 20);
+       audioIn = new p5.AudioIn();
+       audioIn.getSources(gotSources);
+     }
+
+     function gotSources(deviceList) {
+       if (deviceList.length > 0) {
+         //set the source to the first item in the deviceList array
+         audioIn.setSource(0);
+         let currentSource = deviceList[audioIn.currentSource];
+         text('set source to: ' + currentSource.deviceId, 5, 20, width);
+       }
+     }
+     </code></div>
+return:
+  description: |-
+    Returns a Promise that can be used in place of the callbacks, similar
+                               to the enumerateDevices() method
+  type: Promise
+chainable: false
+---
+
+
+# getSources
diff --git a/src/content/reference/en/p5.AudioIn/input.mdx b/src/content/reference/en/p5.AudioIn/input.mdx
new file mode 100644
index 0000000000..37f61b66ed
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/input.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: input
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 6066
+itemtype: property
+class: p5.AudioIn
+chainable: false
+---
+
+
+# input
diff --git a/src/content/reference/en/p5.AudioIn/mediaStream.mdx b/src/content/reference/en/p5.AudioIn/mediaStream.mdx
new file mode 100644
index 0000000000..497ad0ae08
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/mediaStream.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mediaStream
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 6080
+itemtype: property
+class: p5.AudioIn
+chainable: false
+---
+
+
+# mediaStream
diff --git a/src/content/reference/en/p5.AudioIn/output.mdx b/src/content/reference/en/p5.AudioIn/output.mdx
new file mode 100644
index 0000000000..40d61a1e94
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/output.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: output
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 6070
+itemtype: property
+class: p5.AudioIn
+chainable: false
+---
+
+
+# output
diff --git a/src/content/reference/en/p5.AudioIn/setSource.mdx b/src/content/reference/en/p5.AudioIn/setSource.mdx
new file mode 100644
index 0000000000..6315b48234
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/setSource.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setSource
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the input source. Accepts a number representing a
+  position in the array returned by getSources().
+  This is only available in browsers that support
+   <a href="https://developer.mozilla.org/
+   en-US/docs/Web/API/MediaDevices/enumerateDevices" target="_blank">
+   navigator.mediaDevices.enumerateDevices()</a></p>
+line: 6340
+params:
+  - name: num
+    description: |
+      <p>position of input source in the array</p>
+    type: Number
+itemtype: method
+class: p5.AudioIn
+example:
+  - |-
+
+    <div><code>
+    let audioIn;
+
+    function setup(){
+      text('getting sources...', 0, 20);
+      audioIn = new p5.AudioIn();
+      audioIn.getSources(gotSources);
+    }
+
+    function gotSources(deviceList) {
+      if (deviceList.length > 0) {
+        //set the source to the first item in the deviceList array
+        audioIn.setSource(0);
+        let currentSource = deviceList[audioIn.currentSource];
+        text('set source to: ' + currentSource.deviceId, 5, 20, width);
+      }
+    }
+    </code></div>
+chainable: false
+---
+
+
+# setSource
diff --git a/src/content/reference/en/p5.AudioIn/start.mdx b/src/content/reference/en/p5.AudioIn/start.mdx
new file mode 100644
index 0000000000..07e9ec0774
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/start.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: start
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Start processing audio input. This enables the use of other
+  AudioIn methods like getLevel(). Note that by default, AudioIn
+  is not connected to p5.sound's output. So you won't hear
+  anything unless you use the connect() method.<br/></p>
+  <p>Certain browsers limit access to the user's microphone. For example,
+  Chrome only allows access from localhost and over https. For this reason,
+  you may want to include an errorCallback—a function that is called in case
+  the browser won't provide mic access.</p>
+line: 6114
+params:
+  - name: successCallback
+    description: |
+      <p>Name of a function to call on
+                                        success.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>Name of a function to call if
+                                        there was an error. For example,
+                                        some browsers do not support
+                                        getUserMedia.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5.AudioIn
+chainable: false
+---
+
+
+# start
diff --git a/src/content/reference/en/p5.AudioIn/stop.mdx b/src/content/reference/en/p5.AudioIn/stop.mdx
new file mode 100644
index 0000000000..52eb8d4cb4
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/stop.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().
+  If re-starting, the user may be prompted for permission access.</p>
+line: 6171
+itemtype: method
+class: p5.AudioIn
+chainable: false
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.AudioIn/stream.mdx b/src/content/reference/en/p5.AudioIn/stream.mdx
new file mode 100644
index 0000000000..a2af40ce7a
--- /dev/null
+++ b/src/content/reference/en/p5.AudioIn/stream.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stream
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 6075
+itemtype: property
+class: p5.AudioIn
+chainable: false
+---
+
+
+# stream
diff --git a/src/content/reference/en/p5.AudioVoice/connect.mdx b/src/content/reference/en/p5.AudioVoice/connect.mdx
new file mode 100644
index 0000000000..e7cf30fca3
--- /dev/null
+++ b/src/content/reference/en/p5.AudioVoice/connect.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect to p5 objects or Web Audio Nodes</p>
+line: 11181
+params:
+  - name: unit
+    description: ''
+    type: Object
+itemtype: method
+class: p5.AudioVoice
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.AudioVoice/disconnect.mdx b/src/content/reference/en/p5.AudioVoice/disconnect.mdx
new file mode 100644
index 0000000000..439f83e508
--- /dev/null
+++ b/src/content/reference/en/p5.AudioVoice/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect from soundOut</p>
+line: 11194
+itemtype: method
+class: p5.AudioVoice
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.Camera/camera.mdx b/src/content/reference/en/p5.Camera/camera.mdx
new file mode 100644
index 0000000000..79b3b1977a
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/camera.mdx
@@ -0,0 +1,96 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: camera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Sets the camera's position and orientation.
+  Accepts the same parameters as the global
+  <a href="#/p5/camera">camera()</a>.
+  More information on this function can be found there.</p>
+line: 1250
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      // Create a camera.
+      // createCamera() sets the newly created camera as
+      // the current (active) camera.
+      cam = createCamera();
+    }
+
+    function draw() {
+      background(204);
+      // Move the camera away from the plane by a sin wave
+      cam.camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
+      plane(10, 10);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // move slider to see changes!
+    // sliders control the first 6 parameters of camera()
+
+    let sliderGroup = [];
+    let X;
+    let Y;
+    let Z;
+    let centerX;
+    let centerY;
+    let centerZ;
+    let h = 20;
+    let cam;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      // create a camera
+      cam = createCamera();
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // create sliders
+      for (var i = 0; i < 6; i++) {
+        if (i === 2) {
+          sliderGroup[i] = createSlider(10, 400, 200);
+        } else {
+          sliderGroup[i] = createSlider(-400, 400, 0);
+        }
+        h = map(i, 0, 6, 5, 85);
+        sliderGroup[i].position(10, height + h);
+        sliderGroup[i].style('width', '80px');
+      }
+    }
+
+    function draw() {
+      background(60);
+      // assigning sliders' value to each parameters
+      X = sliderGroup[0].value();
+      Y = sliderGroup[1].value();
+      Z = sliderGroup[2].value();
+      centerX = sliderGroup[3].value();
+      centerY = sliderGroup[4].value();
+      centerZ = sliderGroup[5].value();
+      cam.camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
+      stroke(255);
+      fill(255, 102, 94);
+      box(85);
+    }
+    </code>
+    </div>
+alt: |-
+  An interactive example of a red cube with 3 sliders for moving it across x, y,
+  z axis and 3 sliders for shifting its center.
+chainable: false
+---
+
+
+# camera
diff --git a/src/content/reference/en/p5.Camera/centerX.mdx b/src/content/reference/en/p5.Camera/centerX.mdx
new file mode 100644
index 0000000000..07226939e3
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/centerX.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: centerX
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>x coordinate representing center of the sketch</p>
+line: 580
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(255);
+      cam = createCamera();
+      cam.lookAt(1, 0, 0);
+      div = createDiv('centerX = ' + cam.centerX);
+      div.position(0, 0);
+      div.style('color', 'white');
+      describe('An example showing the use of camera object properties');
+    }
+
+    function draw() {
+      orbitControl();
+      box(10);
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# centerX
diff --git a/src/content/reference/en/p5.Camera/centerY.mdx b/src/content/reference/en/p5.Camera/centerY.mdx
new file mode 100644
index 0000000000..2d3929245f
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/centerY.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: centerY
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>y coordinate representing center of the sketch</p>
+line: 609
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(255);
+      cam = createCamera();
+      cam.lookAt(0, 1, 0);
+      div = createDiv('centerY = ' + cam.centerY);
+      div.position(0, 0);
+      div.style('color', 'white');
+      describe('An example showing the use of camera object properties');
+    }
+
+    function draw() {
+      orbitControl();
+      box(10);
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# centerY
diff --git a/src/content/reference/en/p5.Camera/centerZ.mdx b/src/content/reference/en/p5.Camera/centerZ.mdx
new file mode 100644
index 0000000000..89219804cf
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/centerZ.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: centerZ
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>z coordinate representing center of the sketch</p>
+line: 638
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(255);
+      cam = createCamera();
+      cam.lookAt(0, 0, 1);
+      div = createDiv('centerZ = ' + cam.centerZ);
+      div.position(0, 0);
+      div.style('color', 'white');
+      describe('An example showing the use of camera object properties');
+    }
+
+    function draw() {
+      orbitControl();
+      box(10);
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# centerZ
diff --git a/src/content/reference/en/p5.Camera/eyeX.mdx b/src/content/reference/en/p5.Camera/eyeX.mdx
new file mode 100644
index 0000000000..c5405bc06e
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/eyeX.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: eyeX
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>camera position value on x axis. default value is 0</p>
+line: 495
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(0);
+      cam = createCamera();
+      div = createDiv();
+      div.position(0, 0);
+      describe('An example showing the use of camera object properties');
+    }
+
+    function draw() {
+      orbitControl();
+      box(10);
+      div.html('eyeX = ' + cam.eyeX);
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# eyeX
diff --git a/src/content/reference/en/p5.Camera/eyeY.mdx b/src/content/reference/en/p5.Camera/eyeY.mdx
new file mode 100644
index 0000000000..d90b8291c4
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/eyeY.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: eyeY
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>camera position value on y axis. default value is 0</p>
+line: 524
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(0);
+      cam = createCamera();
+      div = createDiv();
+      div.position(0, 0);
+      describe('An example showing the use of camera object properties');
+    }
+
+    function draw() {
+      orbitControl();
+      box(10);
+      div.html('eyeY = ' + cam.eyeY);
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# eyeY
diff --git a/src/content/reference/en/p5.Camera/eyeZ.mdx b/src/content/reference/en/p5.Camera/eyeZ.mdx
new file mode 100644
index 0000000000..596ddfa502
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/eyeZ.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: eyeZ
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>camera position value on z axis. default value is 800</p>
+line: 552
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(0);
+      cam = createCamera();
+      div = createDiv();
+      div.position(0, 0);
+      describe('An example showing the use of camera object properties');
+    }
+
+    function draw() {
+      orbitControl();
+      box(10);
+      div.html('eyeZ = ' + cam.eyeZ);
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# eyeZ
diff --git a/src/content/reference/en/p5.Camera/frustum.mdx b/src/content/reference/en/p5.Camera/frustum.mdx
new file mode 100644
index 0000000000..0c4ac07dac
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/frustum.mdx
@@ -0,0 +1,57 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: frustum
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Sets the camera's frustum.
+  Accepts the same parameters as the global
+  <a href="#/p5/frustum">frustum()</a>.
+  More information on this function can be found there.</p>
+line: 930
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+
+    function setup() {
+      x = createCanvas(100, 100, WEBGL);
+      setAttributes('antialias', true);
+      // create a camera
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      // set its frustum
+      cam.frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+    }
+
+    function draw() {
+      background(200);
+      orbitControl();
+      normalMaterial();
+
+      rotateY(-0.2);
+      rotateX(-0.3);
+      push();
+      translate(-15, 0, sin(frameCount / 30) * 25);
+      box(30);
+      pop();
+      push();
+      translate(15, 0, sin(frameCount / 30 + PI) * 25);
+      box(30);
+      pop();
+    }
+    </code>
+    </div>
+alt: >-
+  two 3D boxes move back and forth along same plane, rotating as mouse is
+  dragged.
+chainable: false
+---
+
+
+# frustum
diff --git a/src/content/reference/en/p5.Camera/lookAt.mdx b/src/content/reference/en/p5.Camera/lookAt.mdx
new file mode 100644
index 0000000000..063ec855d7
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/lookAt.mdx
@@ -0,0 +1,73 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: lookAt
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Reorients the camera to look at a position in world space.</p>
+line: 1181
+params:
+  - name: x
+    description: |
+      <p>x position of a point in world space</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y position of a point in world space</p>
+    type: Number
+  - name: z
+    description: |
+      <p>z position of a point in world space</p>
+    type: Number
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+    }
+
+    function draw() {
+      background(200);
+
+      // look at a new random point every 60 frames
+      if (frameCount % 60 === 0) {
+        cam.lookAt(random(-100, 100), random(-50, 50), 0);
+      }
+
+      rotateX(frameCount * 0.01);
+      translate(-100, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+    }
+    </code>
+    </div>
+alt: |-
+  camera view of rotating 3D cubes changes to look at a new random
+  point every second .
+chainable: false
+---
+
+
+# lookAt
diff --git a/src/content/reference/en/p5.Camera/move.mdx b/src/content/reference/en/p5.Camera/move.mdx
new file mode 100644
index 0000000000..7524d98ee2
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/move.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: move
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Move camera along its local axes while maintaining current camera
+  orientation.</p>
+line: 1398
+params:
+  - name: x
+    description: |
+      <p>amount to move along camera's left-right axis</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>amount to move along camera's up-down axis</p>
+    type: Number
+  - name: z
+    description: |
+      <p>amount to move along camera's forward-backward axis</p>
+    type: Number
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    // see the camera move along its own axes while maintaining its orientation
+    let cam;
+    let delta = 0.5;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+    }
+
+    function draw() {
+      background(200);
+
+      // move the camera along its local axes
+      cam.move(delta, delta, 0);
+
+      // every 100 frames, switch direction
+      if (frameCount % 150 === 0) {
+        delta *= -1;
+      }
+
+      translate(-10, -10, 0);
+      box(50, 8, 50);
+      translate(15, 15, 0);
+      box(50, 8, 50);
+      translate(15, 15, 0);
+      box(50, 8, 50);
+      translate(15, 15, 0);
+      box(50, 8, 50);
+      translate(15, 15, 0);
+      box(50, 8, 50);
+      translate(15, 15, 0);
+      box(50, 8, 50);
+    }
+    </code>
+    </div>
+alt: |-
+  camera view moves along a series of 3D boxes, maintaining the same
+  orientation throughout the move
+chainable: false
+---
+
+
+# move
diff --git a/src/content/reference/en/p5.Camera/ortho.mdx b/src/content/reference/en/p5.Camera/ortho.mdx
new file mode 100644
index 0000000000..d1a400ca8f
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/ortho.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ortho
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Sets an orthographic projection.
+  Accepts the same parameters as the global
+  <a href="#/p5/ortho">ortho()</a>.
+  More information on this function can be found there.</p>
+line: 846
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    // drag the mouse to look around!
+    // there's no vanishing point
+
+    let cam;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      // create a camera
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      // give it an orthographic projection
+      cam.ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
+    }
+    function draw() {
+      background(200);
+      orbitControl();
+      normalMaterial();
+
+      rotateX(0.2);
+      rotateY(-0.2);
+      push();
+      translate(-15, 0, sin(frameCount / 30) * 65);
+      box(30);
+      pop();
+      push();
+      translate(15, 0, sin(frameCount / 30 + PI) * 65);
+      box(30);
+      pop();
+    }
+    </code>
+    </div>
+alt: >-
+  two 3D boxes move back and forth along same plane, rotating as mouse is
+  dragged.
+chainable: false
+---
+
+
+# ortho
diff --git a/src/content/reference/en/p5.Camera/pan.mdx b/src/content/reference/en/p5.Camera/pan.mdx
new file mode 100644
index 0000000000..b7cfc8da27
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/pan.mdx
@@ -0,0 +1,71 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pan
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Panning rotates the camera view to the left and right.</p>
+line: 1061
+params:
+  - name: angle
+    description: |
+      <p>amount to rotate camera in current
+      <a href="#/p5/angleMode">angleMode</a> units.
+      Greater than 0 values rotate counterclockwise (to the left).</p>
+    type: Number
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+    let delta = 0.01;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // set initial pan angle
+      cam.pan(-0.8);
+    }
+
+    function draw() {
+      background(200);
+
+      // pan camera according to angle 'delta'
+      cam.pan(delta);
+
+      // every 160 frames, switch direction
+      if (frameCount % 160 === 0) {
+        delta *= -1;
+      }
+
+      rotateX(frameCount * 0.01);
+      translate(-100, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+    }
+    </code>
+    </div>
+alt: camera view pans left and right across a series of rotating 3D boxes.
+chainable: false
+---
+
+
+# pan
diff --git a/src/content/reference/en/p5.Camera/perspective.mdx b/src/content/reference/en/p5.Camera/perspective.mdx
new file mode 100644
index 0000000000..4f0983e02a
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/perspective.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: perspective
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Sets a perspective projection.
+  Accepts the same parameters as the global
+  <a href="#/p5/perspective">perspective()</a>.
+  More information on this function can be found there.</p>
+line: 743
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    // drag the mouse to look around!
+
+    let cam;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      // create a camera
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      // give it a perspective projection
+      cam.perspective(PI / 3.0, width / height, 0.1, 500);
+    }
+
+    function draw() {
+      background(200);
+      orbitControl();
+      normalMaterial();
+
+      rotateX(-0.3);
+      rotateY(-0.2);
+      translate(0, 0, -50);
+
+      push();
+      translate(-15, 0, sin(frameCount / 30) * 65);
+      box(30);
+      pop();
+      push();
+      translate(15, 0, sin(frameCount / 30 + PI) * 65);
+      box(30);
+      pop();
+    }
+    </code>
+    </div>
+alt: 'two colored 3D boxes move back and forth, rotating as mouse is dragged.'
+chainable: false
+---
+
+
+# perspective
diff --git a/src/content/reference/en/p5.Camera/set.mdx b/src/content/reference/en/p5.Camera/set.mdx
new file mode 100644
index 0000000000..782c8fdef6
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/set.mdx
@@ -0,0 +1,67 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Copies information about the argument camera's view and projection to
+  the target camera. If the target camera is active, it will be reflected
+  on the screen.</p>
+line: 1536
+params:
+  - name: cam
+    description: |
+      <p>source camera</p>
+    type: p5.Camera
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam, initialCam;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      strokeWeight(3);
+
+      // Set the initial state to initialCamera and set it to the camera
+      // used for drawing. Then set cam to be the active camera.
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      initialCam = createCamera();
+      initialCam.camera(100, 100, 100, 0, 0, 0, 0, 0, -1);
+      initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      cam.set(initialCam);
+
+      setCamera(cam);
+    }
+
+    function draw() {
+      orbitControl();
+      background(255);
+      box(50);
+      translate(0, 0, -25);
+      plane(100);
+    }
+
+    function doubleClicked(){
+      // Double-click to return the camera to its initial position.
+      cam.set(initialCam);
+    }
+    </code>
+    </div>
+alt: |-
+  Prepare two cameras. One is the camera that sets the initial state,
+  and the other is the camera that moves with interaction.
+  Draw a plane and a box on top of it, operate the camera using orbitControl().
+  Double-click to set the camera in the initial state and return to
+  the initial state.
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Camera/setPosition.mdx b/src/content/reference/en/p5.Camera/setPosition.mdx
new file mode 100644
index 0000000000..babdebe1f6
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/setPosition.mdx
@@ -0,0 +1,68 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setPosition
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Set camera position in world-space while maintaining current camera
+  orientation.</p>
+line: 1472
+params:
+  - name: x
+    description: |
+      <p>x position of a point in world space</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y position of a point in world space</p>
+    type: Number
+  - name: z
+    description: |
+      <p>z position of a point in world space</p>
+    type: Number
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    // press '1' '2' or '3' keys to set camera position
+
+    let cam;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+    }
+
+    function draw() {
+      background(200);
+
+      // '1' key
+      if (keyIsDown(49)) {
+        cam.setPosition(30, 0, 80);
+      }
+      // '2' key
+      if (keyIsDown(50)) {
+        cam.setPosition(0, 0, 80);
+      }
+      // '3' key
+      if (keyIsDown(51)) {
+        cam.setPosition(-30, 0, 80);
+      }
+
+      box(20);
+    }
+    </code>
+    </div>
+alt: 'camera position changes as the user presses keys, altering view of a 3D box'
+chainable: false
+---
+
+
+# setPosition
diff --git a/src/content/reference/en/p5.Camera/slerp.mdx b/src/content/reference/en/p5.Camera/slerp.mdx
new file mode 100644
index 0000000000..3d6edca967
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/slerp.mdx
@@ -0,0 +1,158 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: slerp
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>For the cameras cam0 and cam1 with the given arguments, their view are
+  combined
+
+  with the parameter amt that represents the quantity, and the obtained view is
+  applied.
+
+  For example, if cam0 is looking straight ahead and cam1 is looking straight
+
+  to the right and amt is 0.5, the applied camera will look to the halfway
+
+  between front and right.
+
+  If the applied camera is active, the applied result will be reflected on the
+  screen.
+
+  When applying this function, all cameras involved must have exactly the same
+  projection
+
+  settings. For example, if one is perspective, ortho, frustum, the other two
+  must also be
+
+  perspective, ortho, frustum respectively. However, if all cameras have ortho
+  settings,
+
+  interpolation is possible if the ratios of left, right, top and bottom are
+  equal to each other.
+
+  For example, when it is changed by orbitControl().</p>
+line: 1609
+params:
+  - name: cam0
+    description: |
+      <p>first p5.Camera</p>
+    type: p5.Camera
+  - name: cam1
+    description: |
+      <p>second p5.Camera</p>
+    type: p5.Camera
+  - name: amt
+    description: |
+      <p>amount to use for interpolation during slerp</p>
+    type: Number
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam0, cam1, cam;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      strokeWeight(3);
+
+      // camera for slerp.
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // cam0 is looking at the cube from the front.
+      cam0 = createCamera();
+      cam0.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam0.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // cam1 is pointing straight to the right in the cube
+      // at the same position as cam0 by doing a pan(-PI/2).
+      cam1 = createCamera();
+      cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      cam1.pan(-PI/2);
+
+      // we only use cam.
+      setCamera(cam);
+    }
+
+    function draw() {
+      // calculate amount.
+      const amt = 0.5 - 0.5 * cos(frameCount * TAU / 120);
+      // slerp cam0 and cam1 with amt, set to cam.
+      // When amt moves from 0 to 1, cam moves from cam0 to cam1,
+      // shaking the camera to the right.
+      cam.slerp(cam0, cam1, amt);
+
+      background(255);
+      // Every time the camera turns right, the cube drifts left.
+      box(40);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let cam, lastCam, initialCam;
+    let countForReset = 30;
+    // This sample uses orbitControl() to move the camera.
+    // Double-clicking the canvas restores the camera to its initial state.
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      strokeWeight(3);
+
+      // main camera
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // Camera for recording loc info before reset
+      lastCam = createCamera();
+      lastCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      lastCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // Camera for recording the initial state
+      initialCam = createCamera();
+      initialCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+
+      setCamera(cam); // set main camera
+    }
+
+    function draw() {
+      if (countForReset < 30) {
+        // if the reset count is less than 30,
+        // it will move closer to the original camera as it increases.
+        countForReset++;
+        cam.slerp(lastCam, initialCam, countForReset / 30);
+      } else {
+        // if the count is 30,
+        // you can freely move the main camera with orbitControl().
+        orbitControl();
+      }
+
+      background(255);
+      box(40);
+    }
+    // A double-click sets countForReset to 0 and initiates a reset.
+    function doubleClicked() {
+      if (countForReset === 30) {
+        countForReset = 0;
+        lastCam.set(cam);
+      }
+    }
+    </code>
+    </div>
+alt: >-
+  There is a camera, drawing a cube. The camera can be moved freely with
+
+  orbitControl(). Double-click to smoothly return the camera to its initial
+  state.
+
+  The camera cannot be moved during that time.
+chainable: false
+---
+
+
+# slerp
diff --git a/src/content/reference/en/p5.Camera/tilt.mdx b/src/content/reference/en/p5.Camera/tilt.mdx
new file mode 100644
index 0000000000..49583abb1f
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/tilt.mdx
@@ -0,0 +1,71 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: tilt
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Tilting rotates the camera view up and down.</p>
+line: 1121
+params:
+  - name: angle
+    description: |
+      <p>amount to rotate camera in current
+      <a href="#/p5/angleMode">angleMode</a> units.
+      Greater than 0 values rotate counterclockwise (to the left).</p>
+    type: Number
+itemtype: method
+class: p5.Camera
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+    let delta = 0.01;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // set initial tilt
+      cam.tilt(-0.8);
+    }
+
+    function draw() {
+      background(200);
+
+      // pan camera according to angle 'delta'
+      cam.tilt(delta);
+
+      // every 160 frames, switch direction
+      if (frameCount % 160 === 0) {
+        delta *= -1;
+      }
+
+      rotateY(frameCount * 0.01);
+      translate(0, -100, 0);
+      box(20);
+      translate(0, 35, 0);
+      box(20);
+      translate(0, 35, 0);
+      box(20);
+      translate(0, 35, 0);
+      box(20);
+      translate(0, 35, 0);
+      box(20);
+      translate(0, 35, 0);
+      box(20);
+      translate(0, 35, 0);
+      box(20);
+    }
+    </code>
+    </div>
+alt: camera view tilts up and down across a series of rotating 3D boxes.
+chainable: false
+---
+
+
+# tilt
diff --git a/src/content/reference/en/p5.Camera/upX.mdx b/src/content/reference/en/p5.Camera/upX.mdx
new file mode 100644
index 0000000000..417ddd1ff8
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/upX.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: upX
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>x component of direction 'up' from camera</p>
+line: 667
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(255);
+      cam = createCamera();
+      div = createDiv('upX = ' + cam.upX);
+      div.position(0, 0);
+      div.style('color', 'blue');
+      div.style('font-size', '18px');
+      describe('An example showing the use of camera object properties');
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# upX
diff --git a/src/content/reference/en/p5.Camera/upY.mdx b/src/content/reference/en/p5.Camera/upY.mdx
new file mode 100644
index 0000000000..7f90610d26
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/upY.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: upY
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>y component of direction 'up' from camera</p>
+line: 691
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(255);
+      cam = createCamera();
+      div = createDiv('upY = ' + cam.upY);
+      div.position(0, 0);
+      div.style('color', 'blue');
+      div.style('font-size', '18px');
+      describe('An example showing the use of camera object properties');
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# upY
diff --git a/src/content/reference/en/p5.Camera/upZ.mdx b/src/content/reference/en/p5.Camera/upZ.mdx
new file mode 100644
index 0000000000..e8f2346fcc
--- /dev/null
+++ b/src/content/reference/en/p5.Camera/upZ.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: upZ
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>z component of direction 'up' from camera</p>
+line: 715
+itemtype: property
+class: p5.Camera
+example:
+  - |-
+
+    <div class='norender'><code>
+    let cam, div;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(255);
+      cam = createCamera();
+      div = createDiv('upZ = ' + cam.upZ);
+      div.position(0, 0);
+      div.style('color', 'blue');
+      div.style('font-size', '18px');
+      describe('An example showing the use of camera object properties');
+    }
+    </code></div>
+alt: An example showing the use of camera object properties
+chainable: false
+---
+
+
+# upZ
diff --git a/src/content/reference/en/p5.Color/setAlpha.mdx b/src/content/reference/en/p5.Color/setAlpha.mdx
new file mode 100644
index 0000000000..957238129e
--- /dev/null
+++ b/src/content/reference/en/p5.Color/setAlpha.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setAlpha
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: |
+  <p>Sets the alpha (transparency) value of a color. The range depends on the
+  <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+  between 0 and 255.</p>
+line: 653
+params:
+  - name: alpha
+    description: |
+      <p>the new alpha value.</p>
+    type: Number
+itemtype: method
+class: p5.Color
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      clear();
+      background(200);
+      const squareColor = color(100, 50, 100);
+      squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
+      fill(squareColor);
+      rect(13, 13, width - 26, height - 26);
+      describe(
+        'A purple square with gradually changing opacity drawn on a gray background.'
+      );
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setAlpha
diff --git a/src/content/reference/en/p5.Color/setBlue.mdx b/src/content/reference/en/p5.Color/setBlue.mdx
new file mode 100644
index 0000000000..fa35a9860c
--- /dev/null
+++ b/src/content/reference/en/p5.Color/setBlue.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setBlue
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: |
+  <p>Sets the blue component of a color. The range depends on the
+  <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+  between 0 and 255.</p>
+line: 623
+params:
+  - name: blue
+    description: |
+      <p>the new blue value.</p>
+    type: Number
+itemtype: method
+class: p5.Color
+example:
+  - |-
+
+    <div>
+    <code>
+    let backgroundColor;
+
+    function setup() {
+      backgroundColor = color(100, 50, 150);
+    }
+
+    function draw() {
+      backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
+      background(backgroundColor);
+      describe('A canvas with a gradually changing background color.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setBlue
diff --git a/src/content/reference/en/p5.Color/setGreen.mdx b/src/content/reference/en/p5.Color/setGreen.mdx
new file mode 100644
index 0000000000..99f1379034
--- /dev/null
+++ b/src/content/reference/en/p5.Color/setGreen.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setGreen
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: |
+  <p>Sets the green component of a color. The range depends on the
+  <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+  between 0 and 255.</p>
+line: 593
+params:
+  - name: green
+    description: |
+      <p>the new green value.</p>
+    type: Number
+itemtype: method
+class: p5.Color
+example:
+  - |-
+
+    <div>
+    <code>
+    let backgroundColor;
+
+    function setup() {
+      backgroundColor = color(100, 50, 150);
+    }
+
+    function draw() {
+      backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
+      background(backgroundColor);
+      describe('A canvas with a gradually changing background color.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setGreen
diff --git a/src/content/reference/en/p5.Color/setRed.mdx b/src/content/reference/en/p5.Color/setRed.mdx
new file mode 100644
index 0000000000..c6906acb23
--- /dev/null
+++ b/src/content/reference/en/p5.Color/setRed.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setRed
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: |
+  <p>Sets the red component of a color. The range depends on the
+  <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+  between 0 and 255.</p>
+line: 563
+params:
+  - name: red
+    description: |
+      <p>the new red value.</p>
+    type: Number
+itemtype: method
+class: p5.Color
+example:
+  - |-
+
+    <div>
+    <code>
+    let backgroundColor;
+
+    function setup() {
+      backgroundColor = color(100, 50, 150);
+    }
+
+    function draw() {
+      backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
+      background(backgroundColor);
+      describe('A canvas with a gradually changing background color.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setRed
diff --git a/src/content/reference/en/p5.Color/toString.mdx b/src/content/reference/en/p5.Color/toString.mdx
new file mode 100644
index 0000000000..83a2a1f240
--- /dev/null
+++ b/src/content/reference/en/p5.Color/toString.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: toString
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: |
+  <p>Returns the color formatted as a string. Doing so can be useful for
+  debugging, or for using p5.js with other libraries.</p>
+line: 360
+params:
+  - name: format
+    description: >
+      <p>how the color string will be formatted.
+
+      Leaving this empty formats the string as rgba(r, g, b, a).
+
+      '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color
+      codes.
+
+      'rgb' 'hsb' and 'hsl' return the color formatted in the specified color
+      mode.
+
+      'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.
+
+      'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as
+      percentages.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.Color
+example:
+  - |-
+
+    <div>
+    <code>
+    createCanvas(200, 100);
+    stroke(255);
+    const myColor = color(100, 100, 250);
+    fill(myColor);
+    rotate(HALF_PI);
+    text(myColor.toString(), 0, -5);
+    text(myColor.toString('#rrggbb'), 0, -30);
+    text(myColor.toString('rgba%'), 0, -55);
+    describe('Three text representation of a color written sideways.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    const myColor = color(100, 130, 250);
+    text(myColor.toString('#rrggbb'), 25, 25);
+    describe('A hexadecimal representation of a color.');
+    </code>
+    </div>
+return:
+  description: the formatted string.
+  type: String
+chainable: false
+---
+
+
+# toString
diff --git a/src/content/reference/en/p5.Compressor/attack.mdx b/src/content/reference/en/p5.Compressor/attack.mdx
new file mode 100644
index 0000000000..aa639cd7a3
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/attack.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: attack
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get current attack or set value w/ time ramp</p>
+line: 10152
+params:
+  - name: attack
+    description: |
+      <p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,
+                               default = .003, range 0 - 1</p>
+    type: Number
+    optional: true
+  - name: time
+    description: |
+      <p>Assign time value to schedule the change in value</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Compressor
+chainable: false
+---
+
+
+# attack
diff --git a/src/content/reference/en/p5.Compressor/compressor.mdx b/src/content/reference/en/p5.Compressor/compressor.mdx
new file mode 100644
index 0000000000..6f6689e204
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/compressor.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: compressor
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>The p5.Compressor is built with a <a
+  href="https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface"
+     target="_blank" title="W3 spec for Dynamics Compressor Node">Web Audio Dynamics Compressor Node
+     </a></p>
+line: 10068
+itemtype: property
+class: p5.Compressor
+chainable: false
+---
+
+
+# compressor
diff --git a/src/content/reference/en/p5.Compressor/knee.mdx b/src/content/reference/en/p5.Compressor/knee.mdx
new file mode 100644
index 0000000000..19eb6e8fe6
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/knee.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: knee
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get current knee or set value w/ time ramp</p>
+line: 10178
+params:
+  - name: knee
+    description: |
+      <p>A decibel value representing the range above the
+                             threshold where the curve smoothly transitions to the "ratio" portion.
+                             default = 30, range 0 - 40</p>
+    type: Number
+    optional: true
+  - name: time
+    description: |
+      <p>Assign time value to schedule the change in value</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Compressor
+chainable: false
+---
+
+
+# knee
diff --git a/src/content/reference/en/p5.Compressor/process.mdx b/src/content/reference/en/p5.Compressor/process.mdx
new file mode 100644
index 0000000000..14a3349d71
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/process.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Performs the same function as .connect, but also accepts
+  optional parameters to set compressor's audioParams</p>
+line: 10084
+params:
+  - name: src
+    description: |
+      <p>Sound source to be connected</p>
+    type: Object
+  - name: attack
+    description: |
+      <p>The amount of time (in seconds) to reduce the gain by 10dB,
+                                 default = .003, range 0 - 1</p>
+    type: Number
+    optional: true
+  - name: knee
+    description: |
+      <p>A decibel value representing the range above the
+                                 threshold where the curve smoothly transitions to the "ratio" portion.
+                                 default = 30, range 0 - 40</p>
+    type: Number
+    optional: true
+  - name: ratio
+    description: |
+      <p>The amount of dB change in input for a 1 dB change in output
+                                 default = 12, range 1 - 20</p>
+    type: Number
+    optional: true
+  - name: threshold
+    description: |
+      <p>The decibel value above which the compression will start taking effect
+                                 default = -24, range -100 - 0</p>
+    type: Number
+    optional: true
+  - name: release
+    description: |
+      <p>The amount of time (in seconds) to increase the gain by 10dB
+                                 default = .25, range 0 - 1</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Compressor
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Compressor/ratio.mdx b/src/content/reference/en/p5.Compressor/ratio.mdx
new file mode 100644
index 0000000000..59d6f6f182
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/ratio.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ratio
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get current ratio or set value w/ time ramp</p>
+line: 10204
+params:
+  - name: ratio
+    description: |
+      <p>The amount of dB change in input for a 1 dB change in output
+                                 default = 12, range 1 - 20</p>
+    type: Number
+    optional: true
+  - name: time
+    description: |
+      <p>Assign time value to schedule the change in value</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Compressor
+chainable: false
+---
+
+
+# ratio
diff --git a/src/content/reference/en/p5.Compressor/reduction.mdx b/src/content/reference/en/p5.Compressor/reduction.mdx
new file mode 100644
index 0000000000..f4a40e198b
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/reduction.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: reduction
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Return the current reduction value</p>
+line: 10277
+itemtype: method
+class: p5.Compressor
+return:
+  description: Value of the amount of gain reduction that is applied to the signal
+  type: Number
+chainable: false
+---
+
+
+# reduction
diff --git a/src/content/reference/en/p5.Compressor/release.mdx b/src/content/reference/en/p5.Compressor/release.mdx
new file mode 100644
index 0000000000..8061e63e7e
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/release.mdx
@@ -0,0 +1,27 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: release
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get current release or set value w/ time ramp</p>
+line: 10252
+params:
+  - name: release
+    description: |
+      <p>The amount of time (in seconds) to increase the gain by 10dB
+                                 default = .25, range 0 - 1</p>
+    type: Number
+  - name: time
+    description: |
+      <p>Assign time value to schedule the change in value</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Compressor
+chainable: false
+---
+
+
+# release
diff --git a/src/content/reference/en/p5.Compressor/set.mdx b/src/content/reference/en/p5.Compressor/set.mdx
new file mode 100644
index 0000000000..e7478ab4d0
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/set.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the paramters of a compressor.</p>
+line: 10112
+params:
+  - name: attack
+    description: |
+      <p>The amount of time (in seconds) to reduce the gain by 10dB,
+                                 default = .003, range 0 - 1</p>
+    type: Number
+  - name: knee
+    description: |
+      <p>A decibel value representing the range above the
+                                 threshold where the curve smoothly transitions to the "ratio" portion.
+                                 default = 30, range 0 - 40</p>
+    type: Number
+  - name: ratio
+    description: |
+      <p>The amount of dB change in input for a 1 dB change in output
+                                 default = 12, range 1 - 20</p>
+    type: Number
+  - name: threshold
+    description: |
+      <p>The decibel value above which the compression will start taking effect
+                                 default = -24, range -100 - 0</p>
+    type: Number
+  - name: release
+    description: |
+      <p>The amount of time (in seconds) to increase the gain by 10dB
+                                 default = .25, range 0 - 1</p>
+    type: Number
+itemtype: method
+class: p5.Compressor
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Compressor/threshold.mdx b/src/content/reference/en/p5.Compressor/threshold.mdx
new file mode 100644
index 0000000000..fd6116ac1c
--- /dev/null
+++ b/src/content/reference/en/p5.Compressor/threshold.mdx
@@ -0,0 +1,27 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: threshold
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get current threshold or set value w/ time ramp</p>
+line: 10228
+params:
+  - name: threshold
+    description: |
+      <p>The decibel value above which the compression will start taking effect
+                                 default = -24, range -100 - 0</p>
+    type: Number
+  - name: time
+    description: |
+      <p>Assign time value to schedule the change in value</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Compressor
+chainable: false
+---
+
+
+# threshold
diff --git a/src/content/reference/en/p5.Convolver/addImpulse.mdx b/src/content/reference/en/p5.Convolver/addImpulse.mdx
new file mode 100644
index 0000000000..412e6df000
--- /dev/null
+++ b/src/content/reference/en/p5.Convolver/addImpulse.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addImpulse
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Load and assign a new Impulse Response to the p5.Convolver.
+  The impulse is added to the <code>.impulses</code> array. Previous
+  impulses can be accessed with the <code>.toggleImpulse(id)</code>
+  method.</p>
+line: 8786
+params:
+  - name: path
+    description: |
+      <p>path to a sound file</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function (optional)</p>
+    type: Function
+  - name: errorCallback
+    description: |
+      <p>function (optional)</p>
+    type: Function
+itemtype: method
+class: p5.Convolver
+chainable: false
+---
+
+
+# addImpulse
diff --git a/src/content/reference/en/p5.Convolver/convolverNode.mdx b/src/content/reference/en/p5.Convolver/convolverNode.mdx
new file mode 100644
index 0000000000..b08fb175bf
--- /dev/null
+++ b/src/content/reference/en/p5.Convolver/convolverNode.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: convolverNode
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Internally, the p5.Convolver uses the a
+  <a href="http://www.w3.org/TR/webaudio/#ConvolverNode">
+  Web Audio Convolver Node</a>.</p>
+line: 8621
+itemtype: property
+class: p5.Convolver
+chainable: false
+---
+
+
+# convolverNode
diff --git a/src/content/reference/en/p5.Convolver/impulses.mdx b/src/content/reference/en/p5.Convolver/impulses.mdx
new file mode 100644
index 0000000000..eb29328ebf
--- /dev/null
+++ b/src/content/reference/en/p5.Convolver/impulses.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: impulses
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>If you load multiple impulse files using the .addImpulse method,
+  they will be stored as Objects in this Array. Toggle between them
+  with the <code>toggleImpulse(id)</code> method.</p>
+line: 8645
+itemtype: property
+class: p5.Convolver
+chainable: false
+---
+
+
+# impulses
diff --git a/src/content/reference/en/p5.Convolver/process.mdx b/src/content/reference/en/p5.Convolver/process.mdx
new file mode 100644
index 0000000000..cd7b16f8de
--- /dev/null
+++ b/src/content/reference/en/p5.Convolver/process.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect a source to the convolver.</p>
+line: 8737
+params:
+  - name: src
+    description: |
+      <p>p5.sound / Web Audio object with a sound
+                               output.</p>
+    type: Object
+itemtype: method
+class: p5.Convolver
+example:
+  - |-
+
+    <div><code>
+    let cVerb, sound;
+    function preload() {
+      // We have both MP3 and OGG versions of all sound assets
+      soundFormats('ogg', 'mp3');
+
+      // Try replacing 'bx-spring' with other soundfiles like
+      // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+      cVerb = createConvolver('assets/bx-spring.mp3');
+
+      // Try replacing 'Damscray_DancingTiger' with
+      // 'beat', 'doorbell', lucky_dragons_-_power_melody'
+      sound = loadSound('assets/Damscray_DancingTiger.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playSound);
+      background(220);
+      text('tap to play', 20, 20);
+
+      // disconnect from main output...
+      sound.disconnect();
+
+      // ...and process with cVerb
+      // so that we only hear the convolution
+      cVerb.process(sound);
+    }
+
+    function playSound() {
+      sound.play();
+    }
+
+    </code></div>
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Convolver/resetImpulse.mdx b/src/content/reference/en/p5.Convolver/resetImpulse.mdx
new file mode 100644
index 0000000000..f6be3a5a24
--- /dev/null
+++ b/src/content/reference/en/p5.Convolver/resetImpulse.mdx
@@ -0,0 +1,31 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: resetImpulse
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Similar to .addImpulse, except that the <code>.impulses</code>
+  Array is reset to save memory. A new <code>.impulses</code>
+  array is created with this impulse as the only item.</p>
+line: 8808
+params:
+  - name: path
+    description: |
+      <p>path to a sound file</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function (optional)</p>
+    type: Function
+  - name: errorCallback
+    description: |
+      <p>function (optional)</p>
+    type: Function
+itemtype: method
+class: p5.Convolver
+chainable: false
+---
+
+
+# resetImpulse
diff --git a/src/content/reference/en/p5.Convolver/toggleImpulse.mdx b/src/content/reference/en/p5.Convolver/toggleImpulse.mdx
new file mode 100644
index 0000000000..55bb6cfdd4
--- /dev/null
+++ b/src/content/reference/en/p5.Convolver/toggleImpulse.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: toggleImpulse
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>If you have used <code>.addImpulse()</code> to add multiple impulses
+  to a p5.Convolver, then you can use this method to toggle between
+  the items in the <code>.impulses</code> Array. Accepts a parameter
+  to identify which impulse you wish to use, identified either by its
+  original filename (String) or by its position in the <code>.impulses
+  </code> Array (Number).<br/>
+  You can access the objects in the .impulses Array directly. Each
+  Object has two attributes: an <code>.audioBuffer</code> (type:
+  Web Audio <a href="
+  http://webaudio.github.io/web-audio-api/#the-audiobuffer-interface">
+  AudioBuffer)</a> and a <code>.name</code>, a String that corresponds
+  with the original filename.</p>
+line: 8831
+params:
+  - name: id
+    description: |
+      <p>Identify the impulse by its original filename
+                                (String), or by its position in the
+                                <code>.impulses</code> Array (Number).</p>
+    type: String|Number
+itemtype: method
+class: p5.Convolver
+chainable: false
+---
+
+
+# toggleImpulse
diff --git a/src/content/reference/en/p5.Delay/amp.mdx b/src/content/reference/en/p5.Delay/amp.mdx
new file mode 100644
index 0000000000..b72153a6b1
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/amp.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the output level of the delay effect.</p>
+line: 8223
+params:
+  - name: volume
+    description: |
+      <p>amplitude between 0 and 1.0</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>create a fade that lasts rampTime</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Delay
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.Delay/connect.mdx b/src/content/reference/en/p5.Delay/connect.mdx
new file mode 100644
index 0000000000..c3f6c60082
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/connect.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Send output to a p5.sound or web audio object</p>
+line: 8234
+params:
+  - name: unit
+    description: ''
+    type: Object
+itemtype: method
+class: p5.Delay
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.Delay/delayTime.mdx b/src/content/reference/en/p5.Delay/delayTime.mdx
new file mode 100644
index 0000000000..6789516540
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/delayTime.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: delayTime
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the delay (echo) time, in seconds. Usually this value will be
+  a floating point number between 0.0 and 1.0.</p>
+line: 8094
+params:
+  - name: delayTime
+    description: |
+      <p>Time (in seconds) of the delay</p>
+    type: Number
+itemtype: method
+class: p5.Delay
+chainable: false
+---
+
+
+# delayTime
diff --git a/src/content/reference/en/p5.Delay/disconnect.mdx b/src/content/reference/en/p5.Delay/disconnect.mdx
new file mode 100644
index 0000000000..43c2bf83e9
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect all output.</p>
+line: 8242
+itemtype: method
+class: p5.Delay
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.Delay/feedback.mdx b/src/content/reference/en/p5.Delay/feedback.mdx
new file mode 100644
index 0000000000..b360e1d8b3
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/feedback.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: feedback
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Feedback occurs when Delay sends its signal back through its input
+  in a loop. The feedback amount determines how much signal to send each
+  time through the loop. A feedback greater than 1.0 is not desirable because
+  it will increase the overall output each time through the loop,
+  creating an infinite feedback loop. The default value is 0.5</p>
+line: 8116
+params:
+  - name: feedback
+    description: |
+      <p>0.0 to 1.0, or an object such as an
+                                      Oscillator that can be used to
+                                      modulate this param</p>
+    type: Number|Object
+itemtype: method
+class: p5.Delay
+return:
+  description: Feedback value
+  type: Number
+chainable: false
+---
+
+
+# feedback
diff --git a/src/content/reference/en/p5.Delay/filter.mdx b/src/content/reference/en/p5.Delay/filter.mdx
new file mode 100644
index 0000000000..090e19e1eb
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/filter.mdx
@@ -0,0 +1,31 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: filter
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set a lowpass filter frequency for the delay. A lowpass filter
+  will cut off any frequencies higher than the filter frequency.</p>
+line: 8148
+params:
+  - name: cutoffFreq
+    description: |
+      <p>A lowpass filter will cut off any
+                                  frequencies higher than the filter frequency.</p>
+    type: Number|Object
+  - name: res
+    description: |
+      <p>Resonance of the filter frequency
+                                  cutoff, or an object (i.e. a p5.Oscillator)
+                                  that can be used to modulate this parameter.
+                                  High numbers (i.e. 15) will produce a resonance,
+                                  low numbers (i.e. .2) will produce a slope.</p>
+    type: Number|Object
+itemtype: method
+class: p5.Delay
+chainable: false
+---
+
+
+# filter
diff --git a/src/content/reference/en/p5.Delay/leftDelay.mdx b/src/content/reference/en/p5.Delay/leftDelay.mdx
new file mode 100644
index 0000000000..7a3676f460
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/leftDelay.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: leftDelay
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>The p5.Delay is built with two
+  <a href="http://www.w3.org/TR/webaudio/#DelayNode">
+  Web Audio Delay Nodes</a>, one for each stereo channel.</p>
+line: 7989
+itemtype: property
+class: p5.Delay
+chainable: false
+---
+
+
+# leftDelay
diff --git a/src/content/reference/en/p5.Delay/process.mdx b/src/content/reference/en/p5.Delay/process.mdx
new file mode 100644
index 0000000000..92c8aa3395
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/process.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Add delay to an audio signal according to a set
+  of delay parameters.</p>
+line: 8049
+params:
+  - name: Signal
+    description: |
+      <p>An object that outputs audio</p>
+    type: Object
+  - name: delayTime
+    description: |
+      <p>Time (in seconds) of the delay/echo.
+                                   Some browsers limit delayTime to
+                                   1 second.</p>
+    type: Number
+    optional: true
+  - name: feedback
+    description: |
+      <p>sends the delay back through itself
+                                   in a loop that decreases in volume
+                                   each time.</p>
+    type: Number
+    optional: true
+  - name: lowPass
+    description: |
+      <p>Cutoff frequency. Only frequencies
+                                   below the lowPass will be part of the
+                                   delay.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Delay
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Delay/rightDelay.mdx b/src/content/reference/en/p5.Delay/rightDelay.mdx
new file mode 100644
index 0000000000..84396b6116
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/rightDelay.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rightDelay
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>The p5.Delay is built with two
+  <a href="http://www.w3.org/TR/webaudio/#DelayNode">
+  Web Audio Delay Nodes</a>, one for each stereo channel.</p>
+line: 7999
+itemtype: property
+class: p5.Delay
+chainable: false
+---
+
+
+# rightDelay
diff --git a/src/content/reference/en/p5.Delay/setType.mdx b/src/content/reference/en/p5.Delay/setType.mdx
new file mode 100644
index 0000000000..a95a6746d3
--- /dev/null
+++ b/src/content/reference/en/p5.Delay/setType.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setType
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Choose a preset type of delay. 'pingPong' bounces the signal
+  from the left to the right channel to produce a stereo effect.
+  Any other parameter will revert to the default delay setting.</p>
+line: 8170
+params:
+  - name: type
+    description: |
+      <p>'pingPong' (1) or 'default' (0)</p>
+    type: String|Number
+itemtype: method
+class: p5.Delay
+chainable: false
+---
+
+
+# setType
diff --git a/src/content/reference/en/p5.Distortion/WaveShaperNode.mdx b/src/content/reference/en/p5.Distortion/WaveShaperNode.mdx
new file mode 100644
index 0000000000..a793819c50
--- /dev/null
+++ b/src/content/reference/en/p5.Distortion/WaveShaperNode.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: WaveShaperNode
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>The p5.Distortion is built with a
+  <a href="http://www.w3.org/TR/webaudio/#WaveShaperNode">
+  Web Audio WaveShaper Node</a>.</p>
+line: 10864
+itemtype: property
+class: p5.Distortion
+chainable: false
+---
+
+
+# WaveShaperNode
diff --git a/src/content/reference/en/p5.Distortion/getAmount.mdx b/src/content/reference/en/p5.Distortion/getAmount.mdx
new file mode 100644
index 0000000000..c998dff578
--- /dev/null
+++ b/src/content/reference/en/p5.Distortion/getAmount.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getAmount
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Return the distortion amount, typically between 0-1.</p>
+line: 10923
+itemtype: method
+class: p5.Distortion
+return:
+  description: |-
+    Unbounded distortion amount.
+                     Normal values range from 0-1.
+  type: Number
+chainable: false
+---
+
+
+# getAmount
diff --git a/src/content/reference/en/p5.Distortion/getOversample.mdx b/src/content/reference/en/p5.Distortion/getOversample.mdx
new file mode 100644
index 0000000000..6b848d6cea
--- /dev/null
+++ b/src/content/reference/en/p5.Distortion/getOversample.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getOversample
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Return the oversampling.</p>
+line: 10937
+itemtype: method
+class: p5.Distortion
+return:
+  description: 'Oversample can either be ''none'', ''2x'', or ''4x''.'
+  type: String
+chainable: false
+---
+
+
+# getOversample
diff --git a/src/content/reference/en/p5.Distortion/process.mdx b/src/content/reference/en/p5.Distortion/process.mdx
new file mode 100644
index 0000000000..4df770a511
--- /dev/null
+++ b/src/content/reference/en/p5.Distortion/process.mdx
@@ -0,0 +1,31 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Process a sound source, optionally specify amount and oversample
+  values.</p>
+line: 10883
+params:
+  - name: amount
+    description: |
+      <p>Unbounded distortion amount.
+                                     Normal values range from 0-1.</p>
+    type: Number
+    optional: true
+    optdefault: '0.25'
+  - name: oversample
+    description: |
+      <p>'none', '2x', or '4x'.</p>
+    type: String
+    optional: true
+    optdefault: '''none'''
+itemtype: method
+class: p5.Distortion
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Distortion/set.mdx b/src/content/reference/en/p5.Distortion/set.mdx
new file mode 100644
index 0000000000..e85bed80b6
--- /dev/null
+++ b/src/content/reference/en/p5.Distortion/set.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the amount and oversample of the waveshaper distortion.</p>
+line: 10900
+params:
+  - name: amount
+    description: |
+      <p>Unbounded distortion amount.
+                                     Normal values range from 0-1.</p>
+    type: Number
+    optional: true
+    optdefault: '0.25'
+  - name: oversample
+    description: |
+      <p>'none', '2x', or '4x'.</p>
+    type: String
+    optional: true
+    optdefault: '''none'''
+itemtype: method
+class: p5.Distortion
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.EQ/bands.mdx b/src/content/reference/en/p5.EQ/bands.mdx
new file mode 100644
index 0000000000..308997bd9d
--- /dev/null
+++ b/src/content/reference/en/p5.EQ/bands.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: bands
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>The p5.EQ is built with abstracted p5.Filter objects.
+  To modify any bands, use methods of the <a
+  href="/reference/#/p5.Filter" title="p5.Filter reference">
+  p5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.
+  Bands are stored in an array, with indices 0 - 3, or 0 - 7</p>
+line: 7198
+itemtype: property
+class: p5.EQ
+chainable: false
+---
+
+
+# bands
diff --git a/src/content/reference/en/p5.EQ/process.mdx b/src/content/reference/en/p5.EQ/process.mdx
new file mode 100644
index 0000000000..77557a0e89
--- /dev/null
+++ b/src/content/reference/en/p5.EQ/process.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Process an input by connecting it to the EQ</p>
+line: 7239
+params:
+  - name: src
+    description: |
+      <p>Audio source</p>
+    type: Object
+itemtype: method
+class: p5.EQ
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Effect/amp.mdx b/src/content/reference/en/p5.Effect/amp.mdx
new file mode 100644
index 0000000000..408e0072ca
--- /dev/null
+++ b/src/content/reference/en/p5.Effect/amp.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the output volume of the filter.</p>
+line: 6478
+params:
+  - name: vol
+    description: |
+      <p>amplitude between 0 and 1.0</p>
+    type: Number
+    optional: true
+  - name: rampTime
+    description: |
+      <p>create a fade that lasts until rampTime</p>
+    type: Number
+    optional: true
+  - name: tFromNow
+    description: |
+      <p>schedule this event to happen in tFromNow seconds</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Effect
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.Effect/chain.mdx b/src/content/reference/en/p5.Effect/chain.mdx
new file mode 100644
index 0000000000..077ea991eb
--- /dev/null
+++ b/src/content/reference/en/p5.Effect/chain.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: chain
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Link effects together in a chain
+  Example usage: filter.chain(reverb, delay, panner);
+  May be used with an open-ended number of arguments</p>
+line: 6502
+params:
+  - name: arguments
+    description: |
+      <p>Chain together multiple sound objects</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.Effect
+chainable: false
+---
+
+
+# chain
diff --git a/src/content/reference/en/p5.Effect/connect.mdx b/src/content/reference/en/p5.Effect/connect.mdx
new file mode 100644
index 0000000000..ede401e05a
--- /dev/null
+++ b/src/content/reference/en/p5.Effect/connect.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Send output to a p5.js-sound, Web Audio Node, or use signal to
+  control an AudioParam</p>
+line: 6542
+params:
+  - name: unit
+    description: ''
+    type: Object
+itemtype: method
+class: p5.Effect
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.Effect/disconnect.mdx b/src/content/reference/en/p5.Effect/disconnect.mdx
new file mode 100644
index 0000000000..81ad3a3a32
--- /dev/null
+++ b/src/content/reference/en/p5.Effect/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect all output.</p>
+line: 6557
+itemtype: method
+class: p5.Effect
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.Effect/drywet.mdx b/src/content/reference/en/p5.Effect/drywet.mdx
new file mode 100644
index 0000000000..ccb709c2ce
--- /dev/null
+++ b/src/content/reference/en/p5.Effect/drywet.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: drywet
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Adjust the dry/wet value.</p>
+line: 6525
+params:
+  - name: fade
+    description: |
+      <p>The desired drywet value (0 - 1.0)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Effect
+chainable: false
+---
+
+
+# drywet
diff --git a/src/content/reference/en/p5.Element/addClass.mdx b/src/content/reference/en/p5.Element/addClass.mdx
new file mode 100644
index 0000000000..da8261743d
--- /dev/null
+++ b/src/content/reference/en/p5.Element/addClass.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addClass
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Adds specified class to the element.</p>
+line: 2323
+params:
+  - name: class
+    description: |
+      <p>name of class to add</p>
+    type: String
+itemtype: method
+class: p5.Element
+example:
+  - |2-
+
+     <div class='norender'><code>
+     let div = createDiv('div');
+     div.addClass('myClass');
+     </code></div>
+chainable: true
+---
+
+
+# addClass
diff --git a/src/content/reference/en/p5.Element/attribute.mdx b/src/content/reference/en/p5.Element/attribute.mdx
new file mode 100644
index 0000000000..11c307740e
--- /dev/null
+++ b/src/content/reference/en/p5.Element/attribute.mdx
@@ -0,0 +1,91 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: attribute
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Adds an
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes"
+  target="_blank">attribute</a>
+
+  to the element. This method is useful for advanced tasks.</p>
+
+  <p>Most commonly-used attributes, such as <code>id</code>, can be set with
+  their
+
+  dedicated methods. For example, <code>nextButton.id('next')</code> sets an
+  element's
+
+  <code>id</code> attribute.</p>
+
+  <p>The first parameter, <code>attr</code>, is the attribute's name as a
+  string. Calling
+
+  <code>myElement.attribute('align')</code> returns the attribute's current
+  value as a
+
+  string or <code>null</code> if it hasn't been set.</p>
+
+  <p>The second parameter, <code>value</code>, is optional. It's a string used
+  to set the
+
+  attribute's value. For example, calling
+
+  <code>myElement.attribute('align', 'center')</code> sets the element's
+  horizontal
+
+  alignment to <code>center</code>.</p>
+line: 2859
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a container div and
+      // place it at the top-left
+      // corner.
+      let container = createDiv();
+      container.position(0, 0);
+
+      // Create a paragraph element
+      // and place it within the container.
+      // Set its horizontal alignment to
+      // "left".
+      let p1 = createP('hi');
+      p1.parent(container);
+      p1.attribute('align', 'left');
+
+      // Create a paragraph element
+      // and place it within the container.
+      // Set its horizontal alignment to
+      // "center".
+      let p2 = createP('hi');
+      p2.parent(container);
+      p2.attribute('align', 'center');
+
+      // Create a paragraph element
+      // and place it within the container.
+      // Set its horizontal alignment to
+      // "right".
+      let p3 = createP('hi');
+      p3.parent(container);
+      p3.attribute('align', 'right');
+
+      describe('A gray square with the text "hi" written on three separate lines, each placed further to the right.');
+    }
+    </code>
+    </div>
+return:
+  description: value of the attribute.
+  type: String
+chainable: false
+---
+
+
+# attribute
diff --git a/src/content/reference/en/p5.Element/center.mdx b/src/content/reference/en/p5.Element/center.mdx
new file mode 100644
index 0000000000..d4b8c98e18
--- /dev/null
+++ b/src/content/reference/en/p5.Element/center.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: center
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Centers a p5.Element either vertically, horizontally,
+  or both, relative to its parent or according to
+  the body if the p5.Element has no parent. If no argument is passed
+  the p5.Element is aligned both vertically and horizontally.</p>
+line: 2494
+params:
+  - name: align
+    description: |
+      <p>passing 'vertical', 'horizontal' aligns element accordingly</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div><code>
+    function setup() {
+      let div = createDiv('').size(10, 10);
+      div.style('background-color', 'orange');
+      div.center();
+    }
+    </code></div>
+chainable: true
+---
+
+
+# center
diff --git a/src/content/reference/en/p5.Element/child.mdx b/src/content/reference/en/p5.Element/child.mdx
new file mode 100644
index 0000000000..85da1f3743
--- /dev/null
+++ b/src/content/reference/en/p5.Element/child.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: child
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Attaches the element  as a child to the parent specified.
+   Accepts either a string ID, DOM node, or <a href="#/p5.Element">p5.Element</a>.
+   If no argument is specified, an array of children DOM nodes is returned.</p>
+line: 2441
+itemtype: method
+class: p5.Element
+example:
+  - |2-
+
+     <div class='norender'><code>
+     let div0 = createDiv('this is the parent');
+     let div1 = createDiv('this is the child');
+     div0.child(div1); // use p5.Element
+     </code></div>
+     <div class='norender'><code>
+     let div0 = createDiv('this is the parent');
+     let div1 = createDiv('this is the child');
+     div1.id('apples');
+     div0.child('apples'); // use id
+     </code></div>
+     <div class='norender notest'><code>
+     // this example assumes there is a div already on the page
+     // with id "myChildDiv"
+     let div0 = createDiv('this is the parent');
+     let elt = document.getElementById('myChildDiv');
+     div0.child(elt); // use element from page
+     </code></div>
+return:
+  description: an array of child nodes
+  type: 'Node[]'
+chainable: false
+---
+
+
+# child
diff --git a/src/content/reference/en/p5.Element/class.mdx b/src/content/reference/en/p5.Element/class.mdx
new file mode 100644
index 0000000000..97a27cee73
--- /dev/null
+++ b/src/content/reference/en/p5.Element/class.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: class
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>Adds a
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class"
+  target="_blank">class attribute</a>
+
+  to the element.</p>
+
+  <p>Calling <code>myElement.class()</code> without an argument returns a string
+  with its current classes.</p>
+line: 280
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Add the class "small" to the
+      // canvas element.
+      cnv.class('small');
+
+      // Get the canvas element's class
+      // and display it.
+      let c = cnv.class();
+      text(c, 35, 54);
+
+      describe('The word "small" written in black on a gray canvas.');
+
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# class
diff --git a/src/content/reference/en/p5.Element/doubleClicked.mdx b/src/content/reference/en/p5.Element/doubleClicked.mdx
new file mode 100644
index 0000000000..d5d41c5b4a
--- /dev/null
+++ b/src/content/reference/en/p5.Element/doubleClicked.mdx
@@ -0,0 +1,73 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: doubleClicked
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the mouse is pressed twice over the element.
+  Calling <code>myElement.doubleClicked(false)</code> disables the function.</p>
+line: 404
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse is
+                                     double clicked over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // canvas is double-clicked.
+      cnv.doubleClicked(randomColor);
+
+      describe('A gray square changes color when the user double-clicks the canvas.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the canvas is double-clicked.
+      cnv.doubleClicked(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the user double-clicks the canvas.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# doubleClicked
diff --git a/src/content/reference/en/p5.Element/dragLeave.mdx b/src/content/reference/en/p5.Element/dragLeave.mdx
new file mode 100644
index 0000000000..b493e16034
--- /dev/null
+++ b/src/content/reference/en/p5.Element/dragLeave.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: dragLeave
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when a file is dragged off the element. Calling
+  Calling <code>myElement.dragLeave(false)</code> disables the function.</p>
+line: 1153
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the file is
+                                     dragged off the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    // Drag a file over, then off
+    // the canvas to test.
+
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call byeFile() when a
+      // file is dragged over,
+      // then off the canvas.
+      cnv.dragLeave(byeFile);
+
+      describe('A gray square. The text "bye, file" appears when a file is dragged over, then off the square.');
+    }
+
+    function byeFile() {
+      text('bye, file', 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Drag a file over, then off
+    // the canvas to test.
+
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Say "bye, file" when a
+      // file is dragged over,
+      // then off the canvas.
+      cnv.dragLeave(() => {
+        text('bye, file', 50, 50);
+      });
+
+      describe('A gray square. The text "bye, file" appears when a file is dragged over, then off the square.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# dragLeave
diff --git a/src/content/reference/en/p5.Element/dragOver.mdx b/src/content/reference/en/p5.Element/dragOver.mdx
new file mode 100644
index 0000000000..b1e7723b36
--- /dev/null
+++ b/src/content/reference/en/p5.Element/dragOver.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: dragOver
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when a file is dragged over the element. Calling
+  <code>myElement.dragOver(false)</code> disables the function.</p>
+line: 1090
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the file is
+                                     dragged over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    // Drag a file over the canvas to test.
+
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call helloFile() when a
+      // file is dragged over
+      // the canvas.
+      cnv.dragOver(helloFile);
+
+      describe('A gray square. The text "hello, file" appears when a file is dragged over the square.');
+    }
+
+    function helloFile() {
+      text('hello, file', 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Drag a file over the canvas to test.
+
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Say "hello, file" when a
+      // file is dragged over
+      // the canvas.
+      cnv.dragOver(() => {
+        text('hello, file', 50, 50);
+      });
+
+      describe('A gray square. The text "hello, file" appears when a file is dragged over the square.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# dragOver
diff --git a/src/content/reference/en/p5.Element/draggable.mdx b/src/content/reference/en/p5.Element/draggable.mdx
new file mode 100644
index 0000000000..8edaa95331
--- /dev/null
+++ b/src/content/reference/en/p5.Element/draggable.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: draggable
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Turns p5.Element into a draggable item. If an argument is given, it will
+  drag that p5.Element instead, ie. drag a entire GUI panel (parent container)
+  with the panel's title bar.</p>
+line: 3511
+params:
+  - name: elmnt
+    description: |
+      <p>pass another p5.Element</p>
+    type: p5.Element
+    optional: true
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div><code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      createDiv('Post-It')
+        .position(5, 5)
+        .size(75, 20)
+        .style('font-size', '16px')
+        .style('background', 'yellow')
+        .style('color', '#000')
+        .style('border', '1px solid #aaaa00')
+        .style('padding', '5px')
+        .draggable();
+      // .style('cursor', 'help') // override cursor
+
+      let gui = createDiv('')
+        .position(5, 40)
+        .size(85, 50)
+        .style('font-size', '16px')
+        .style('background', 'yellow')
+        .style('z-index', '100')
+        .style('border', '1px solid #00aaaa');
+
+      createDiv('= PANEL =')
+        .parent(gui)
+        .style('background', 'cyan')
+        .style('padding', '2px')
+        .style('text-align', 'center')
+        .draggable(gui);
+
+      createSlider(0, 100, random(100))
+        .style('cursor', 'pointer')
+        .size(80, 5)
+        .parent(gui);
+    }
+    </code></div>
+chainable: true
+---
+
+
+# draggable
diff --git a/src/content/reference/en/p5.Element/drop.mdx b/src/content/reference/en/p5.Element/drop.mdx
new file mode 100644
index 0000000000..33c9d45797
--- /dev/null
+++ b/src/content/reference/en/p5.Element/drop.mdx
@@ -0,0 +1,140 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: drop
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Sets a function to call when the user drops a file on the element.</p>
+
+  <p>The first parameter, <code>callback</code>, is a function to call once the
+  file loads.
+
+  The callback function should have one parameter, <code>file</code>, that's a
+
+  <a href="#/p5.File">p5.File</a> object. If the user drops multiple files on
+
+  the element, <code>callback</code>, is called once for each file.</p>
+
+  <p>The second parameter, <code>fxn</code>, is a function to call when the
+  browser detects
+
+  one or more dropped files. The callback function should have one
+
+  parameter, <code>event</code>, that's a
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent">DragEvent</a>.</p>
+line: 3355
+params:
+  - name: callback
+    description: |
+      <p>called when a file loads. Called once for each file dropped.</p>
+    type: Function
+  - name: fxn
+    description: |
+      <p>called once when any files are dropped.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    // Drop an image on the canvas to view
+    // this example.
+    let img;
+
+    function setup() {
+      let c = createCanvas(100, 100);
+
+      background(200);
+
+      // Call a function when a file
+      // dropped on the canvas has
+      // loaded.
+      c.drop(file => {
+        // Remove the current image, if any.
+        if (img) {
+          img.remove();
+        }
+
+        // Create an <img> element with the
+        // dropped file.
+        img = createImg(file.data, '');
+        img.hide();
+
+        // Draw the image.
+        image(img, 0, 0, width, height);
+      });
+
+      describe('A gray square. When the user drops an image on the square, it is displayed.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Drop an image on the canvas to view
+    // this example.
+    let img;
+    let msg;
+
+    function setup() {
+      let c = createCanvas(100, 100);
+
+      background(200);
+
+      // Call functions when the user
+      // drops a file on the canvas
+      // and when the file loads.
+      c.drop(handleFile, handleDrop);
+
+      describe('A gray square. When the user drops an image on the square, it is displayed. The id attribute of canvas element is also displayed.');
+    }
+
+    function handleFile(file) {
+      // Remove the current image, if any.
+      if (img) {
+        img.remove();
+      }
+
+      // Create an <img> element with the
+      // dropped file.
+      img = createImg(file.data, '');
+      img.hide();
+
+      // Draw the image.
+      image(img, 0, 0, width, height);
+    }
+
+    function handleDrop(event) {
+      // Remove current paragraph, if any.
+      if (msg) {
+        msg.remove();
+      }
+
+      // Use event to get the drop
+      // target's id.
+      let id = event.target.id;
+
+      // Write the canvas' id
+      // beneath it.
+      msg = createP(id);
+      msg.position(0, 100);
+
+      // Set the font color
+      // randomly for each drop.
+      let c = random(['red', 'green', 'blue']);
+      msg.style('color', c);
+      msg.style('font-size', '12px');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# drop
diff --git a/src/content/reference/en/p5.Element/elt.mdx b/src/content/reference/en/p5.Element/elt.mdx
new file mode 100644
index 0000000000..e6a3a03034
--- /dev/null
+++ b/src/content/reference/en/p5.Element/elt.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: elt
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>Underlying
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"
+  target="_blank">HTMLElement</a>
+
+  object. Its properties and methods can be used directly.</p>
+line: 55
+itemtype: property
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Set the border style for the
+      // canvas.
+      cnv.elt.style.border = '5px dashed deeppink';
+
+      describe('A gray square with a pink border drawn with dashed lines.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# elt
diff --git a/src/content/reference/en/p5.Element/hasClass.mdx b/src/content/reference/en/p5.Element/hasClass.mdx
new file mode 100644
index 0000000000..bf3b0ee728
--- /dev/null
+++ b/src/content/reference/en/p5.Element/hasClass.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hasClass
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Checks if specified class is already applied to element.</p>
+line: 2379
+params:
+  - name: c
+    description: |
+      <p>class name of class to check</p>
+    type: String
+itemtype: method
+class: p5.Element
+example:
+  - |2-
+
+     <div class='norender'><code>
+     let div;
+    function setup() {
+       div = createDiv('div');
+       div.addClass('show');
+     }
+    function mousePressed() {
+       if (div.hasClass('show')) {
+         div.addClass('show');
+       } else {
+         div.removeClass('show');
+       }
+     }
+     </code></div>
+return:
+  description: a boolean value if element has specified class
+  type: Boolean
+chainable: false
+---
+
+
+# hasClass
diff --git a/src/content/reference/en/p5.Element/height.mdx b/src/content/reference/en/p5.Element/height.mdx
new file mode 100644
index 0000000000..fff7f50048
--- /dev/null
+++ b/src/content/reference/en/p5.Element/height.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: height
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: ''
+line: 97
+itemtype: property
+class: p5.Element
+chainable: false
+---
+
+
+# height
diff --git a/src/content/reference/en/p5.Element/hide.mdx b/src/content/reference/en/p5.Element/hide.mdx
new file mode 100644
index 0000000000..9872a6c3bc
--- /dev/null
+++ b/src/content/reference/en/p5.Element/hide.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hide
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Hides the current element.</p>
+line: 3110
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    let p;
+
+    function setup() {
+      background(200);
+
+      // Create a paragraph element.
+      p = createP('p5*js');
+      p.position(10, 10);
+
+      describe('The text "p5*js" at the center of a gray square. The text disappears when the user double-clicks the square.');
+    }
+
+    // Hide the paragraph when double-clicked.
+    function doubleClicked() {
+      p.hide();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# hide
diff --git a/src/content/reference/en/p5.Element/html.mdx b/src/content/reference/en/p5.Element/html.mdx
new file mode 100644
index 0000000000..4c493ff8ab
--- /dev/null
+++ b/src/content/reference/en/p5.Element/html.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: html
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>If an argument is given, sets the inner HTML of the element,
+   replacing any existing HTML. If true is included as a second
+   argument, HTML is appended instead of replacing existing HTML.
+   If no arguments are given, returns
+   the inner HTML of the element.</p>
+line: 2545
+itemtype: method
+class: p5.Element
+example:
+  - |2-
+
+     <div class='norender'><code>
+     let div = createDiv('').size(100, 100);
+     div.html('hi');
+     </code></div>
+     <div class='norender'><code>
+     let div = createDiv('Hello ').size(100, 100);
+     div.html('World', true);
+     </code></div>
+return:
+  description: the inner HTML of the element
+  type: String
+chainable: false
+---
+
+
+# html
diff --git a/src/content/reference/en/p5.Element/id.mdx b/src/content/reference/en/p5.Element/id.mdx
new file mode 100644
index 0000000000..b4ae7ef1cc
--- /dev/null
+++ b/src/content/reference/en/p5.Element/id.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: id
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>Sets this element's ID using a given string.</p>
+
+  <p>Calling <code>myElement.id()</code> without an argument returns its ID as a
+  string.</p>
+line: 233
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Set the canvas' ID
+      // to "mycanvas".
+      cnv.id('mycanvas');
+
+      // Get the canvas' ID.
+      let id = cnv.id();
+      text(id, 24, 54);
+
+      describe('The text "mycanvas" written in black on a gray background.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# id
diff --git a/src/content/reference/en/p5.Element/mouseClicked.mdx b/src/content/reference/en/p5.Element/mouseClicked.mdx
new file mode 100644
index 0000000000..260b772820
--- /dev/null
+++ b/src/content/reference/en/p5.Element/mouseClicked.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseClicked
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the mouse is pressed and released over the element.
+  Calling <code>myElement.mouseReleased(false)</code> disables the function.</p>
+  <p>Note: Some mobile browsers may also trigger this event when the element
+  receives a quick tap.</p>
+line: 638
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse is
+                                     pressed and released over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when a
+      // mouse press ends.
+      cnv.mouseClicked(randomColor);
+
+      describe('A gray square changes color when the user releases a mouse press.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when a mouse press ends.
+      cnv.mouseClicked(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the user releases a mouse press.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# mouseClicked
diff --git a/src/content/reference/en/p5.Element/mouseMoved.mdx b/src/content/reference/en/p5.Element/mouseMoved.mdx
new file mode 100644
index 0000000000..dc657a5144
--- /dev/null
+++ b/src/content/reference/en/p5.Element/mouseMoved.mdx
@@ -0,0 +1,73 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseMoved
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the mouse moves over the element. Calling
+  <code>myElement.mouseMoved(false)</code> disables the function.</p>
+line: 703
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse
+                                     moves over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // mouse moves.
+      cnv.mouseMoved(randomColor);
+
+      describe('A gray square changes color when the mouse moves over the canvas.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the mouse moves.
+      cnv.mouseMoved(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the mouse moves over the canvas.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# mouseMoved
diff --git a/src/content/reference/en/p5.Element/mouseOut.mdx b/src/content/reference/en/p5.Element/mouseOut.mdx
new file mode 100644
index 0000000000..7a50b2a45e
--- /dev/null
+++ b/src/content/reference/en/p5.Element/mouseOut.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseOut
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the mouse moves off the element. Calling
+  <code>myElement.mouseOut(false)</code> disables the function.</p>
+line: 828
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse
+                                     moves off the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // mouse moves off the canvas.
+      cnv.mouseOut(randomColor);
+
+      describe('A gray square changes color when the mouse moves off the canvas.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the mouse moves off
+      // the canvas.
+      cnv.mouseOut(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the mouse moves off the canvas.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# mouseOut
diff --git a/src/content/reference/en/p5.Element/mouseOver.mdx b/src/content/reference/en/p5.Element/mouseOver.mdx
new file mode 100644
index 0000000000..a24d8c067e
--- /dev/null
+++ b/src/content/reference/en/p5.Element/mouseOver.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseOver
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the mouse moves onto the element. Calling
+  <code>myElement.mouseOver(false)</code> disables the function.</p>
+line: 765
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse
+                                     moves onto the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // mouse moves onto the canvas.
+      cnv.mouseOver(randomColor);
+
+      describe('A gray square changes color when the mouse moves onto the canvas.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the mouse moves onto
+      // the canvas.
+      cnv.mouseOver(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the mouse moves onto the canvas.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# mouseOver
diff --git a/src/content/reference/en/p5.Element/mousePressed.mdx b/src/content/reference/en/p5.Element/mousePressed.mdx
new file mode 100644
index 0000000000..8f89b9b9a3
--- /dev/null
+++ b/src/content/reference/en/p5.Element/mousePressed.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mousePressed
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the mouse is pressed over the element.
+  Calling <code>myElement.mousePressed(false)</code> disables the function.</p>
+  <p>Note: Some mobile browsers may also trigger this event when the element
+  receives a quick tap.</p>
+line: 329
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse is
+                                     pressed over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the canvas
+      // is pressed.
+      cnv.mousePressed(randomColor);
+
+      describe('A gray square changes color when the mouse is pressed.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the canvas is pressed.
+      cnv.mousePressed(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the mouse is pressed.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# mousePressed
diff --git a/src/content/reference/en/p5.Element/mouseReleased.mdx b/src/content/reference/en/p5.Element/mouseReleased.mdx
new file mode 100644
index 0000000000..e73fa3e9a9
--- /dev/null
+++ b/src/content/reference/en/p5.Element/mouseReleased.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseReleased
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the mouse is released over the element. Calling
+  <code>myElement.mouseReleased(false)</code> disables the function.</p>
+  <p>Note: Some mobile browsers may also trigger this event when the element
+  receives a quick tap.</p>
+line: 573
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse is
+                                     pressed over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when a
+      // mouse press ends.
+      cnv.mouseReleased(randomColor);
+
+      describe('A gray square changes color when the user releases a mouse press.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when a mouse press ends.
+      cnv.mouseReleased(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the user releases a mouse press.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# mouseReleased
diff --git a/src/content/reference/en/p5.Element/mouseWheel.mdx b/src/content/reference/en/p5.Element/mouseWheel.mdx
new file mode 100644
index 0000000000..14cf44fb2e
--- /dev/null
+++ b/src/content/reference/en/p5.Element/mouseWheel.mdx
@@ -0,0 +1,126 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseWheel
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>Calls a function when the mouse wheel scrolls over th element.</p>
+
+  <p>The callback function, <code>fxn</code>, is passed an <code>event</code>
+  object. <code>event</code> has
+
+  two numeric properties, <code>deltaY</code> and <code>deltaX</code>.
+  <code>event.deltaY</code> is
+
+  negative if the mouse wheel rotates away from the user. It's positive if
+
+  the mouse wheel rotates toward the user. <code>event.deltaX</code> is positive
+  if
+
+  the mouse wheel moves to the right. It's negative if the mouse wheel moves
+
+  to the left.</p>
+
+  <p>Calling <code>myElement.mouseWheel(false)</code> disables the function.</p>
+line: 466
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the mouse wheel is
+                                     scrolled over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // mouse wheel moves.
+      cnv.mouseWheel(randomColor);
+
+      describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the mouse wheel moves.
+      cnv.mouseWheel(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call changeBackground() when the
+      // mouse wheel moves.
+      cnv.mouseWheel(changeBackground);
+
+      describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');
+    }
+
+    function changeBackground(event) {
+      // Change the background color
+      // based on deltaY.
+      if (event.deltaY > 0) {
+        background('deeppink');
+      } else if (event.deltaY < 0) {
+        background('cornflowerblue');
+      } else {
+        background(200);
+      }
+
+      // Draw a shape based on deltaX.
+      if (event.deltaX > 0) {
+        circle(50, 50, 20);
+      } else if (event.deltaX < 0) {
+        square(40, 40, 20);
+      }
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# mouseWheel
diff --git a/src/content/reference/en/p5.Element/parent.mdx b/src/content/reference/en/p5.Element/parent.mdx
new file mode 100644
index 0000000000..0fff8904be
--- /dev/null
+++ b/src/content/reference/en/p5.Element/parent.mdx
@@ -0,0 +1,130 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: parent
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>Attaches this element to a parent element.</p>
+
+  <p>For example, a <code>&lt;div&gt;&lt;/div&gt;</code> element may be used as
+  a box to
+
+  hold two pieces of text, a header and a paragraph. The
+
+  <code>&lt;div&gt;&lt;/div&gt;</code> is the parent element of both the header
+  and
+
+  paragraph.</p>
+
+  <p>The parameter <code>parent</code> can have one of three types.
+  <code>parent</code> can be a
+
+  string with the parent element's ID, as in
+
+  <code>myElement.parent('container')</code>. It can also be another
+
+  <a href="#/p5.Element">p5.Element</a> object, as in
+
+  <code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be an
+  <code>HTMLElement</code>
+
+  object, as in <code>myElement.parent(anotherElement)</code>.</p>
+
+  <p>Calling <code>myElement.parent()</code> without an argument returns this
+  element's
+
+  parent.</p>
+line: 105
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup()  {
+      background(200);
+
+      // Create a div element.
+      let div = createDiv();
+      // Place the div in the top-left corner.
+      div.position(10, 20);
+      // Set its width and height.
+      div.size(80, 60);
+      // Set its background color to white
+      div.style('background-color', 'white');
+      // Align any text to the center.
+      div.style('text-align', 'center');
+      // Set its ID to "container".
+      div.id('container');
+
+      // Create a paragraph element.
+      let p = createP('p5*js');
+      // Make the div its parent
+      // using its ID "container".
+      p.parent('container');
+
+      describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup()  {
+      background(200);
+
+      // Create rectangular div element.
+      let div = createDiv();
+      // Place the div in the top-left corner.
+      div.position(10, 20);
+      // Set its width and height.
+      div.size(80, 60);
+      // Set its background color and align
+      // any text to the center.
+      div.style('background-color', 'white');
+      div.style('text-align', 'center');
+
+      // Create a paragraph element.
+      let p = createP('p5*js');
+      // Make the div its parent.
+      p.parent(div);
+
+      describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup()  {
+      background(200);
+
+      // Create rectangular div element.
+      let div = createDiv();
+      // Place the div in the top-left corner.
+      div.position(10, 20);
+      // Set its width and height.
+      div.size(80, 60);
+      // Set its background color and align
+      // any text to the center.
+      div.style('background-color', 'white');
+      div.style('text-align', 'center');
+
+      // Create a paragraph element.
+      let p = createP('p5*js');
+      // Make the div its parent
+      // using the underlying
+      // HTMLElement.
+      p.parent(div.elt);
+
+      describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# parent
diff --git a/src/content/reference/en/p5.Element/position.mdx b/src/content/reference/en/p5.Element/position.mdx
new file mode 100644
index 0000000000..4e9f466726
--- /dev/null
+++ b/src/content/reference/en/p5.Element/position.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: position
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Sets the position of the element. If no position type argument is given,
+  the
+   position will be relative to (0, 0) of the window.
+   Essentially, this sets position:absolute and left and top
+   properties of style. If an optional third argument specifying position type is given,
+   the x and y-coordinates will be interpreted based on the <a target="_blank"
+   href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">positioning scheme</a>.
+   If no arguments given, the function returns the x and y position of the element.
+  found documentation on how to be more specific with object type
+   <a href="https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>
+line: 2584
+itemtype: method
+class: p5.Element
+example:
+  - |2-
+
+     <div><code class='norender'>
+     function setup() {
+       let cnv = createCanvas(100, 100);
+       // positions canvas 50px to the right and 100px
+       // below upper left corner of the window
+       cnv.position(50, 100);
+     }
+     </code></div>
+     <div><code class='norender'>
+     function setup() {
+       let cnv = createCanvas(100, 100);
+       // positions canvas at upper left corner of the window
+       // with a 'fixed' position type
+       cnv.position(0, 0, 'fixed');
+     }
+     </code></div>
+return:
+  description: >-
+    object of form { x: 0, y: 0 } containing the position of the element in an
+    object
+  type: Object
+chainable: false
+---
+
+
+# position
diff --git a/src/content/reference/en/p5.Element/remove.mdx b/src/content/reference/en/p5.Element/remove.mdx
new file mode 100644
index 0000000000..a08929f00f
--- /dev/null
+++ b/src/content/reference/en/p5.Element/remove.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: remove
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Removes the element, stops all audio/video streams, and removes all
+  callback functions.</p>
+line: 3299
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    let p;
+
+    function setup() {
+      background(200);
+
+      // Create a paragraph element.
+      p = createP('p5*js');
+      p.position(10, 10);
+
+      describe('The text "p5*js" written at the center of a gray square. ');
+    }
+
+    // Remove the paragraph when double-clicked.
+    function doubleClicked() {
+      p.remove();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# remove
diff --git a/src/content/reference/en/p5.Element/removeAttribute.mdx b/src/content/reference/en/p5.Element/removeAttribute.mdx
new file mode 100644
index 0000000000..869684638c
--- /dev/null
+++ b/src/content/reference/en/p5.Element/removeAttribute.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeAttribute
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Removes an attribute from the element.</p>
+
+  <p>The parameter <code>attr</code> is the attribute's name as a string. For
+  example,
+
+  calling <code>myElement.removeAttribute('align')</code> removes its
+  <code>align</code>
+
+  attribute if it's been set.</p>
+line: 2948
+params:
+  - name: attr
+    description: |
+      <p>attribute to remove.</p>
+    type: String
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    let p;
+
+    function setup() {
+      background(200);
+
+      // Create a paragraph element and place it
+      // in the center of the canvas.
+      // Set its "align" attribute to "center".
+      p = createP('hi');
+      p.position(0, 20);
+      p.attribute('align', 'center');
+
+      describe('The text "hi" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');
+    }
+
+    function doubleClicked() {
+      p.removeAttribute('align');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# removeAttribute
diff --git a/src/content/reference/en/p5.Element/removeClass.mdx b/src/content/reference/en/p5.Element/removeClass.mdx
new file mode 100644
index 0000000000..ec8442146f
--- /dev/null
+++ b/src/content/reference/en/p5.Element/removeClass.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeClass
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Removes specified class from the element.</p>
+line: 2348
+params:
+  - name: class
+    description: |
+      <p>name of class to remove</p>
+    type: String
+itemtype: method
+class: p5.Element
+example:
+  - |2-
+
+     <div class='norender'><code>
+     // In this example, a class is set when the div is created
+     // and removed when mouse is pressed. This could link up
+     // with a CSS style rule to toggle style properties.
+    let div;
+    function setup() {
+       div = createDiv('div');
+       div.addClass('myClass');
+     }
+    function mousePressed() {
+       div.removeClass('myClass');
+     }
+     </code></div>
+chainable: true
+---
+
+
+# removeClass
diff --git a/src/content/reference/en/p5.Element/show.mdx b/src/content/reference/en/p5.Element/show.mdx
new file mode 100644
index 0000000000..6a5728ab41
--- /dev/null
+++ b/src/content/reference/en/p5.Element/show.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: show
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Shows the current element.</p>
+line: 3077
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    let p;
+
+    function setup() {
+      background(200);
+
+      // Create a paragraph element and hide it.
+      p = createP('p5*js');
+      p.position(10, 10);
+      p.hide();
+
+      describe('A gray square. The text "p5*js" appears when the user double-clicks the square.');
+    }
+
+    // Show the paragraph when double-clicked.
+    function doubleClicked() {
+      p.show();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# show
diff --git a/src/content/reference/en/p5.Element/size.mdx b/src/content/reference/en/p5.Element/size.mdx
new file mode 100644
index 0000000000..fcc70ae855
--- /dev/null
+++ b/src/content/reference/en/p5.Element/size.mdx
@@ -0,0 +1,132 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: size
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Sets the element's width and height.</p>
+
+  <p>Calling <code>myElement.size()</code> without an argument returns the
+  element's size
+
+  as an object with the properties <code>width</code> and <code>height</code>.
+  For example,
+   <code>{ width: 20, height: 10 }</code>.</p>
+  <p>The first parameter, <code>width</code>, is optional. It's a number used to
+  set the
+
+  element's width. Calling <code>myElement.size(10)</code></p>
+
+  <p>The second parameter, 'height<code>, is also optional. It's a number used
+  to set the element's height. For example, calling </code>myElement.size(20,
+  10)` sets the element's width to 20 pixels and height
+
+  to 10 pixels.</p>
+
+  <p>The constant <code>AUTO</code> can be used to adjust one dimension at a
+  time while
+
+  maintaining the aspect ratio, which is <code>width / height</code>. For
+  example,
+
+  consider an element that's 200 pixels wide and 100 pixels tall. Calling
+
+  <code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and height
+  to 10
+
+  pixels.</p>
+
+  <p>Note: In the case of elements that need to load data, such as images, wait
+
+  to call <code>myElement.size()</code> until after the data loads.</p>
+line: 3140
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a pink div element and place it at
+      // the top-left corner.
+      let div = createDiv();
+      div.position(10, 10);
+      div.style('background-color', 'deeppink');
+
+      // Set the div's width to 80 pixels and
+      // height to 20 pixels.
+      div.size(80, 20);
+
+      describe('A gray square with a pink rectangle near its top.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a pink div element and place it at
+      // the top-left corner.
+      let div = createDiv();
+      div.position(10, 10);
+      div.style('background-color', 'deeppink');
+
+      // Set the div's width to 80 pixels and
+      // height to 40 pixels.
+      div.size(80, 40);
+
+      // Get the div's size as an object.
+      let s = div.size();
+      // Write the div's dimensions.
+      div.html(`${s.width} x ${s.height}`);
+
+      describe('A gray square with a pink rectangle near its top. The text "80 x 40" is written within the rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Load an image of an astronaut on the moon
+      // and place it at the top-left of the canvas.
+      let img1 = createImg(
+        'assets/moonwalk.jpg',
+        'An astronaut walking on the moon',
+        ''
+      );
+      img1.position(0, 0);
+
+      // Load an image of an astronaut on the moon
+      // and place it at the top-left of the canvas.
+      // Resize the image once it's loaded.
+      let img2 = createImg(
+        'assets/moonwalk.jpg',
+        'An astronaut walking on the moon',
+        '',
+        () => {
+          img2.size(50, AUTO);
+        }
+      );
+      img2.position(0, 0);
+
+      describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');
+    }
+    </code>
+    </div>
+return:
+  description: width and height of the element in an object.
+  type: Object
+chainable: false
+---
+
+
+# size
diff --git a/src/content/reference/en/p5.Element/style.mdx b/src/content/reference/en/p5.Element/style.mdx
new file mode 100644
index 0000000000..0280b2ee1b
--- /dev/null
+++ b/src/content/reference/en/p5.Element/style.mdx
@@ -0,0 +1,127 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: style
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Applies a style to an element by adding a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax"
+  target="_blank">CSS declaration</a>.</p>
+
+  <p>The first parameter, <code>property</code>, is a string. If the name of a
+  style
+
+  property is passed, as in <code>myElement.style('color')</code>, the method
+  returns
+
+  the current value as a string or <code>null</code> if it hasn't been set. If a
+
+  <code>property:style</code> string is passed, as in
+
+  <code>myElement.style('color:deeppink')</code>, the method sets
+  <code>property</code> to
+
+  <code>value</code>.</p>
+
+  <p>The second parameter, <code>value</code>, is optional. It sets the
+  property's value.
+
+  <code>value</code> can be a string, as in
+
+  <code>myElement.style('color', 'deeppink')</code>, or a
+
+  <a href="#/p5.Color">p5.Color</a> object, as in
+
+  <code>myElement.style('color', myColor)</code>.</p>
+line: 2704
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a paragraph element and
+      // set its font color to "deeppink".
+      let p = createP('p5*js');
+      p.position(25, 20);
+      p.style('color', 'deeppink');
+
+      describe('The text p5*js written in pink on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a p5.Color object.
+      let c = color('deeppink');
+
+      // Create a paragraph element and
+      // set its font color using a
+      // p5.Color object.
+      let p = createP('p5*js');
+      p.position(25, 20);
+      p.style('color', c);
+
+      describe('The text p5*js written in pink on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a paragraph element and
+      // set its font color to "deeppink"
+      // using property:value syntax.
+      let p = createP('p5*js');
+      p.position(25, 20);
+      p.style('color:deeppink');
+
+      describe('The text p5*js written in pink on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an empty paragraph element
+      // and set its font color to "deeppink".
+      let p = createP();
+      p.position(5, 5);
+      p.style('color', 'deeppink');
+
+      // Get the element's color as an
+      // RGB color string.
+      let c = p.style('color');
+
+      // Set the element's inner HTML
+      // using the RGB color string.
+      p.html(c);
+
+      describe('The text "rgb(255, 20, 147)" written in pink on a gray background.');
+    }
+    </code>
+    </div>
+return:
+  description: value of the property.
+  type: String
+chainable: false
+---
+
+
+# style
diff --git a/src/content/reference/en/p5.Element/toggleClass.mdx b/src/content/reference/en/p5.Element/toggleClass.mdx
new file mode 100644
index 0000000000..620ead9e51
--- /dev/null
+++ b/src/content/reference/en/p5.Element/toggleClass.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: toggleClass
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Toggles element class.</p>
+line: 2408
+params:
+  - name: c
+    description: |
+      <p>class name to toggle</p>
+    type: String
+itemtype: method
+class: p5.Element
+example:
+  - |2-
+
+     <div class='norender'><code>
+     let div;
+    function setup() {
+       div = createDiv('div');
+       div.addClass('show');
+     }
+    function mousePressed() {
+       div.toggleClass('show');
+     }
+     </code></div>
+chainable: true
+---
+
+
+# toggleClass
diff --git a/src/content/reference/en/p5.Element/touchEnded.mdx b/src/content/reference/en/p5.Element/touchEnded.mdx
new file mode 100644
index 0000000000..e414185b7d
--- /dev/null
+++ b/src/content/reference/en/p5.Element/touchEnded.mdx
@@ -0,0 +1,77 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: touchEnded
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the user stops touching the element. Calling
+  <code>myElement.touchMoved(false)</code> disables the function.</p>
+  <p>Note: Touch functions only work on mobile devices.</p>
+line: 1023
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the touch
+                                     ends.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // user touches the canvas,
+      // then lifts their finger.
+      cnv.touchEnded(randomColor);
+
+      describe('A gray square changes color when the user touches the canvas, then lifts their finger.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the user touches the
+      // canvas, then lifts their
+      // finger.
+      cnv.touchEnded(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the user touches the canvas, then lifts their finger.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# touchEnded
diff --git a/src/content/reference/en/p5.Element/touchMoved.mdx b/src/content/reference/en/p5.Element/touchMoved.mdx
new file mode 100644
index 0000000000..ad57d4c3c5
--- /dev/null
+++ b/src/content/reference/en/p5.Element/touchMoved.mdx
@@ -0,0 +1,77 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: touchMoved
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the user touches the element and moves their
+  finger. Calling <code>myElement.touchMoved(false)</code> disables the
+  function.</p>
+  <p>Note: Touch functions only work on mobile devices.</p>
+line: 956
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the touch
+                                     moves over the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // user touches the canvas
+      // and moves.
+      cnv.touchMoved(randomColor);
+
+      describe('A gray square changes color when the user touches the canvas and moves.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the user touches the
+      // canvas and moves.
+      cnv.touchMoved(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the user touches the canvas and moves.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# touchMoved
diff --git a/src/content/reference/en/p5.Element/touchStarted.mdx b/src/content/reference/en/p5.Element/touchStarted.mdx
new file mode 100644
index 0000000000..cfc144f869
--- /dev/null
+++ b/src/content/reference/en/p5.Element/touchStarted.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: touchStarted
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: |
+  <p>Calls a function when the element is touched. Calling
+  <code>myElement.touchStarted(false)</code> disables the function.</p>
+  <p>Note: Touch functions only work on mobile devices.</p>
+line: 891
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the touch
+                                     starts.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Call randomColor() when the
+      // user touches the canvas.
+      cnv.touchStarted(randomColor);
+
+      describe('A gray square changes color when the user touches the canvas.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas element and
+      // assign it to cnv.
+      let cnv = createCanvas(100, 100);
+
+      background(200);
+
+      // Paint the background either
+      // red, yellow, blue, or green
+      // when the user touches the
+      // canvas.
+      cnv.touchStarted(() => {
+        let c = random(['red', 'yellow', 'blue', 'green']);
+        background(c);
+      });
+
+      describe('A gray square changes color when the user touches the canvas.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# touchStarted
diff --git a/src/content/reference/en/p5.Element/value.mdx b/src/content/reference/en/p5.Element/value.mdx
new file mode 100644
index 0000000000..bbafec2ca2
--- /dev/null
+++ b/src/content/reference/en/p5.Element/value.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: value
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Returns or sets the element's value.</p>
+
+  <p>Calling <code>myElement.value()</code> returns the element's current
+  value.</p>
+
+  <p>The parameter, <code>value</code>, is an optional number or string. If
+  provided,
+
+  as in <code>myElement.value(123)</code>, it's used to set the element's
+  value.</p>
+line: 2997
+itemtype: method
+class: p5.Element
+example:
+  - |-
+
+    <div>
+    <code>
+    let inp;
+
+    function setup() {
+      // Create a text input and place it
+      // beneath the canvas. Set its default
+      // value to "hello".
+      inp = createInput('hello');
+      inp.position(0, 100);
+
+      describe('The text from an input box is displayed on a gray square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input's value to display a message.
+      let msg = inp.value();
+      text(msg, 0, 55);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let inp;
+
+    function setup() {
+      // Create a text input and place it
+      // beneath the canvas. Set its default
+      // value to "hello".
+      inp = createInput('hello');
+      inp.position(0, 100);
+
+      describe('The text from an input box is displayed on a gray square. The text resets to "hello" when the user double-clicks the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input's value to display a message.
+      let msg = inp.value();
+      text(msg, 0, 55);
+    }
+
+    // Reset the input's value.
+    function doubleClicked() {
+      inp.value('hello');
+    }
+    </code>
+    </div>
+return:
+  description: value of the element.
+  type: String|Number
+chainable: false
+---
+
+
+# value
diff --git a/src/content/reference/en/p5.Element/width.mdx b/src/content/reference/en/p5.Element/width.mdx
new file mode 100644
index 0000000000..9bf960eb30
--- /dev/null
+++ b/src/content/reference/en/p5.Element/width.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: width
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: ''
+line: 91
+itemtype: property
+class: p5.Element
+chainable: false
+---
+
+
+# width
diff --git a/src/content/reference/en/p5.Envelope/add.mdx b/src/content/reference/en/p5.Envelope/add.mdx
new file mode 100644
index 0000000000..d057c75fca
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/add.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: add
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Add a value to the p5.Oscillator's output amplitude,
+  and return the oscillator. Calling this method
+  again will override the initial add() with new values.</p>
+line: 5460
+params:
+  - name: number
+    description: |
+      <p>Constant number to add</p>
+    type: Number
+itemtype: method
+class: p5.Envelope
+return:
+  description: |-
+    Envelope Returns this envelope
+                                       with scaled output
+  type: p5.Envelope
+chainable: false
+---
+
+
+# add
diff --git a/src/content/reference/en/p5.Envelope/attackLevel.mdx b/src/content/reference/en/p5.Envelope/attackLevel.mdx
new file mode 100644
index 0000000000..de25c50c37
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/attackLevel.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: attackLevel
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Level once attack is complete.</p>
+line: 4772
+itemtype: property
+class: p5.Envelope
+chainable: false
+---
+
+
+# attackLevel
diff --git a/src/content/reference/en/p5.Envelope/attackTime.mdx b/src/content/reference/en/p5.Envelope/attackTime.mdx
new file mode 100644
index 0000000000..6631e4854e
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/attackTime.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: attackTime
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Time until envelope reaches attackLevel</p>
+line: 4767
+itemtype: property
+class: p5.Envelope
+chainable: false
+---
+
+
+# attackTime
diff --git a/src/content/reference/en/p5.Envelope/decayLevel.mdx b/src/content/reference/en/p5.Envelope/decayLevel.mdx
new file mode 100644
index 0000000000..7e246aa737
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/decayLevel.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: decayLevel
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Level after decay. The envelope will sustain here until it is released.</p>
+line: 4784
+itemtype: property
+class: p5.Envelope
+chainable: false
+---
+
+
+# decayLevel
diff --git a/src/content/reference/en/p5.Envelope/decayTime.mdx b/src/content/reference/en/p5.Envelope/decayTime.mdx
new file mode 100644
index 0000000000..f564b2e51f
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/decayTime.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: decayTime
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Time until envelope reaches decayLevel.</p>
+line: 4778
+itemtype: property
+class: p5.Envelope
+chainable: false
+---
+
+
+# decayTime
diff --git a/src/content/reference/en/p5.Envelope/mult.mdx b/src/content/reference/en/p5.Envelope/mult.mdx
new file mode 100644
index 0000000000..102e763528
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/mult.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mult
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Multiply the p5.Envelope's output amplitude
+  by a fixed value. Calling this method
+  again will override the initial mult() with new values.</p>
+line: 5479
+params:
+  - name: number
+    description: |
+      <p>Constant number to multiply</p>
+    type: Number
+itemtype: method
+class: p5.Envelope
+return:
+  description: |-
+    Envelope Returns this envelope
+                                       with scaled output
+  type: p5.Envelope
+chainable: false
+---
+
+
+# mult
diff --git a/src/content/reference/en/p5.Envelope/play.mdx b/src/content/reference/en/p5.Envelope/play.mdx
new file mode 100644
index 0000000000..5ddcdd7197
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/play.mdx
@@ -0,0 +1,80 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: play
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>Play tells the envelope to start acting on a given input.
+  If the input is a p5.sound object (i.e. AudioIn, Oscillator,
+  SoundFile), then Envelope will control its output volume.
+  Envelopes can also be used to control any <a href="
+  http://docs.webplatform.org/wiki/apis/webaudio/AudioParam">
+  Web Audio Audio Param.</a></p>
+line: 5078
+params:
+  - name: unit
+    description: |
+      <p>A p5.sound object or
+                                    Web Audio Param.</p>
+    type: Object
+  - name: startTime
+    description: |
+      <p>time from now (in seconds) at which to play</p>
+    type: Number
+    optional: true
+  - name: sustainTime
+    description: |
+      <p>time to sustain before releasing the envelope</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Envelope
+example:
+  - |-
+
+    <div><code>
+    let attackLevel = 1.0;
+    let releaseLevel = 0;
+
+    let attackTime = 0.001;
+    let decayTime = 0.2;
+    let susPercent = 0.2;
+    let releaseTime = 0.5;
+
+    let env, triOsc;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playEnv);
+
+      env = new p5.Envelope();
+      triOsc = new p5.Oscillator('triangle');
+      triOsc.amp(env);
+      triOsc.freq(220);
+      triOsc.start();
+    }
+
+    function draw() {
+      background(220);
+      text('tap here to play', 5, 20);
+      attackTime = map(mouseX, 0, width, 0, 1.0);
+      attackLevel = map(mouseY, height, 0, 0, 1.0);
+      text('attack time: ' + attackTime, 5, height - 40);
+      text('attack level: ' + attackLevel, 5, height - 20);
+    }
+
+    function playEnv() {
+      // ensure that audio is enabled
+      userStartAudio();
+
+      env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+      env.setRange(attackLevel, releaseLevel);
+      env.play();
+    }
+    </code></div>
+chainable: false
+---
+
+
+# play
diff --git a/src/content/reference/en/p5.Envelope/ramp.mdx b/src/content/reference/en/p5.Envelope/ramp.mdx
new file mode 100644
index 0000000000..835d6b0e17
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/ramp.mdx
@@ -0,0 +1,84 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ramp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Exponentially ramp to a value using the first two
+
+  values from <code><a href="#/p5.Envelope/setADSR">setADSR(attackTime,
+  decayTime)</a></code>
+
+  as <a href="https://en.wikipedia.org/wiki/RC_time_constant">
+
+  time constants</a> for simple exponential ramps.
+
+  If the value is higher than current value, it uses attackTime,
+
+  while a decrease uses decayTime.</p>
+line: 5350
+params:
+  - name: unit
+    description: |
+      <p>p5.sound Object or Web Audio Param</p>
+    type: Object
+  - name: secondsFromNow
+    description: |
+      <p>When to trigger the ramp</p>
+    type: Number
+  - name: v
+    description: |
+      <p>Target value</p>
+    type: Number
+  - name: v2
+    description: |
+      <p>Second target value</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Envelope
+example:
+  - |-
+
+    <div><code>
+    let env, osc, amp;
+
+    let attackTime = 0.001;
+    let decayTime = 0.2;
+    let attackLevel = 1;
+    let decayLevel = 0;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      fill(0,255,0);
+      noStroke();
+
+      env = new p5.Envelope();
+      env.setADSR(attackTime, decayTime);
+      osc = new p5.Oscillator();
+      osc.amp(env);
+      amp = new p5.Amplitude();
+
+      cnv.mousePressed(triggerRamp);
+    }
+
+    function triggerRamp() {
+      // ensures audio is enabled. See also: `userStartAudio`
+      osc.start();
+
+      env.ramp(osc, 0, attackLevel, decayLevel);
+    }
+
+    function draw() {
+      background(20);
+      text('tap to play', 10, 20);
+      let h = map(amp.getLevel(), 0, 0.4, 0, height);;
+      rect(0, height, width, -h);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# ramp
diff --git a/src/content/reference/en/p5.Envelope/releaseLevel.mdx b/src/content/reference/en/p5.Envelope/releaseLevel.mdx
new file mode 100644
index 0000000000..de608998d6
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/releaseLevel.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: releaseLevel
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Level at the end of the release.</p>
+line: 4796
+itemtype: property
+class: p5.Envelope
+chainable: false
+---
+
+
+# releaseLevel
diff --git a/src/content/reference/en/p5.Envelope/releaseTime.mdx b/src/content/reference/en/p5.Envelope/releaseTime.mdx
new file mode 100644
index 0000000000..ebe59da63c
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/releaseTime.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: releaseTime
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Duration of the release portion of the envelope.</p>
+line: 4790
+itemtype: property
+class: p5.Envelope
+chainable: false
+---
+
+
+# releaseTime
diff --git a/src/content/reference/en/p5.Envelope/scale.mdx b/src/content/reference/en/p5.Envelope/scale.mdx
new file mode 100644
index 0000000000..b104333cd6
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/scale.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: scale
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Scale this envelope's amplitude values to a given
+  range, and return the envelope. Calling this method
+  again will override the initial scale() with new values.</p>
+line: 5498
+params:
+  - name: inMin
+    description: |
+      <p>input range minumum</p>
+    type: Number
+  - name: inMax
+    description: |
+      <p>input range maximum</p>
+    type: Number
+  - name: outMin
+    description: |
+      <p>input range minumum</p>
+    type: Number
+  - name: outMax
+    description: |
+      <p>input range maximum</p>
+    type: Number
+itemtype: method
+class: p5.Envelope
+return:
+  description: |-
+    Envelope Returns this envelope
+                                       with scaled output
+  type: p5.Envelope
+chainable: false
+---
+
+
+# scale
diff --git a/src/content/reference/en/p5.Envelope/set.mdx b/src/content/reference/en/p5.Envelope/set.mdx
new file mode 100644
index 0000000000..1fc81cdae7
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/set.mdx
@@ -0,0 +1,80 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Reset the envelope with a series of time/value pairs.</p>
+line: 4833
+params:
+  - name: attackTime
+    description: |
+      <p>Time (in seconds) before level
+                                     reaches attackLevel</p>
+    type: Number
+  - name: attackLevel
+    description: |
+      <p>Typically an amplitude between
+                                     0.0 and 1.0</p>
+    type: Number
+  - name: decayTime
+    description: |
+      <p>Time</p>
+    type: Number
+  - name: decayLevel
+    description: |
+      <p>Amplitude (In a standard ADSR envelope,
+                                     decayLevel = sustainLevel)</p>
+    type: Number
+  - name: releaseTime
+    description: |
+      <p>Release Time (in seconds)</p>
+    type: Number
+  - name: releaseLevel
+    description: |
+      <p>Amplitude</p>
+    type: Number
+itemtype: method
+class: p5.Envelope
+example:
+  - |
+
+    <div><code>
+    let attackTime;
+    let l1 = 0.7; // attack level 0.0 to 1.0
+    let t2 = 0.3; // decay time in seconds
+    let l2 = 0.1; // decay level  0.0 to 1.0
+    let l3 = 0.2; // release time in seconds
+
+    let env, triOsc;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playSound);
+
+      env = new p5.Envelope();
+      triOsc = new p5.Oscillator('triangle');
+    }
+
+    function draw() {
+      background(220);
+      text('tap here to play', 5, 20);
+
+      attackTime = map(mouseX, 0, width, 0.0, 1.0);
+      text('attack time: ' + attackTime, 5, height - 20);
+    }
+
+    // mouseClick triggers envelope if over canvas
+    function playSound() {
+      env.set(attackTime, l1, t2, l2, l3);
+
+      triOsc.start();
+      env.play(triOsc);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Envelope/setADSR.mdx b/src/content/reference/en/p5.Envelope/setADSR.mdx
new file mode 100644
index 0000000000..8f818d80db
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/setADSR.mdx
@@ -0,0 +1,89 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setADSR
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Set values like a traditional
+
+  <a
+  href="https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg">
+
+  ADSR envelope
+
+  </a>.</p>
+line: 4895
+params:
+  - name: attackTime
+    description: |
+      <p>Time (in seconds before envelope
+                                    reaches Attack Level</p>
+    type: Number
+  - name: decayTime
+    description: |
+      <p>Time (in seconds) before envelope
+                                    reaches Decay/Sustain Level</p>
+    type: Number
+    optional: true
+  - name: susRatio
+    description: |
+      <p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+                                    where 1.0 = attackLevel, 0.0 = releaseLevel.
+                                    The susRatio determines the decayLevel and the level at which the
+                                    sustain portion of the envelope will sustain.
+                                    For example, if attackLevel is 0.4, releaseLevel is 0,
+                                    and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+                                    increased to 1.0 (using <code>setRange</code>),
+                                    then decayLevel would increase proportionally, to become 0.5.</p>
+    type: Number
+    optional: true
+  - name: releaseTime
+    description: |
+      <p>Time in seconds from now (defaults to 0)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Envelope
+example:
+  - |-
+
+    <div><code>
+    let attackLevel = 1.0;
+    let releaseLevel = 0;
+
+    let attackTime = 0.001;
+    let decayTime = 0.2;
+    let susPercent = 0.2;
+    let releaseTime = 0.5;
+
+    let env, triOsc;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playEnv);
+
+      env = new p5.Envelope();
+      triOsc = new p5.Oscillator('triangle');
+      triOsc.amp(env);
+      triOsc.freq(220);
+    }
+
+    function draw() {
+      background(220);
+      text('tap here to play', 5, 20);
+      attackTime = map(mouseX, 0, width, 0, 1.0);
+      text('attack time: ' + attackTime, 5, height - 40);
+    }
+
+    function playEnv() {
+      triOsc.start();
+      env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+      env.play();
+    }
+    </code></div>
+chainable: false
+---
+
+
+# setADSR
diff --git a/src/content/reference/en/p5.Envelope/setExp.mdx b/src/content/reference/en/p5.Envelope/setExp.mdx
new file mode 100644
index 0000000000..5aa3a5d710
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/setExp.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setExp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set whether the envelope ramp is linear (default) or exponential.
+  Exponential ramps can be useful because we perceive amplitude
+  and frequency logarithmically.</p>
+line: 5055
+params:
+  - name: isExp
+    description: |
+      <p>true is exponential, false is linear</p>
+    type: Boolean
+itemtype: method
+class: p5.Envelope
+chainable: false
+---
+
+
+# setExp
diff --git a/src/content/reference/en/p5.Envelope/setInput.mdx b/src/content/reference/en/p5.Envelope/setInput.mdx
new file mode 100644
index 0000000000..4b0403c71f
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/setInput.mdx
@@ -0,0 +1,27 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setInput
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Assign a parameter to be controlled by this envelope.
+  If a p5.Sound object is given, then the p5.Envelope will control its
+  output gain. If multiple inputs are provided, the env will
+  control all of them.</p>
+line: 5037
+params:
+  - name: inputs
+    description: |
+      <p>A p5.sound object or
+                                    Web Audio Param.</p>
+    type: Object
+    optional: true
+    multiple: true
+itemtype: method
+class: p5.Envelope
+chainable: false
+---
+
+
+# setInput
diff --git a/src/content/reference/en/p5.Envelope/setRange.mdx b/src/content/reference/en/p5.Envelope/setRange.mdx
new file mode 100644
index 0000000000..5481ef2b54
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/setRange.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setRange
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>
+line: 4964
+params:
+  - name: aLevel
+    description: |
+      <p>attack level (defaults to 1)</p>
+    type: Number
+  - name: rLevel
+    description: |
+      <p>release level (defaults to 0)</p>
+    type: Number
+itemtype: method
+class: p5.Envelope
+example:
+  - |-
+
+    <div><code>
+    let attackLevel = 1.0;
+    let releaseLevel = 0;
+
+    let attackTime = 0.001;
+    let decayTime = 0.2;
+    let susPercent = 0.2;
+    let releaseTime = 0.5;
+
+    let env, triOsc;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playEnv);
+
+      env = new p5.Envelope();
+      triOsc = new p5.Oscillator('triangle');
+      triOsc.amp(env);
+      triOsc.freq(220);
+    }
+
+    function draw() {
+      background(220);
+      text('tap here to play', 5, 20);
+      attackLevel = map(mouseY, height, 0, 0, 1.0);
+      text('attack level: ' + attackLevel, 5, height - 20);
+    }
+
+    function playEnv() {
+      triOsc.start();
+      env.setRange(attackLevel, releaseLevel);
+      env.play();
+    }
+    </code></div>
+chainable: false
+---
+
+
+# setRange
diff --git a/src/content/reference/en/p5.Envelope/triggerAttack.mdx b/src/content/reference/en/p5.Envelope/triggerAttack.mdx
new file mode 100644
index 0000000000..740cca51e9
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/triggerAttack.mdx
@@ -0,0 +1,73 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: triggerAttack
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Trigger the Attack, and Decay portion of the Envelope.
+  Similar to holding down a key on a piano, but it will
+  hold the sustain level until you let go. Input can be
+  any p5.sound object, or a <a href="
+  http://docs.webplatform.org/wiki/apis/webaudio/AudioParam">
+  Web Audio Param</a>.</p>
+line: 5148
+params:
+  - name: unit
+    description: |
+      <p>p5.sound Object or Web Audio Param</p>
+    type: Object
+  - name: secondsFromNow
+    description: |
+      <p>time from now (in seconds)</p>
+    type: Number
+itemtype: method
+class: p5.Envelope
+example:
+  - |-
+
+    <div><code>
+    let attackTime = 0.001;
+    let decayTime = 0.2;
+    let susPercent = 0.3;
+    let releaseTime = 0.4;
+    let env, triOsc;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      background(220);
+      textAlign(CENTER);
+      textSize(10);
+      text('tap to triggerAttack', width/2, height/2);
+
+      env = new p5.Envelope();
+      env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+      env.setRange(1.0, 0.0);
+      triOsc = new p5.Oscillator('triangle');
+      triOsc.freq(220);
+
+      cnv.mousePressed(envAttack);
+    }
+
+    function envAttack()  {
+      background(0, 255, 255);
+      text('release to release', width/2, height/2);
+
+      // ensures audio is enabled. See also: `userStartAudio`
+      triOsc.start();
+
+      env.triggerAttack(triOsc);
+    }
+
+    function mouseReleased() {
+      background(220);
+      text('tap to triggerAttack', width/2, height/2);
+
+      env.triggerRelease(triOsc);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# triggerAttack
diff --git a/src/content/reference/en/p5.Envelope/triggerRelease.mdx b/src/content/reference/en/p5.Envelope/triggerRelease.mdx
new file mode 100644
index 0000000000..8c38b4db03
--- /dev/null
+++ b/src/content/reference/en/p5.Envelope/triggerRelease.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: triggerRelease
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Trigger the Release of the Envelope. This is similar to releasing
+  the key on a piano and letting the sound fade according to the
+  release level and release time.</p>
+line: 5256
+params:
+  - name: unit
+    description: |
+      <p>p5.sound Object or Web Audio Param</p>
+    type: Object
+  - name: secondsFromNow
+    description: |
+      <p>time to trigger the release</p>
+    type: Number
+itemtype: method
+class: p5.Envelope
+example:
+  - |-
+
+    <div><code>
+    let attackTime = 0.001;
+    let decayTime = 0.2;
+    let susPercent = 0.3;
+    let releaseTime = 0.4;
+    let env, triOsc;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      background(220);
+      textAlign(CENTER);
+      textSize(10);
+      text('tap to triggerAttack', width/2, height/2);
+
+      env = new p5.Envelope();
+      env.setADSR(attackTime, decayTime, susPercent, releaseTime);
+      env.setRange(1.0, 0.0);
+      triOsc = new p5.Oscillator('triangle');
+      triOsc.freq(220);
+
+      cnv.mousePressed(envAttack);
+    }
+
+    function envAttack()  {
+      background(0, 255, 255);
+      text('release to release', width/2, height/2);
+
+      // ensures audio is enabled. See also: `userStartAudio`
+      triOsc.start();
+
+      env.triggerAttack(triOsc);
+    }
+
+    function mouseReleased() {
+      background(220);
+      text('tap to triggerAttack', width/2, height/2);
+
+      env.triggerRelease(triOsc);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# triggerRelease
diff --git a/src/content/reference/en/p5.FFT/analyze.mdx b/src/content/reference/en/p5.FFT/analyze.mdx
new file mode 100644
index 0000000000..470376979e
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/analyze.mdx
@@ -0,0 +1,92 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: analyze
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns an array of amplitude values (between 0 and 255)
+  across the frequency spectrum. Length is equal to FFT bins
+  (1024 by default). The array indices correspond to frequencies
+  (i.e. pitches), from the lowest to the highest that humans can
+  hear. Each value represents amplitude at that slice of the
+  frequency spectrum. Must be called prior to using
+  <code>getEnergy()</code>.</p>
+line: 3553
+params:
+  - name: bins
+    description: |
+      <p>Must be a power of two between
+                                 16 and 1024. Defaults to 1024.</p>
+    type: Number
+    optional: true
+  - name: scale
+    description: |
+      <p>If "dB," returns decibel
+                                 float measurements between
+                                 -140 and 0 (max).
+                                 Otherwise returns integers from 0-255.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.FFT
+example:
+  - |+
+
+    <div><code>
+    let osc, fft;
+
+    function setup(){
+      let cnv = createCanvas(100,100);
+      cnv.mousePressed(startSound);
+      osc = new p5.Oscillator();
+      osc.amp(0);
+      fft = new p5.FFT();
+    }
+
+    function draw(){
+      background(220);
+
+      let freq = map(mouseX, 0, windowWidth, 20, 10000);
+      freq = constrain(freq, 1, 20000);
+      osc.freq(freq);
+
+      let spectrum = fft.analyze();
+      noStroke();
+      fill(255, 0, 255);
+      for (let i = 0; i< spectrum.length; i++){
+        let x = map(i, 0, spectrum.length, 0, width);
+        let h = -height + map(spectrum[i], 0, 255, height, 0);
+        rect(x, height, width / spectrum.length, h );
+      }
+
+      stroke(255);
+      if (!osc.started) {
+        text('tap here and drag to change frequency', 10, 20, width - 20);
+      } else {
+        text(round(freq)+'Hz', 10, 20);
+      }
+    }
+
+    function startSound() {
+      osc.start();
+      osc.amp(0.5, 0.2);
+    }
+
+    function mouseReleased() {
+      osc.amp(0, 0.2);
+    }
+    </code></div>
+
+return:
+  description: |-
+    spectrum    Array of energy (amplitude/volume)
+                                values across the frequency spectrum.
+                                Lowest energy (silence) = 0, highest
+                                possible is 255.
+  type: Array
+chainable: false
+---
+
+
+# analyze
diff --git a/src/content/reference/en/p5.FFT/getCentroid.mdx b/src/content/reference/en/p5.FFT/getCentroid.mdx
new file mode 100644
index 0000000000..14dad1d752
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/getCentroid.mdx
@@ -0,0 +1,77 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getCentroid
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the
+  <a href="http://en.wikipedia.org/wiki/Spectral_centroid" target="_blank">
+  spectral centroid</a> of the input signal.
+  <em>NOTE: analyze() must be called prior to getCentroid(). Analyze()
+  tells the FFT to analyze frequency data, and getCentroid() uses
+  the results determine the spectral centroid.</em></p></p>
+line: 3739
+itemtype: method
+class: p5.FFT
+example:
+  - |-
+
+    <div><code>
+     function setup(){
+    cnv = createCanvas(100,100);
+    cnv.mousePressed(userStartAudio);
+    sound = new p5.AudioIn();
+    sound.start();
+    fft = new p5.FFT();
+    sound.connect(fft);
+    }
+
+    function draw() {
+    if (getAudioContext().state !== 'running') {
+      background(220);
+      text('tap here and enable mic to begin', 10, 20, width - 20);
+      return;
+    }
+    let centroidplot = 0.0;
+    let spectralCentroid = 0;
+
+    background(0);
+    stroke(0,255,0);
+    let spectrum = fft.analyze();
+    fill(0,255,0); // spectrum is green
+
+    //draw the spectrum
+    for (let i = 0; i < spectrum.length; i++){
+      let x = map(log(i), 0, log(spectrum.length), 0, width);
+      let h = map(spectrum[i], 0, 255, 0, height);
+      let rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));
+      rect(x, height, rectangle_width, -h )
+    }
+    let nyquist = 22050;
+
+    // get the centroid
+    spectralCentroid = fft.getCentroid();
+
+    // the mean_freq_index calculation is for the display.
+    let mean_freq_index = spectralCentroid/(nyquist/spectrum.length);
+
+    centroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);
+
+    stroke(255,0,0); // the line showing where the centroid is will be red
+
+    rect(centroidplot, 0, width / spectrum.length, height)
+    noStroke();
+    fill(255,255,255);  // text is white
+    text('centroid: ', 10, 20);
+    text(round(spectralCentroid)+' Hz', 10, 40);
+    }
+     </code></div>
+return:
+  description: Spectral Centroid Frequency  of the spectral centroid in Hz.
+  type: Number
+chainable: false
+---
+
+
+# getCentroid
diff --git a/src/content/reference/en/p5.FFT/getEnergy.mdx b/src/content/reference/en/p5.FFT/getEnergy.mdx
new file mode 100644
index 0000000000..8026d5cce1
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/getEnergy.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getEnergy
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the amount of energy (volume) at a specific
+  <a href="https://en.wikipedia.org/wiki/Audio_frequency" target="_blank">
+  frequency</a>, or the average amount of energy between two
+  frequencies. Accepts Number(s) corresponding
+  to frequency (in Hz), or a "string" corresponding to predefined
+  frequency ranges ("bass", "lowMid", "mid", "highMid", "treble").
+  Returns a range between 0 (no energy/volume at that frequency) and
+  255 (maximum energy).
+  <em>NOTE: analyze() must be called prior to getEnergy(). analyze()
+  tells the FFT to analyze frequency data, and getEnergy() uses
+  the results to determine the value at a specific frequency or
+  range of frequencies.</em></p></p>
+line: 3650
+params:
+  - name: frequency1
+    description: |
+      <p>Will return a value representing
+                                    energy at this frequency. Alternately,
+                                    the strings "bass", "lowMid" "mid",
+                                    "highMid", and "treble" will return
+                                    predefined frequency ranges.</p>
+    type: Number|String
+  - name: frequency2
+    description: |
+      <p>If a second frequency is given,
+                                    will return average amount of
+                                    energy that exists between the
+                                    two frequencies.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.FFT
+return:
+  description: |-
+    Energy   Energy (volume/amplitude) from
+                                0 and 255.
+  type: Number
+chainable: false
+---
+
+
+# getEnergy
diff --git a/src/content/reference/en/p5.FFT/getOctaveBands.mdx b/src/content/reference/en/p5.FFT/getOctaveBands.mdx
new file mode 100644
index 0000000000..bd49b59668
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/getOctaveBands.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getOctaveBands
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Calculates and Returns the 1/N
+
+  <a href="https://en.wikipedia.org/wiki/Octave_band" target="_blank">Octave
+  Bands</a>
+
+  N defaults to 3 and minimum central frequency to 15.625Hz.
+
+  (1/3 Octave Bands ~= 31 Frequency Bands)
+
+  Setting fCtr0 to a central value of a higher octave will ignore the lower
+  bands
+
+  and produce less frequency groups.</p>
+line: 3925
+params:
+  - name: 'N'
+    description: |
+      <p>Specifies the 1/N type of generated octave bands</p>
+    type: Number
+  - name: fCtr0
+    description: |
+      <p>Minimum central frequency for the lowest band</p>
+    type: Number
+itemtype: method
+class: p5.FFT
+return:
+  description: octaveBands   Array of octave band objects with their bounds
+  type: Array
+chainable: false
+---
+
+
+# getOctaveBands
diff --git a/src/content/reference/en/p5.FFT/linAverages.mdx b/src/content/reference/en/p5.FFT/linAverages.mdx
new file mode 100644
index 0000000000..9cc40dbcd4
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/linAverages.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: linAverages
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns an array of average amplitude values for a given number
+  of frequency bands split equally. N defaults to 16.
+  <em>NOTE: analyze() must be called prior to linAverages(). Analyze()
+  tells the FFT to analyze frequency data, and linAverages() uses
+  the results to group them into a smaller set of averages.</em></p></p>
+line: 3854
+params:
+  - name: 'N'
+    description: |
+      <p>Number of returned frequency groups</p>
+    type: Number
+itemtype: method
+class: p5.FFT
+return:
+  description: linearAverages   Array of average amplitude values for each group
+  type: Array
+chainable: false
+---
+
+
+# linAverages
diff --git a/src/content/reference/en/p5.FFT/logAverages.mdx b/src/content/reference/en/p5.FFT/logAverages.mdx
new file mode 100644
index 0000000000..ab777081c2
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/logAverages.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: logAverages
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns an array of average amplitude values of the spectrum, for a given
+  set of <a href="https://en.wikipedia.org/wiki/Octave_band" target="_blank">
+  Octave Bands</a>
+  <em>NOTE: analyze() must be called prior to logAverages(). Analyze()
+  tells the FFT to analyze frequency data, and logAverages() uses
+  the results to group them into a smaller set of averages.</em></p></p>
+line: 3889
+params:
+  - name: octaveBands
+    description: |
+      <p>Array of Octave Bands objects for grouping</p>
+    type: Array
+itemtype: method
+class: p5.FFT
+return:
+  description: logAverages    Array of average amplitude values for each group
+  type: Array
+chainable: false
+---
+
+
+# logAverages
diff --git a/src/content/reference/en/p5.FFT/setInput.mdx b/src/content/reference/en/p5.FFT/setInput.mdx
new file mode 100644
index 0000000000..bc4ef5a0ed
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/setInput.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setInput
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the input source for the FFT analysis. If no source is
+  provided, FFT will analyze all sound in the sketch.</p>
+line: 3476
+params:
+  - name: source
+    description: |
+      <p>p5.sound object (or web audio API source node)</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.FFT
+chainable: false
+---
+
+
+# setInput
diff --git a/src/content/reference/en/p5.FFT/smooth.mdx b/src/content/reference/en/p5.FFT/smooth.mdx
new file mode 100644
index 0000000000..5c0771727d
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/smooth.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: smooth
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Smooth FFT analysis by averaging with the last analysis frame.</p>
+line: 3826
+params:
+  - name: smoothing
+    description: |
+      <p>0.0 < smoothing < 1.0.
+                                   Defaults to 0.8.</p>
+    type: Number
+itemtype: method
+class: p5.FFT
+chainable: false
+---
+
+
+# smooth
diff --git a/src/content/reference/en/p5.FFT/waveform.mdx b/src/content/reference/en/p5.FFT/waveform.mdx
new file mode 100644
index 0000000000..267962002a
--- /dev/null
+++ b/src/content/reference/en/p5.FFT/waveform.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: waveform
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns an array of amplitude values (between -1.0 and +1.0) that represent
+  a snapshot of amplitude readings in a single buffer. Length will be
+  equal to bins (defaults to 1024). Can be used to draw the waveform
+  of a sound.</p>
+line: 3501
+params:
+  - name: bins
+    description: |
+      <p>Must be a power of two between
+                                16 and 1024. Defaults to 1024.</p>
+    type: Number
+    optional: true
+  - name: precision
+    description: |
+      <p>If any value is provided, will return results
+                                  in a Float32 Array which is more precise
+                                  than a regular array.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.FFT
+return:
+  description: |-
+    Array    Array of amplitude values (-1 to 1)
+                              over time. Array length = bins.
+  type: Array
+chainable: false
+---
+
+
+# waveform
diff --git a/src/content/reference/en/p5.File/data.mdx b/src/content/reference/en/p5.File/data.mdx
new file mode 100644
index 0000000000..dcfe178ce6
--- /dev/null
+++ b/src/content/reference/en/p5.File/data.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: data
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>A string containing either the file's image data, text contents, or
+  a parsed object in the case of JSON and
+  <a href="#/p5.XML">p5.XML</a> objects.</p>
+line: 5173
+itemtype: property
+class: p5.File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      background(200);
+
+      // Create a file input and place it beneath
+      // the canvas. Call displayData() when
+      // the file loads.
+      let input = createFileInput(displayData);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its data is written in black.');
+    }
+
+    // Display the p5.File's data
+    // once it loads.
+    function displayData(file) {
+      background(200);
+
+      // Display the p5.File's data,
+      // which looks like a random
+      // string of characters.
+      text(file.data, 10, 10, 80, 80);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# data
diff --git a/src/content/reference/en/p5.File/file.mdx b/src/content/reference/en/p5.File/file.mdx
new file mode 100644
index 0000000000..821b3ca6b1
--- /dev/null
+++ b/src/content/reference/en/p5.File/file.mdx
@@ -0,0 +1,55 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: file
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Underlying
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/File"
+  target="_blank">File</a>
+
+  object. All <code>File</code> properties and methods are accessible.</p>
+line: 4986
+itemtype: property
+class: p5.File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      background(200);
+
+      // Create a file input and place it beneath
+      // the canvas. Call displayInfo() when
+      // the file loads.
+      let input = createFileInput(displayInfo);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
+    }
+
+    // Use the p5.File once
+    // it loads.
+    function displayInfo(file) {
+      background(200);
+
+      // Display the p5.File's name.
+      text(file.name, 10, 10, 80, 40);
+      // Display the p5.File's type and subtype.
+      text(`${file.type}/${file.subtype}`, 10, 70);
+      // Display the p5.File's size in bytes.
+      text(file.size, 10, 90);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# file
diff --git a/src/content/reference/en/p5.File/name.mdx b/src/content/reference/en/p5.File/name.mdx
new file mode 100644
index 0000000000..2d244fff88
--- /dev/null
+++ b/src/content/reference/en/p5.File/name.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: name
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>The file name as a string.</p>
+line: 5104
+itemtype: property
+class: p5.File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      background(200);
+
+      // Create a file input and place it beneath
+      // the canvas. Call displayName() when
+      // the file loads.
+      let input = createFileInput(displayName);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its name is written in black.');
+    }
+
+    // Display the p5.File's name
+    // once it loads.
+    function displayName(file) {
+      background(200);
+
+      // Display the p5.File's name.
+      text(`This is file's name is: ${file.name}`, 10, 10, 80, 80);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# name
diff --git a/src/content/reference/en/p5.File/size.mdx b/src/content/reference/en/p5.File/size.mdx
new file mode 100644
index 0000000000..592a44a36b
--- /dev/null
+++ b/src/content/reference/en/p5.File/size.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: size
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>The number of bytes in the file.</p>
+line: 5138
+itemtype: property
+class: p5.File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      background(200);
+
+      // Create a file input and place it beneath
+      // the canvas. Call displaySize() when
+      // the file loads.
+      let input = createFileInput(displaySize);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its size in bytes is written in black.');
+    }
+
+    // Display the p5.File's size
+    // in bytes once it loads.
+    function displaySize(file) {
+      background(200);
+
+      // Display the p5.File's size.
+      text(`This is file has ${file.size} bytes.`, 10, 10, 80, 80);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# size
diff --git a/src/content/reference/en/p5.File/subtype.mdx b/src/content/reference/en/p5.File/subtype.mdx
new file mode 100644
index 0000000000..6e9578f705
--- /dev/null
+++ b/src/content/reference/en/p5.File/subtype.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: subtype
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>The file subtype as a string. For example, a file with an
+  <code>'image'</code>
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types"
+  target="_blank">MIME type</a>
+
+  may have a subtype such as <code>png</code> or <code>jpeg</code>.</p>
+line: 5068
+itemtype: property
+class: p5.File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      background(200);
+
+      // Create a file input and place it beneath
+      // the canvas. Call displaySubtype() when
+      // the file loads.
+      let input = createFileInput(displaySubtype);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its subtype is written in black.');
+    }
+
+    // Display the p5.File's type
+    // once it loads.
+    function displaySubtype(file) {
+      background(200);
+
+      // Display the p5.File's subtype.
+      text(`This is file's subtype is: ${file.subtype}`, 10, 10, 80, 80);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# subtype
diff --git a/src/content/reference/en/p5.File/type.mdx b/src/content/reference/en/p5.File/type.mdx
new file mode 100644
index 0000000000..1e779657df
--- /dev/null
+++ b/src/content/reference/en/p5.File/type.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: type
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>The file
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types"
+  target="_blank">MIME type</a>
+
+  as a string. For example, <code>'image'</code>, <code>'text'</code>, and so
+  on.</p>
+line: 5032
+itemtype: property
+class: p5.File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      background(200);
+
+      // Create a file input and place it beneath
+      // the canvas. Call displayType() when
+      // the file loads.
+      let input = createFileInput(displayType);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its type is written in black.');
+    }
+
+    // Display the p5.File's type
+    // once it loads.
+    function displayType(file) {
+      background(200);
+
+      // Display the p5.File's type.
+      text(`This is file's type is: ${file.type}`, 10, 10, 80, 80);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# type
diff --git a/src/content/reference/en/p5.Filter/biquadFilter.mdx b/src/content/reference/en/p5.Filter/biquadFilter.mdx
new file mode 100644
index 0000000000..6e3adbbd65
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/biquadFilter.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: biquadFilter
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>The p5.Filter is built with a
+  <a href="http://www.w3.org/TR/webaudio/#BiquadFilterNode">
+  Web Audio BiquadFilter Node</a>.</p>
+line: 6719
+itemtype: property
+class: p5.Filter
+chainable: false
+---
+
+
+# biquadFilter
diff --git a/src/content/reference/en/p5.Filter/freq.mdx b/src/content/reference/en/p5.Filter/freq.mdx
new file mode 100644
index 0000000000..9b43c60fe2
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/freq.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: freq
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the filter frequency, in Hz, from 10 to 22050 (the range of
+  human hearing, although in reality most people hear in a narrower
+  range).</p>
+line: 6781
+params:
+  - name: freq
+    description: |
+      <p>Filter Frequency</p>
+    type: Number
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Filter
+return:
+  description: value  Returns the current frequency value
+  type: Number
+chainable: false
+---
+
+
+# freq
diff --git a/src/content/reference/en/p5.Filter/gain.mdx b/src/content/reference/en/p5.Filter/gain.mdx
new file mode 100644
index 0000000000..e0333b9c9f
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/gain.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: gain
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Controls the gain attribute of a Biquad Filter.
+  This is distinctly different from .amp() which is inherited from p5.Effect
+  .amp() controls the volume via the output gain node
+  p5.Filter.gain() controls the gain parameter of a Biquad Filter node.</p>
+line: 6838
+params:
+  - name: gain
+    description: ''
+    type: Number
+itemtype: method
+class: p5.Filter
+return:
+  description: Returns the current or updated gain value
+  type: Number
+chainable: false
+---
+
+
+# gain
diff --git a/src/content/reference/en/p5.Filter/process.mdx b/src/content/reference/en/p5.Filter/process.mdx
new file mode 100644
index 0000000000..6848aa5507
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/process.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Filter an audio signal according to a set
+  of filter parameters.</p>
+line: 6742
+params:
+  - name: Signal
+    description: |
+      <p>An object that outputs audio</p>
+    type: Object
+  - name: freq
+    description: |
+      <p>Frequency in Hz, from 10 to 22050</p>
+    type: Number
+    optional: true
+  - name: res
+    description: |
+      <p>Resonance/Width of the filter frequency
+                            from 0.001 to 1000</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Filter
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Filter/res.mdx b/src/content/reference/en/p5.Filter/res.mdx
new file mode 100644
index 0000000000..9d47be3e53
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/res.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: res
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Controls either width of a bandpass frequency,
+  or the resonance of a low/highpass cutoff frequency.</p>
+line: 6811
+params:
+  - name: res
+    description: |
+      <p>Resonance/Width of filter freq
+                           from 0.001 to 1000</p>
+    type: Number
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Filter
+return:
+  description: value Returns the current res value
+  type: Number
+chainable: false
+---
+
+
+# res
diff --git a/src/content/reference/en/p5.Filter/set.mdx b/src/content/reference/en/p5.Filter/set.mdx
new file mode 100644
index 0000000000..1b147451ba
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/set.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the frequency and the resonance of the filter.</p>
+line: 6760
+params:
+  - name: freq
+    description: |
+      <p>Frequency in Hz, from 10 to 22050</p>
+    type: Number
+    optional: true
+  - name: res
+    description: |
+      <p>Resonance (Q) from 0.001 to 1000</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Filter
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Filter/setType.mdx b/src/content/reference/en/p5.Filter/setType.mdx
new file mode 100644
index 0000000000..fbf45f9f29
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/setType.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setType
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the type of a p5.Filter. Possible types include:
+  "lowpass" (default), "highpass", "bandpass",
+  "lowshelf", "highshelf", "peaking", "notch",
+  "allpass".</p>
+line: 6884
+params:
+  - name: t
+    description: ''
+    type: String
+itemtype: method
+class: p5.Filter
+chainable: false
+---
+
+
+# setType
diff --git a/src/content/reference/en/p5.Filter/toggle.mdx b/src/content/reference/en/p5.Filter/toggle.mdx
new file mode 100644
index 0000000000..d6c019415b
--- /dev/null
+++ b/src/content/reference/en/p5.Filter/toggle.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: toggle
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Toggle function. Switches between the specified type and allpass</p>
+line: 6864
+itemtype: method
+class: p5.Filter
+return:
+  description: '[Toggle value]'
+  type: Boolean
+chainable: false
+---
+
+
+# toggle
diff --git a/src/content/reference/en/p5.Font/font.mdx b/src/content/reference/en/p5.Font/font.mdx
new file mode 100644
index 0000000000..076bce240a
--- /dev/null
+++ b/src/content/reference/en/p5.Font/font.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: font
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/p5.Font.js
+description: |
+  <p>Underlying
+  <a href="https://opentype.js.org/" target="_blank">opentype.js</a>
+  font object.</p>
+line: 45
+itemtype: property
+class: p5.Font
+chainable: false
+---
+
+
+# font
diff --git a/src/content/reference/en/p5.Font/textBounds.mdx b/src/content/reference/en/p5.Font/textBounds.mdx
new file mode 100644
index 0000000000..dd409c8f9c
--- /dev/null
+++ b/src/content/reference/en/p5.Font/textBounds.mdx
@@ -0,0 +1,132 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textBounds
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/p5.Font.js
+description: >
+  <p>Returns the bounding box for a string of text written using this
+
+  <a href="#/p5.Font">p5.Font</a>.</p>
+
+  <p>The first parameter, <code>str</code>, is a string of text. The second and
+  third
+
+  parameters, <code>x</code> and <code>y</code>, are the text's position. By
+  default, they set the
+
+  coordinates of the bounding box's bottom-left corner. See
+
+  <a href="#/p5/textAlign">textAlign()</a> for more ways to align text.</p>
+
+  <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the font
+  size used to
+
+  determine the bounding box. By default, <code>font.textBounds()</code> will
+  use the
+
+  current <a href="#/p5/textSize">textSize()</a>.</p>
+line: 55
+params:
+  - name: str
+    description: |
+      <p>string of text.</p>
+    type: String
+  - name: x
+    description: |
+      <p>x-coordinate of the text.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the text.</p>
+    type: Number
+  - name: fontSize
+    description: |
+      <p>font size. Defaults to the current
+                                  <a href="#/p5/textSize">textSize()</a>.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Font
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      background(200);
+
+      let bbox = font.textBounds('p5*js', 35, 53);
+      rect(bbox.x, bbox.y, bbox.w, bbox.h);
+
+      textFont(font);
+      text('p5*js', 35, 53);
+
+      describe('The text "p5*js" written in black inside a white rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      background(200);
+
+      textFont(font);
+      textSize(15);
+      textAlign(CENTER, CENTER);
+
+      let bbox = font.textBounds('p5*js', 50, 50);
+      rect(bbox.x, bbox.y, bbox.w, bbox.h);
+
+      text('p5*js', 50, 50);
+
+      describe('The text "p5*js" written in black inside a white rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      background(200);
+
+      let bbox = font.textBounds('p5*js', 31, 53, 15);
+      rect(bbox.x, bbox.y, bbox.w, bbox.h);
+
+      textFont(font);
+      textSize(15);
+      text('p5*js', 31, 53);
+
+      describe('The text "p5*js" written in black inside a white rectangle.');
+    }
+    </code>
+    </div>
+return:
+  description: |-
+    object describing the bounding box with
+                                properties x, y, w, and h.
+  type: Object
+chainable: false
+---
+
+
+# textBounds
diff --git a/src/content/reference/en/p5.Font/textToPoints.mdx b/src/content/reference/en/p5.Font/textToPoints.mdx
new file mode 100644
index 0000000000..0849a09e96
--- /dev/null
+++ b/src/content/reference/en/p5.Font/textToPoints.mdx
@@ -0,0 +1,104 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textToPoints
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/p5.Font.js
+description: >
+  <p>Returns an array of points outlining a string of text written using this
+
+  <a href="#/p5.Font">p5.Font</a>.</p>
+
+  <p>The first parameter, <code>str</code>, is a string of text. The second and
+  third
+
+  parameters, <code>x</code> and <code>y</code>, are the text's position. By
+  default, they set the
+
+  coordinates of the bounding box's bottom-left corner. See
+
+  <a href="#/p5/textAlign">textAlign()</a> for more ways to align text.</p>
+
+  <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
+  text's font
+
+  size. By default, <code>font.textToPoints()</code> will use the current
+
+  <a href="#/p5/textSize">textSize()</a>.</p>
+
+  <p>The fifth parameter, <code>options</code>, is also optional.
+  <code>font.textToPoints()</code>
+
+  expects an object with the following properties:</p>
+
+  <p><code>sampleFactor</code> is the ratio of the text's path length to the
+  number of
+
+  samples. It defaults to 0.1. Higher values produce more points along the
+
+  path and are more precise.</p>
+
+  <p><code>simplifyThreshold</code> removes collinear points if it's set to a
+  number other
+
+  than 0. The value represents the threshold angle to use when determining
+
+  whether two edges are collinear.</p>
+line: 249
+params:
+  - name: str
+    description: |
+      <p>string of text.</p>
+    type: String
+  - name: x
+    description: |
+      <p>x-coordinate of the text.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the text.</p>
+    type: Number
+  - name: fontSize
+    description: |
+      <p>font size. Defaults to the current
+                                  <a href="#/p5/textSize">textSize()</a>.</p>
+    type: Number
+    optional: true
+  - name: options
+    description: |
+      <p>object with sampleFactor and simplifyThreshold
+                                  properties.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.Font
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      background(200);
+      let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor:  0.5 });
+      points.forEach(p =>  {
+        point(p.x, p.y);
+      });
+
+      describe('A set of black dots outlining the text "p5*js" on a gray background.');
+    }
+    </code>
+    </div>
+return:
+  description: 'array of point objects, each with x, y, and alpha (path angle) properties.'
+  type: Array
+chainable: false
+---
+
+
+# textToPoints
diff --git a/src/content/reference/en/p5.Framebuffer/autoSized.mdx b/src/content/reference/en/p5.Framebuffer/autoSized.mdx
new file mode 100644
index 0000000000..1eff54c4c3
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/autoSized.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: autoSized
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>Gets or sets whether or not this framebuffer will automatically resize
+  along with the canvas it's attached to in order to match its size.</p>
+  <p>Call this method with no arguments to see if it is currently auto-sized,
+  or pass in a boolean to set this property.</p>
+line: 257
+params:
+  - name: autoSized
+    description: |
+      <p>Whether or not the framebuffer should resize
+      along with the canvas it's attached to</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5.Framebuffer
+chainable: false
+---
+
+
+# autoSized
diff --git a/src/content/reference/en/p5.Framebuffer/begin.mdx b/src/content/reference/en/p5.Framebuffer/begin.mdx
new file mode 100644
index 0000000000..552ac9d1c4
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/begin.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: begin
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>Begin drawing to this framebuffer. Subsequent drawing functions to the
+  canvas the framebuffer is attached to will not be immediately visible, and
+  will instead be drawn to the framebuffer's texture. Call
+  <a href="#/p5.Framebuffer/end">end()</a> when finished to make draw
+  functions go right to the canvas again and to be able to read the
+  contents of the framebuffer's texture.</p>
+line: 790
+itemtype: method
+class: p5.Framebuffer
+example:
+  - |-
+
+    <div>
+    <code>
+    let framebuffer;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      framebuffer = createFramebuffer();
+      noStroke();
+    }
+
+    function draw() {
+      // Draw to the framebuffer
+      framebuffer.begin();
+      background(255);
+      translate(0, 10*sin(frameCount * 0.01), 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      fill(255, 0, 0);
+      box(50);
+      framebuffer.end();
+
+      background(100);
+      // Draw the framebuffer to the main canvas
+      image(framebuffer, -50, -50, 25, 25);
+      image(framebuffer, 0, 0, 35, 35);
+    }
+    </code>
+    </div>
+alt: |-
+  A video of a floating and rotating red cube is pasted twice on the
+  canvas: once in the top left, and again, larger, in the bottom right.
+chainable: false
+---
+
+
+# begin
diff --git a/src/content/reference/en/p5.Framebuffer/color.mdx b/src/content/reference/en/p5.Framebuffer/color.mdx
new file mode 100644
index 0000000000..08a42f1a9e
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/color.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: color
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>A texture with the color information of the framebuffer. Pass this (or the
+  framebuffer itself) to <a href="#/p5/texture">texture()</a> to draw it to
+  the canvas, or pass it to a shader with
+  <a href="#/p5.Shader/setUniform">setUniform()</a> to read its data.</p>
+  <p>Since Framebuffers are controlled by WebGL, their y coordinates are stored
+  flipped compared to images and videos. When texturing with a framebuffer
+  texture, you may want to flip vertically, e.g. with
+  <code>plane(framebuffer.width, -framebuffer.height)</code>.</p>
+line: 1279
+itemtype: property
+class: p5.Framebuffer
+example:
+  - |-
+
+    <div>
+    <code>
+    let framebuffer;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      framebuffer = createFramebuffer();
+      noStroke();
+    }
+
+    function draw() {
+      // Draw to the framebuffer
+      framebuffer.begin();
+      background(255);
+      normalMaterial();
+      sphere(20);
+      framebuffer.end();
+
+      // Draw the framebuffer to the main canvas
+      image(framebuffer.color, -width/2, -height/2);
+    }
+    </code>
+    </div>
+alt: 'A red, green, and blue sphere in the middle of the canvas'
+chainable: false
+---
+
+
+# color
diff --git a/src/content/reference/en/p5.Framebuffer/createCamera.mdx b/src/content/reference/en/p5.Framebuffer/createCamera.mdx
new file mode 100644
index 0000000000..0913251df7
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/createCamera.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createCamera
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>Creates and returns a new
+  <a href="#/p5.FramebufferCamera">p5.FramebufferCamera</a> to be used
+  while drawing to this framebuffer. The camera will be set as the
+  currently active camera.</p>
+line: 698
+itemtype: method
+class: p5.Framebuffer
+return:
+  description: A new camera
+  type: p5.Camera
+chainable: false
+---
+
+
+# createCamera
diff --git a/src/content/reference/en/p5.Framebuffer/depth.mdx b/src/content/reference/en/p5.Framebuffer/depth.mdx
new file mode 100644
index 0000000000..bacc213c0e
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/depth.mdx
@@ -0,0 +1,96 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: depth
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: >
+  <p>A texture with the depth information of the framebuffer. If the framebuffer
+
+  was created with <code>{ depth: false }</code> in its settings, then this
+  property will
+
+  be undefined. Pass this to <a href="#/p5/texture">texture()</a> to draw it to
+
+  the canvas, or pass it to a shader with
+
+  <a href="#/p5.Shader/setUniform">setUniform()</a> to read its data.</p>
+
+  <p>Since Framebuffers are controlled by WebGL, their y coordinates are stored
+
+  flipped compared to images and videos. When texturing with a framebuffer
+
+  texture, you may want to flip vertically, e.g. with
+
+  <code>plane(framebuffer.width, -framebuffer.height)</code>.</p>
+line: 1321
+itemtype: property
+class: p5.Framebuffer
+example:
+  - |-
+
+    <div>
+    <code>
+    let framebuffer;
+    let depthShader;
+
+    const vert = `
+    precision highp float;
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+    varying vec2 vTexCoord;
+    void main() {
+      vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * viewModelPosition;
+      vTexCoord = aTexCoord;
+    }
+    `;
+
+    const frag = `
+    precision highp float;
+    varying vec2 vTexCoord;
+    uniform sampler2D depth;
+    void main() {
+      float depthVal = texture2D(depth, vTexCoord).r;
+      gl_FragColor = mix(
+        vec4(1., 1., 0., 1.), // yellow
+        vec4(0., 0., 1., 1.), // blue
+        pow(depthVal, 6.)
+      );
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      framebuffer = createFramebuffer();
+      depthShader = createShader(vert, frag);
+      noStroke();
+    }
+
+    function draw() {
+      // Draw to the framebuffer
+      framebuffer.begin();
+      background(255);
+      rotateX(frameCount * 0.01);
+      box(20, 20, 100);
+      framebuffer.end();
+
+      push();
+      shader(depthShader);
+      depthShader.setUniform('depth', framebuffer.depth);
+      plane(framebuffer.width, framebuffer.height);
+      pop();
+    }
+    </code>
+    </div>
+alt: |-
+  A video of a rectangular prism rotating, with parts closest to the camera
+  appearing yellow and colors getting progressively more blue the farther
+  from the camera they go
+chainable: false
+---
+
+
+# depth
diff --git a/src/content/reference/en/p5.Framebuffer/draw.mdx b/src/content/reference/en/p5.Framebuffer/draw.mdx
new file mode 100644
index 0000000000..8a226d5ec9
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/draw.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: draw
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: >
+  <p>Run a function while drawing to the framebuffer rather than to its canvas.
+
+  This is equivalent to calling <code>framebuffer.begin()</code>, running the
+  function,
+
+  and then calling <code>framebuffer.end()</code>, but ensures that one never
+
+  accidentally forgets <code>begin</code> or <code>end</code>.</p>
+line: 947
+params:
+  - name: callback
+    description: |
+      <p>A function to run that draws to the canvas. The
+      function will immediately be run, but it will draw to the framebuffer
+      instead of the canvas.</p>
+    type: Function
+itemtype: method
+class: p5.Framebuffer
+example:
+  - |-
+
+    <div>
+    <code>
+    let framebuffer;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      framebuffer = createFramebuffer();
+      noStroke();
+    }
+
+    function draw() {
+      // Draw to the framebuffer
+      framebuffer.draw(function() {
+        background(255);
+        translate(0, 10*sin(frameCount * 0.01), 0);
+        rotateX(frameCount * 0.01);
+        rotateY(frameCount * 0.01);
+        fill(255, 0, 0);
+        box(50);
+      });
+
+      background(100);
+      // Draw the framebuffer to the main canvas
+      image(framebuffer, -50, -50, 25, 25);
+      image(framebuffer, 0, 0, 35, 35);
+    }
+    </code>
+    </div>
+alt: |-
+  A video of a floating and rotating red cube is pasted twice on the
+  canvas: once in the top left, and again, larger, in the bottom right.
+chainable: false
+---
+
+
+# draw
diff --git a/src/content/reference/en/p5.Framebuffer/end.mdx b/src/content/reference/en/p5.Framebuffer/end.mdx
new file mode 100644
index 0000000000..1bd798e871
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/end.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: end
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>After having previously called
+  <a href="#/p5.Framebuffer/begin">begin()</a>, this method stops drawing
+  functions from going to the framebuffer's texture, allowing them to go
+  right to the canvas again. After this, one can read from the framebuffer's
+  texture.</p>
+line: 918
+itemtype: method
+class: p5.Framebuffer
+chainable: false
+---
+
+
+# end
diff --git a/src/content/reference/en/p5.Framebuffer/get.mdx b/src/content/reference/en/p5.Framebuffer/get.mdx
new file mode 100644
index 0000000000..8b446f4e0f
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/get.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: get
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: >
+  <p>Get a region of pixels from the canvas in the form of a
+
+  <a href="#/p5.Image">p5.Image</a>, or a single pixel as an array of
+
+  numbers.</p>
+
+  <p>Returns an array of [R,G,B,A] values for any pixel or grabs a section of
+
+  an image. If the Framebuffer has been set up to not store alpha values, then
+
+  only [R,G,B] will be returned. If no parameters are specified, the entire
+
+  image is returned.
+
+  Use the x and y parameters to get the value of one pixel. Get a section of
+
+  the display window by specifying additional w and h parameters. When
+
+  getting an image, the x and y parameters define the coordinates for the
+
+  upper-left corner of the image, regardless of the current <a
+  href="#/p5/imageMode">imageMode()</a>.</p>
+line: 1026
+itemtype: method
+class: p5.Framebuffer
+return:
+  description: the rectangle <a href="#/p5.Image">p5.Image</a>
+  type: p5.Image
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5.Framebuffer/pixelDensity.mdx b/src/content/reference/en/p5.Framebuffer/pixelDensity.mdx
new file mode 100644
index 0000000000..fe091a95b2
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/pixelDensity.mdx
@@ -0,0 +1,27 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pixelDensity
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>Gets or sets the pixel scaling for high pixel density displays. By
+  default, the density will match that of the canvas the framebuffer was
+  created on, which will match the display density.</p>
+  <p>Call this method with no arguments to get the current density, or pass
+  in a number to set the density.</p>
+line: 235
+params:
+  - name: density
+    description: |
+      <p>A scaling factor for the number of pixels per
+      side of the framebuffer</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Framebuffer
+chainable: false
+---
+
+
+# pixelDensity
diff --git a/src/content/reference/en/p5.Framebuffer/pixels.mdx b/src/content/reference/en/p5.Framebuffer/pixels.mdx
new file mode 100644
index 0000000000..3f54b8bb1c
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/pixels.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pixels
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: >
+  <p>A <a
+  href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
+
+  /Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>
+
+  containing the values for all the pixels in the Framebuffer.</p>
+
+  <p>Like the <a href="#/p5/pixels">main canvas pixels property</a>, call
+
+  <a href="#/p5.Framebuffer/loadPixels">loadPixels()</a> before reading
+
+  it, and call <a href="#/p5.Framebuffer.updatePixels">updatePixels()</a>
+
+  afterwards to update its data.</p>
+
+  <p>Note that updating pixels via this property will be slower than
+
+  <a href="#/p5.Framebuffer/begin">drawing to the framebuffer directly.</a>
+
+  Consider using a shader instead of looping over pixels.</p>
+line: 93
+itemtype: property
+class: p5.Framebuffer
+chainable: false
+---
+
+
+# pixels
diff --git a/src/content/reference/en/p5.Framebuffer/remove.mdx b/src/content/reference/en/p5.Framebuffer/remove.mdx
new file mode 100644
index 0000000000..7a8910016e
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/remove.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: remove
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>Removes the framebuffer and frees its resources.</p>
+line: 729
+itemtype: method
+class: p5.Framebuffer
+example:
+  - |-
+
+    <div>
+    <code>
+    let framebuffer;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      const useFramebuffer = (frameCount % 120) > 60;
+      if (useFramebuffer && !framebuffer) {
+        // Create a new framebuffer for us to use
+        framebuffer = createFramebuffer();
+      } else if (!useFramebuffer && framebuffer) {
+        // Free the old framebuffer's resources
+        framebuffer.remove();
+        framebuffer = undefined;
+      }
+
+      background(255);
+      if (useFramebuffer) {
+        // Draw to the framebuffer
+        framebuffer.begin();
+        background(255);
+        rotateX(frameCount * 0.01);
+        rotateY(frameCount * 0.01);
+        fill(255, 0, 0);
+        box(30);
+        framebuffer.end();
+
+        image(framebuffer, -width/2, -height/2);
+      }
+    }
+    </code>
+    </div>
+alt: A rotating red cube blinks on and off every second.
+chainable: false
+---
+
+
+# remove
diff --git a/src/content/reference/en/p5.Framebuffer/resize.mdx b/src/content/reference/en/p5.Framebuffer/resize.mdx
new file mode 100644
index 0000000000..1a645ce039
--- /dev/null
+++ b/src/content/reference/en/p5.Framebuffer/resize.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: resize
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>Resizes the framebuffer to the given width and height.</p>
+line: 184
+params:
+  - name: width
+    description: ''
+    type: Number
+  - name: height
+    description: ''
+    type: Number
+itemtype: method
+class: p5.Framebuffer
+example:
+  - |-
+
+    <div>
+    <code>
+    let framebuffer;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      framebuffer = createFramebuffer();
+      noStroke();
+    }
+
+    function mouseMoved() {
+      framebuffer.resize(
+        max(20, mouseX),
+        max(20, mouseY)
+      );
+    }
+
+    function draw() {
+      // Draw to the framebuffer
+      framebuffer.begin();
+      background(255);
+      normalMaterial();
+      sphere(20);
+      framebuffer.end();
+
+      background(100);
+      // Draw the framebuffer to the main canvas
+      image(framebuffer, -width/2, -height/2);
+    }
+    </code>
+    </div>
+alt: |-
+  A red, green, and blue sphere is drawn in the middle of a white rectangle
+  which starts in the top left of the canvas and whose bottom right is at
+  the user's mouse
+chainable: false
+---
+
+
+# resize
diff --git a/src/content/reference/en/p5.Gain/amp.mdx b/src/content/reference/en/p5.Gain/amp.mdx
new file mode 100644
index 0000000000..56ed94ade9
--- /dev/null
+++ b/src/content/reference/en/p5.Gain/amp.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the output level of the gain node.</p>
+line: 11098
+params:
+  - name: volume
+    description: |
+      <p>amplitude between 0 and 1.0</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>create a fade that lasts rampTime</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Gain
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.Gain/connect.mdx b/src/content/reference/en/p5.Gain/connect.mdx
new file mode 100644
index 0000000000..c3e884975f
--- /dev/null
+++ b/src/content/reference/en/p5.Gain/connect.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Send output to a p5.sound or web audio object</p>
+line: 11070
+params:
+  - name: unit
+    description: ''
+    type: Object
+itemtype: method
+class: p5.Gain
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.Gain/disconnect.mdx b/src/content/reference/en/p5.Gain/disconnect.mdx
new file mode 100644
index 0000000000..4edfefe847
--- /dev/null
+++ b/src/content/reference/en/p5.Gain/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect all output.</p>
+line: 11084
+itemtype: method
+class: p5.Gain
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.Gain/setInput.mdx b/src/content/reference/en/p5.Gain/setInput.mdx
new file mode 100644
index 0000000000..4f8bbf9d80
--- /dev/null
+++ b/src/content/reference/en/p5.Gain/setInput.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setInput
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect a source to the gain node.</p>
+line: 11055
+params:
+  - name: src
+    description: |
+      <p>p5.sound / Web Audio object with a sound
+                               output.</p>
+    type: Object
+itemtype: method
+class: p5.Gain
+chainable: false
+---
+
+
+# setInput
diff --git a/src/content/reference/en/p5.Geometry/averageNormals.mdx b/src/content/reference/en/p5.Geometry/averageNormals.mdx
new file mode 100644
index 0000000000..fa7566141c
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/averageNormals.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: averageNormals
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: |
+  <p>Averages the vertex normals. Used in curved
+  surfaces</p>
+line: 535
+itemtype: method
+class: p5.Geometry
+chainable: true
+---
+
+
+# averageNormals
diff --git a/src/content/reference/en/p5.Geometry/averagePoleNormals.mdx b/src/content/reference/en/p5.Geometry/averagePoleNormals.mdx
new file mode 100644
index 0000000000..44f82c0c71
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/averagePoleNormals.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: averagePoleNormals
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: |
+  <p>Averages pole normals.  Used in spherical primitives</p>
+line: 556
+itemtype: method
+class: p5.Geometry
+chainable: true
+---
+
+
+# averagePoleNormals
diff --git a/src/content/reference/en/p5.Geometry/clearColors.mdx b/src/content/reference/en/p5.Geometry/clearColors.mdx
new file mode 100644
index 0000000000..c361a21d17
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/clearColors.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clearColors
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: >
+  <p>Removes the internal colors of p5.Geometry.
+
+  Using <code>clearColors()</code>, you can use <code>fill()</code> to supply
+  new colors before drawing each shape.
+
+  If <code>clearColors()</code> is not used, the shapes will use their internal
+  colors by ignoring <code>fill()</code>.</p>
+line: 123
+itemtype: method
+class: p5.Geometry
+example:
+  - |-
+
+    <div>
+    <code>
+    let shape01;
+    let shape02;
+    let points = [];
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      points.push(new p5.Vector(-1, -1, 0), new p5.Vector(-1, 1, 0),
+        new p5.Vector(1, -1, 0), new p5.Vector(-1, -1, 0));
+      buildShape01();
+      buildShape02();
+    }
+    function draw() {
+      background(0);
+      fill('pink'); // shape01 retains its internal blue color, so it won't turn pink.
+      model(shape01);
+      fill('yellow'); // Now, shape02 is yellow.
+      model(shape02);
+    }
+
+    function buildShape01() {
+      beginGeometry();
+      fill('blue'); // shape01's color is blue because its internal colors remain.
+      beginShape();
+      for (let vec of points) vertex(vec.x * 100, vec.y * 100, vec.z * 100);
+      endShape(CLOSE);
+      shape01 = endGeometry();
+    }
+
+    function buildShape02() {
+      beginGeometry();
+      fill('red');  // shape02.clearColors() removes its internal colors. Now, shape02 is red.
+      beginShape();
+      for (let vec of points) vertex(vec.x * 200, vec.y * 200, vec.z * 200);
+      endShape(CLOSE);
+      shape02 = endGeometry();
+      shape02.clearColors(); // Resets shape02's colors.
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# clearColors
diff --git a/src/content/reference/en/p5.Geometry/computeFaces.mdx b/src/content/reference/en/p5.Geometry/computeFaces.mdx
new file mode 100644
index 0000000000..cb8ace6ba0
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/computeFaces.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: computeFaces
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: |
+  <p>computes faces for geometry objects based on the vertices.</p>
+line: 321
+itemtype: method
+class: p5.Geometry
+chainable: true
+---
+
+
+# computeFaces
diff --git a/src/content/reference/en/p5.Geometry/computeNormals.mdx b/src/content/reference/en/p5.Geometry/computeNormals.mdx
new file mode 100644
index 0000000000..d685302a2d
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/computeNormals.mdx
@@ -0,0 +1,127 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: computeNormals
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: >
+  <p>This function calculates normals for each face, where each vertex's normal
+  is the average of the normals of all faces it's connected to.
+
+  i.e computes smooth normals per vertex as an average of each face.</p>
+
+  <p>When using <code>FLAT</code> shading, vertices are disconnected/duplicated
+  i.e each face has its own copy of vertices.
+
+  When using <code>SMOOTH</code> shading, vertices are connected/deduplicated
+  i.e each face has its vertices shared with other faces.</p>
+
+  <p>Options can include:</p>
+
+  <ul>
+
+  <li><code>roundToPrecision</code>: Precision value for rounding computations.
+  Defaults to 3.</li>
+
+  </ul>
+line: 364
+params:
+  - name: shadingType
+    description: >
+      <p>shading type (<code>FLAT</code> for flat shading or <code>SMOOTH</code>
+      for smooth shading) for buildGeometry() outputs. Defaults to
+      <code>FLAT</code>.</p>
+    type: String
+    optional: true
+  - name: options
+    description: |
+      <p>An optional object with configuration.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.Geometry
+example:
+  - |-
+
+    <div>
+    <code>
+    let helix;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      helix = buildGeometry(() => {
+        beginShape();
+
+        for (let i = 0; i < TWO_PI * 3; i += 0.6) {
+          let radius = 20;
+          let x = cos(i) * radius;
+          let y = sin(i) * radius;
+          let z = map(i, 0, TWO_PI * 3, -30, 30);
+          vertex(x, y, z);
+        }
+        endShape();
+      });
+      helix.computeNormals();
+    }
+    function draw() {
+      background(255);
+      stroke(0);
+      fill(150, 200, 250);
+      lights();
+      rotateX(PI*0.2);
+      orbitControl();
+      model(helix);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let star;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      star = buildGeometry(() => {
+        beginShape();
+        for (let i = 0; i < TWO_PI; i += PI / 5) {
+          let outerRadius = 60;
+          let innerRadius = 30;
+          let xOuter = cos(i) * outerRadius;
+          let yOuter = sin(i) * outerRadius;
+          let zOuter = random(-20, 20);
+          vertex(xOuter, yOuter, zOuter);
+
+          let nextI = i + PI / 5 / 2;
+          let xInner = cos(nextI) * innerRadius;
+          let yInner = sin(nextI) * innerRadius;
+          let zInner = random(-20, 20);
+          vertex(xInner, yInner, zInner);
+        }
+        endShape(CLOSE);
+      });
+      star.computeNormals(SMOOTH);
+    }
+    function draw() {
+      background(255);
+      stroke(0);
+      fill(150, 200, 250);
+      lights();
+      rotateX(PI*0.2);
+      orbitControl();
+      model(star);
+    }
+    </code>
+    </div>
+alt: >-
+  A star-like geometry, here the computeNormals(SMOOTH) is applied for a smooth
+  shading effect.
+
+  This helps to avoid the faceted appearance that can occur with flat shading.
+chainable: true
+---
+
+
+# computeNormals
diff --git a/src/content/reference/en/p5.Geometry/flipU.mdx b/src/content/reference/en/p5.Geometry/flipU.mdx
new file mode 100644
index 0000000000..a296706c7d
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/flipU.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: flipU
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: |
+  <p>Flips the U texture coordinates of the model.</p>
+line: 177
+itemtype: method
+class: p5.Geometry
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+    let model1;
+    let model2;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(150, 150, WEBGL);
+      background(200);
+
+      model1 = createShape(50, 50);
+      model2 = createShape(50, 50);
+      model2.flipU();
+    }
+
+    function draw() {
+      background(0);
+
+      // original
+      push();
+      translate(-40, 0, 0);
+      texture(img);
+      noStroke();
+      plane(50);
+      model(model1);
+      pop();
+
+      // flipped
+      push();
+      translate(40, 0, 0);
+      texture(img);
+      noStroke();
+      plane(50);
+      model(model2);
+      pop();
+    }
+
+    function createShape(w, h) {
+      return buildGeometry(() => {
+        textureMode(NORMAL);
+        beginShape();
+        vertex(-w / 2, -h / 2, 0, 0);
+        vertex(w / 2, -h / 2, 1, 0);
+        vertex(w / 2, h / 2, 1, 1);
+        vertex(-w / 2, h / 2, 0, 1);
+        endShape(CLOSE);
+      });
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: p5.Geometry
+chainable: false
+---
+
+
+# flipU
diff --git a/src/content/reference/en/p5.Geometry/flipV.mdx b/src/content/reference/en/p5.Geometry/flipV.mdx
new file mode 100644
index 0000000000..e1c6c5aa49
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/flipV.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: flipV
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: |
+  <p>Flips the V texture coordinates of the model.</p>
+line: 249
+itemtype: method
+class: p5.Geometry
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+    let model1;
+    let model2;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(150, 150, WEBGL);
+      background(200);
+
+      model1 = createShape(50, 50);
+      model2 = createShape(50, 50);
+      model2.flipV();
+    }
+
+    function draw() {
+      background(0);
+
+      // original
+      push();
+      translate(-40, 0, 0);
+      texture(img);
+      noStroke();
+      plane(50);
+      model(model1);
+      pop();
+
+      // flipped
+      push();
+      translate(40, 0, 0);
+      texture(img);
+      noStroke();
+      plane(50);
+      model(model2);
+      pop();
+    }
+
+    function createShape(w, h) {
+      return buildGeometry(() => {
+        textureMode(NORMAL);
+        beginShape();
+        vertex(-w / 2, -h / 2, 0, 0);
+        vertex(w / 2, -h / 2, 1, 0);
+        vertex(w / 2, h / 2, 1, 1);
+        vertex(-w / 2, h / 2, 0, 1);
+        endShape(CLOSE);
+      });
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: p5.Geometry
+chainable: false
+---
+
+
+# flipV
diff --git a/src/content/reference/en/p5.Geometry/normalize.mdx b/src/content/reference/en/p5.Geometry/normalize.mdx
new file mode 100644
index 0000000000..b503e87695
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/normalize.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: normalize
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: |
+  <p>Modifies all vertices to be centered within the range -100 to 100.</p>
+line: 866
+itemtype: method
+class: p5.Geometry
+chainable: true
+---
+
+
+# normalize
diff --git a/src/content/reference/en/p5.Graphics/createFramebuffer.mdx b/src/content/reference/en/p5.Graphics/createFramebuffer.mdx
new file mode 100644
index 0000000000..9d058b6701
--- /dev/null
+++ b/src/content/reference/en/p5.Graphics/createFramebuffer.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createFramebuffer
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Graphics.js
+description: >
+  <p>Creates and returns a new <a href="#/p5.Framebuffer">p5.Framebuffer</a>
+
+  inside a p5.Graphics WebGL context.</p>
+
+  <p>This takes the same parameters as the <a
+  href="#/p5/createFramebuffer">global
+
+  createFramebuffer function.</a></p>
+line: 199
+itemtype: method
+class: p5.Graphics
+return:
+  description: ''
+  type: p5.Framebuffer
+chainable: false
+---
+
+
+# createFramebuffer
diff --git a/src/content/reference/en/p5.Graphics/remove.mdx b/src/content/reference/en/p5.Graphics/remove.mdx
new file mode 100644
index 0000000000..860a6a784a
--- /dev/null
+++ b/src/content/reference/en/p5.Graphics/remove.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: remove
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Graphics.js
+description: |
+  <p>Removes a Graphics object from the page and frees any resources
+  associated with it.</p>
+line: 131
+itemtype: method
+class: p5.Graphics
+example:
+  - |-
+
+    <div class='norender'><code>
+    let bg;
+    function setup() {
+      bg = createCanvas(100, 100);
+      bg.background(0);
+      image(bg, 0, 0);
+      bg.remove();
+    }
+    </code></div>
+
+    <div><code>
+    let bg;
+    function setup() {
+      pixelDensity(1);
+      createCanvas(100, 100);
+      stroke(255);
+      fill(0);
+
+      // create and draw the background image
+      bg = createGraphics(100, 100);
+      bg.background(200);
+      bg.ellipse(50, 50, 80, 80);
+    }
+    function draw() {
+      let t = millis() / 1000;
+      // draw the background
+      if (bg) {
+        image(bg, frameCount % 100, 0);
+        image(bg, frameCount % 100 - 100, 0);
+      }
+      // draw the foreground
+      let p = p5.Vector.fromAngle(t, 35).add(50, 50);
+      ellipse(p.x, p.y, 30);
+    }
+    function mouseClicked() {
+      // remove the background
+      if (bg) {
+        bg.remove();
+        bg = null;
+      }
+    }
+    </code></div>
+alt: |-
+  no image
+  a multi-colored circle moving back and forth over a scrolling background.
+chainable: false
+---
+
+
+# remove
diff --git a/src/content/reference/en/p5.Graphics/reset.mdx b/src/content/reference/en/p5.Graphics/reset.mdx
new file mode 100644
index 0000000000..90f5311068
--- /dev/null
+++ b/src/content/reference/en/p5.Graphics/reset.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: reset
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Graphics.js
+description: >
+  <p>Resets certain values such as those modified by functions in the Transform
+  category
+
+  and in the Lights category that are not automatically reset
+
+  with graphics buffer objects. Calling this in <a href='#/p5/draw'>draw()</a>
+  will copy the behavior
+
+  of the standard canvas.</p>
+line: 79
+itemtype: method
+class: p5.Graphics
+example:
+  - |-
+
+
+    <div><code>
+    let pg;
+    function setup() {
+      createCanvas(100, 100);
+      background(0);
+      pg = createGraphics(50, 100);
+      pg.fill(0);
+      frameRate(5);
+    }
+
+    function draw() {
+      image(pg, width / 2, 0);
+      pg.background(255);
+      // p5.Graphics object behave a bit differently in some cases
+      // The normal canvas on the left resets the translate
+      // with every loop through draw()
+      // the graphics object on the right doesn't automatically reset
+      // so translate() is additive and it moves down the screen
+      rect(0, 0, width / 2, 5);
+      pg.rect(0, 0, width / 2, 5);
+      translate(0, 5, 0);
+      pg.translate(0, 5, 0);
+    }
+    function mouseClicked() {
+      // if you click you will see that
+      // reset() resets the translate back to the initial state
+      // of the Graphics object
+      pg.reset();
+    }
+    </code></div>
+alt: >-
+  A white line on a black background stays still on the top-left half.
+
+  A black line animates from top to bottom on a white background on the right
+  half.
+
+  When clicked, the black line starts back over at the top.
+chainable: false
+---
+
+
+# reset
diff --git a/src/content/reference/en/p5.Image/blend.mdx b/src/content/reference/en/p5.Image/blend.mdx
new file mode 100644
index 0000000000..aeeec7c0a2
--- /dev/null
+++ b/src/content/reference/en/p5.Image/blend.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: blend
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Copies a region of pixels from another
+
+  <a href="#/p5.Image">p5.Image</a> object into this one. The
+  <code>blendMode</code>
+
+  parameter blends the images' colors to create different effects.</p>
+line: 1107
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let mountains;
+    let bricks;
+
+    function preload() {
+      mountains = loadImage('assets/rockies.jpg');
+      bricks = loadImage('assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+      image(mountains, 0, 0);
+      image(bricks, 0, 0);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mountains;
+    let bricks;
+
+    function preload() {
+      mountains = loadImage('assets/rockies.jpg');
+      bricks = loadImage('assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+      image(mountains, 0, 0);
+      image(bricks, 0, 0);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mountains;
+    let bricks;
+
+    function preload() {
+      mountains = loadImage('assets/rockies.jpg');
+      bricks = loadImage('assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+      image(mountains, 0, 0);
+      image(bricks, 0, 0);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# blend
diff --git a/src/content/reference/en/p5.Image/copy.mdx b/src/content/reference/en/p5.Image/copy.mdx
new file mode 100644
index 0000000000..f0bc8f5a33
--- /dev/null
+++ b/src/content/reference/en/p5.Image/copy.mdx
@@ -0,0 +1,55 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: copy
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Copies pixels from a source <a href="#/p5.Image">p5.Image</a>
+   to this one. Calling <code>img.copy()</code> will scale pixels from the source
+   region if it isn't the same size as the destination region.</p>
+line: 770
+itemtype: method
+class: p5.Image
+example:
+  - |2-
+
+     <div>
+     <code>
+     let img;
+    function preload() {
+       img = loadImage('assets/rockies.jpg');
+     }
+    function setup() {
+       img.copy(7, 22, 10, 10, 35, 25, 50, 50);
+       image(img, 0, 0);
+       // Outline copied region.
+       stroke(255);
+       noFill();
+       square(7, 22, 10);
+      describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+     }
+     </code>
+     </div>
+    <div>
+     <code>
+     let mountains;
+     let bricks;
+    function preload() {
+       mountains = loadImage('assets/rockies.jpg');
+       bricks = loadImage('assets/bricks.jpg');
+     }
+    function setup() {
+       let x = bricks.width / 2;
+       let y = bricks.height / 2;
+       mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+       image(mountains, 0, 0);
+      describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');
+     }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# copy
diff --git a/src/content/reference/en/p5.Image/delay.mdx b/src/content/reference/en/p5.Image/delay.mdx
new file mode 100644
index 0000000000..561f4050f4
--- /dev/null
+++ b/src/content/reference/en/p5.Image/delay.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: delay
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Changes the delay between frames in an animated GIF.</p>
+
+  <p>The second parameter, <code>index</code>, is optional. If provided, only
+  the frame
+
+  at <code>index</code> will have its delay modified. All other frames will keep
+
+  their default delay.</p>
+line: 1521
+params:
+  - name: d
+    description: |
+      <p>delay in milliseconds between switching frames.</p>
+    type: Number
+  - name: index
+    description: |
+      <p>index of the frame that will have its delay modified.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let gifFast;
+    let gifSlow;
+
+    function preload() {
+      gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+      gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+    }
+
+    function setup() {
+      gifFast.resize(50, 50);
+      gifSlow.resize(50, 50);
+      gifFast.delay(10);
+      gifSlow.delay(100);
+    }
+
+    function draw() {
+      image(gifFast, 0, 0);
+      image(gifSlow, 50, 0);
+
+      describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let gif;
+
+    function preload() {
+      gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+    }
+
+    function setup() {
+      gif.delay(3000, 67);
+    }
+
+    function draw() {
+      image(gif, 0, 0);
+
+      describe('An animated eye looking around. It pauses for three seconds while it looks down.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# delay
diff --git a/src/content/reference/en/p5.Image/filter.mdx b/src/content/reference/en/p5.Image/filter.mdx
new file mode 100644
index 0000000000..9f012a28cf
--- /dev/null
+++ b/src/content/reference/en/p5.Image/filter.mdx
@@ -0,0 +1,189 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: filter
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Applies an image filter to the <a href="#/p5.Image">p5.Image</a> object.
+  The preset options are:</p>
+  <p><code>INVERT</code>
+  Inverts the colors in the image. No parameter is used.</p>
+  <p><code>GRAY</code>
+  Converts the image to grayscale. No parameter is used.</p>
+  <p><code>THRESHOLD</code>
+  Converts the image to black and white. Pixels with a grayscale value
+  above a given threshold are converted to white. The rest are converted to
+  black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+  value is specified, 0.5 is used.</p>
+  <p><code>OPAQUE</code>
+  Sets the alpha channel to be entirely opaque. No parameter is used.</p>
+  <p><code>POSTERIZE</code>
+  Limits the number of colors in the image. Each color channel is limited to
+  the number of colors specified. Values between 2 and 255 are valid, but
+  results are most noticeable with lower values. The default value is 4.</p>
+  <p><code>BLUR</code>
+  Blurs the image. The level of blurring is specified by a blur radius. Larger
+  values increase the blur. The default value is 4. A gaussian blur is used
+  in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>
+  <p><code>ERODE</code>
+  Reduces the light areas. No parameter is used.</p>
+  <p><code>DILATE</code>
+  Increases the light areas. No parameter is used.</p>
+line: 926
+params:
+  - name: filterType
+    description: |
+      <p>either THRESHOLD, GRAY, OPAQUE, INVERT,
+                                     POSTERIZE, ERODE, DILATE or BLUR.</p>
+    type: Constant
+  - name: filterParam
+    description: |
+      <p>parameter unique to each filter.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(INVERT);
+      image(img, 0, 0);
+
+      describe('A blue brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(GRAY);
+      image(img, 0, 0);
+
+      describe('A brick wall drawn in grayscale.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(THRESHOLD);
+      image(img, 0, 0);
+
+      describe('A brick wall drawn in black and white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(OPAQUE);
+      image(img, 0, 0);
+
+      describe('A red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(POSTERIZE, 3);
+      image(img, 0, 0);
+
+      describe('An image of a red brick wall drawn with a limited color palette.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(BLUR, 3);
+      image(img, 0, 0);
+
+      describe('A blurry image of a red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(DILATE);
+      image(img, 0, 0);
+
+      describe('A red brick wall with bright lines between each brick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      img.filter(ERODE);
+      image(img, 0, 0);
+
+      describe('A red brick wall with faint lines between each brick.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# filter
diff --git a/src/content/reference/en/p5.Image/get.mdx b/src/content/reference/en/p5.Image/get.mdx
new file mode 100644
index 0000000000..ce38f67301
--- /dev/null
+++ b/src/content/reference/en/p5.Image/get.mdx
@@ -0,0 +1,111 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: get
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Gets a pixel or a region of pixels from a
+
+  <a href="#/p5.Image">p5.Image</a> object.</p>
+
+  <p><code>img.get()</code> is easy to use but it's not as fast as
+
+  <a href="#/p5.Image/pixels">img.pixels</a>. Use
+
+  <a href="#/p5.Image/pixels">img.pixels</a> to read many pixel values.</p>
+
+  <p>The version of <code>img.get()</code> with no parameters returns the entire
+  image.</p>
+
+  <p>The version of <code>img.get()</code> with two parameters interprets them
+  as
+
+  coordinates. It returns an array with the <code>[R, G, B, A]</code> values of
+  the
+
+  pixel at the given point.</p>
+
+  <p>The version of <code>img.get()</code> with four parameters interprets them
+  as
+
+  coordinates and dimensions. It returns a subsection of the canvas as a
+
+  <a href="#/p5.Image">p5.Image</a> object. The first two parameters are
+
+  the coordinates for the upper-left corner of the subsection. The last two
+
+  parameters are the width and height of the subsection.</p>
+
+  <p>Use <a href="#/p5.Image/get">img.get()</a> to work directly with
+
+  <a href="#/p5.Image">p5.Image</a> objects.</p>
+line: 430
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let img2 = get();
+      image(img2, width / 2, 0);
+
+      describe('Two identical mountain landscapes shown side-by-side.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let c = img.get(50, 90);
+      fill(c);
+      noStroke();
+      square(25, 25, 50);
+
+      describe('A mountain landscape with an olive green square in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let img2 = img.get(0, 0, img.width / 2, img.height / 2);
+      image(img2, width / 2, height / 2);
+
+      describe('A mountain landscape drawn on top of another mountain landscape.');
+    }
+    </code>
+    </div>
+return:
+  description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5.Image/getCurrentFrame.mdx b/src/content/reference/en/p5.Image/getCurrentFrame.mdx
new file mode 100644
index 0000000000..4523bf2f98
--- /dev/null
+++ b/src/content/reference/en/p5.Image/getCurrentFrame.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getCurrentFrame
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Gets the index of the current frame in an animated GIF.</p>
+line: 1334
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let gif;
+
+    function preload() {
+      gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+    }
+
+    function draw() {
+      let index = gif.getCurrentFrame();
+      image(gif, 0, 0);
+      text(index, 10, 90);
+
+      describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
+    }
+    </code>
+    </div>
+return:
+  description: index of the GIF's current frame.
+  type: Number
+chainable: false
+---
+
+
+# getCurrentFrame
diff --git a/src/content/reference/en/p5.Image/height.mdx b/src/content/reference/en/p5.Image/height.mdx
new file mode 100644
index 0000000000..efd313b939
--- /dev/null
+++ b/src/content/reference/en/p5.Image/height.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: height
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Image height.</p>
+line: 117
+itemtype: property
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let x = img.width / 2;
+      let y = img.height / 2;
+      let d = 20;
+      circle(x, y, d);
+
+      describe('An image of a mountain landscape with a white circle drawn in the middle.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# height
diff --git a/src/content/reference/en/p5.Image/loadPixels.mdx b/src/content/reference/en/p5.Image/loadPixels.mdx
new file mode 100644
index 0000000000..0e0f5591ac
--- /dev/null
+++ b/src/content/reference/en/p5.Image/loadPixels.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadPixels
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Loads the current value of each pixel in the
+
+  <a href="#/p5.Image">p5.Image</a> object into the <code>img.pixels</code>
+  array.
+
+  This method must be called before reading or modifying pixel values.</p>
+line: 308
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img = createImage(66, 66);
+    img.loadPixels();
+    for (let x = 0; x < img.width; x += 1) {
+      for (let y = 0; y < img.height; y += 1) {
+        img.set(x, y, 0);
+      }
+    }
+    img.updatePixels();
+    image(img, 17, 17);
+
+    describe('A black square drawn in the middle of a gray square.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img = createImage(66, 66);
+    img.loadPixels();
+    let numPixels = 4 * img.width * img.height;
+    for (let i = 0; i < numPixels; i += 4) {
+      // Red.
+      img.pixels[i] = 0;
+      // Green.
+      img.pixels[i + 1] = 0;
+      // Blue.
+      img.pixels[i + 2] = 0;
+      // Alpha.
+      img.pixels[i + 3] = 255;
+    }
+    img.updatePixels();
+    image(img, 17, 17);
+
+    describe('A black square drawn in the middle of a gray square.');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# loadPixels
diff --git a/src/content/reference/en/p5.Image/mask.mdx b/src/content/reference/en/p5.Image/mask.mdx
new file mode 100644
index 0000000000..ed62bfa554
--- /dev/null
+++ b/src/content/reference/en/p5.Image/mask.mdx
@@ -0,0 +1,45 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mask
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Masks part of an image from displaying by loading another
+  image and using its alpha channel as an alpha channel for
+  this image. Masks are cumulative, once applied to an image
+  object, they cannot be removed.</p>
+line: 845
+params:
+  - name: srcImage
+    description: |
+      <p>source image.</p>
+    type: p5.Image
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let photo;
+    let maskImage;
+
+    function preload() {
+      photo = loadImage('assets/rockies.jpg');
+      maskImage = loadImage('assets/mask2.png');
+    }
+
+    function setup() {
+      photo.mask(maskImage);
+      image(photo, 0, 0);
+
+      describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mask
diff --git a/src/content/reference/en/p5.Image/numFrames.mdx b/src/content/reference/en/p5.Image/numFrames.mdx
new file mode 100644
index 0000000000..1d123b5106
--- /dev/null
+++ b/src/content/reference/en/p5.Image/numFrames.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: numFrames
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Returns the number of frames in an animated GIF.</p>
+line: 1413
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let gif;
+
+    function preload() {
+      gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+    }
+
+    function draw() {
+      image(gif, 0, 0);
+      let total = gif.numFrames();
+      let index = gif.getCurrentFrame();
+      text(`${index} / ${total}`, 30, 90);
+
+      describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
+    }
+    </code>
+    </div>
+return:
+  description: number of frames in the GIF.
+  type: Number
+chainable: false
+---
+
+
+# numFrames
diff --git a/src/content/reference/en/p5.Image/pause.mdx b/src/content/reference/en/p5.Image/pause.mdx
new file mode 100644
index 0000000000..760e832e28
--- /dev/null
+++ b/src/content/reference/en/p5.Image/pause.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pause
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Pauses an animated GIF. The GIF can be resumed by calling
+  <a href="#/p5.Image/play">img.play()</a>.</p>
+line: 1483
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let gif;
+
+    function preload() {
+      gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+    }
+
+    function draw() {
+      background(255);
+      image(gif, 0, 0);
+
+      describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+    }
+
+    function mousePressed() {
+      gif.pause();
+    }
+
+    function mouseReleased() {
+      gif.play();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pause
diff --git a/src/content/reference/en/p5.Image/pixelDensity.mdx b/src/content/reference/en/p5.Image/pixelDensity.mdx
new file mode 100644
index 0000000000..5decc3c4fe
--- /dev/null
+++ b/src/content/reference/en/p5.Image/pixelDensity.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pixelDensity
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Gets or sets the pixel density for high pixel density displays. By default,
+  the density will be set to 1.</p>
+  <p>Call this method with no arguments to get the default density, or pass
+  in a number to set the density. If a non-positive number is provided,
+  it defaults to 1.</p>
+line: 227
+params:
+  - name: density
+    description: |
+      <p>A scaling factor for the number of pixels per
+      side</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Image
+return:
+  description: >-
+    The current density if called without arguments, or the instance for
+    chaining if setting density.
+  type: Number
+chainable: false
+---
+
+
+# pixelDensity
diff --git a/src/content/reference/en/p5.Image/pixels.mdx b/src/content/reference/en/p5.Image/pixels.mdx
new file mode 100644
index 0000000000..3e9d630651
--- /dev/null
+++ b/src/content/reference/en/p5.Image/pixels.mdx
@@ -0,0 +1,101 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pixels
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>An array containing the color of each pixel in the
+
+  <a href="#/p5.Image">p5.Image</a> object. Colors are stored as numbers
+
+  representing red, green, blue, and alpha (RGBA) values.
+  <code>img.pixels</code> is a
+
+  one-dimensional array for performance reasons.</p>
+
+  <p>Each pixel occupies four elements in the pixels array, one for each
+
+  RGBA value. For example, the pixel at coordinates (0, 0) stores its
+
+  RGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>,
+  <code>img.pixels[2]</code>,
+
+  and <code>img.pixels[3]</code>, respectively. The next pixel at coordinates
+  (1, 0)
+
+  stores its RGBA values at <code>img.pixels[4]</code>,
+  <code>img.pixels[5]</code>,
+
+  <code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The
+  <code>img.pixels</code> array
+
+  for a 100×100 <a href="#/p5.Image">p5.Image</a> object has
+
+  100 × 100 × 4 = 40,000 elements.</p>
+
+  <p>Accessing the RGBA values for a pixel in the
+
+  <a href="#/p5.Image">p5.Image</a> object requires a little math as
+
+  shown below. The <a href="#/p5.Image/loadPixels">img.loadPixels()</a>
+
+  method must be called before accessing the <code>img.pixels</code> array. The
+
+  <a href="#/p5.Image/updatePixels">img.updatePixels()</a> method must be
+
+  called after any changes are made.</p>
+line: 155
+itemtype: property
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img = createImage(66, 66);
+    img.loadPixels();
+    let numPixels = 4 * img.width * img.height;
+    for (let i = 0; i < numPixels; i += 4) {
+      // Red.
+      img.pixels[i] = 0;
+      // Green.
+      img.pixels[i + 1] = 0;
+      // Blue.
+      img.pixels[i + 2] = 0;
+      // Alpha.
+      img.pixels[i + 3] = 255;
+    }
+    img.updatePixels();
+    image(img, 17, 17);
+
+    describe('A black square drawn in the middle of a gray square.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img = createImage(66, 66);
+    img.loadPixels();
+    let numPixels = 4 * img.width * img.height;
+    for (let i = 0; i < numPixels; i += 4) {
+      // Red.
+      img.pixels[i] = 255;
+      // Green.
+      img.pixels[i + 1] = 0;
+      // Blue.
+      img.pixels[i + 2] = 0;
+      // Alpha.
+      img.pixels[i + 3] = 255;
+    }
+    img.updatePixels();
+    image(img, 17, 17);
+
+    describe('A red square drawn in the middle of a gray square.');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pixels
diff --git a/src/content/reference/en/p5.Image/play.mdx b/src/content/reference/en/p5.Image/play.mdx
new file mode 100644
index 0000000000..ce4f11ba4d
--- /dev/null
+++ b/src/content/reference/en/p5.Image/play.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: play
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Plays an animated GIF that was paused with
+  <a href="#/p5.Image/pause">img.pause()</a>.</p>
+line: 1445
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let gif;
+
+    function preload() {
+      gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
+    }
+
+    function draw() {
+      background(255);
+      image(gif, 0, 0);
+
+      describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+    }
+
+    function mousePressed() {
+      gif.pause();
+    }
+
+    function mouseReleased() {
+      gif.play();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# play
diff --git a/src/content/reference/en/p5.Image/reset.mdx b/src/content/reference/en/p5.Image/reset.mdx
new file mode 100644
index 0000000000..07aacfebc9
--- /dev/null
+++ b/src/content/reference/en/p5.Image/reset.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: reset
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Restarts an animated GIF at its first frame.</p>
+line: 1295
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let gif;
+
+    function preload() {
+      gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
+    }
+
+    function draw() {
+      background(255);
+      image(gif, 0, 0);
+
+      describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
+    }
+
+    function mousePressed() {
+      gif.reset();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# reset
diff --git a/src/content/reference/en/p5.Image/resize.mdx b/src/content/reference/en/p5.Image/resize.mdx
new file mode 100644
index 0000000000..9ebababfc2
--- /dev/null
+++ b/src/content/reference/en/p5.Image/resize.mdx
@@ -0,0 +1,92 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: resize
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Resizes the <a href="#/p5.Image">p5.Image</a> object to a given
+  <code>width</code>
+
+  and <code>height</code>. The image's original aspect ratio can be kept by
+  passing 0
+
+  for either <code>width</code> or <code>height</code>. For example, calling
+  <code>img.resize(50, 0)</code>
+
+  on an image that was 500 × 300 pixels will resize it to
+
+  50 × 30 pixels.</p>
+line: 626
+params:
+  - name: width
+    description: |
+      <p>resized image width.</p>
+    type: Number
+  - name: height
+    description: |
+      <p>resized image height.</p>
+    type: Number
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      img.resize(50, 100);
+      image(img, 0, 0);
+
+      describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      img.resize(0, 30);
+      image(img, 0, 0);
+
+      describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      img.resize(60, 0);
+      image(img, 0, 0);
+
+      describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# resize
diff --git a/src/content/reference/en/p5.Image/save.mdx b/src/content/reference/en/p5.Image/save.mdx
new file mode 100644
index 0000000000..b1e2d54173
--- /dev/null
+++ b/src/content/reference/en/p5.Image/save.mdx
@@ -0,0 +1,80 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: save
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Saves the <a href="#/p5.Image">p5.Image</a> object to a file.
+
+  The browser will either save the file immediately or prompt the user
+
+  with a dialogue window.</p>
+
+  <p>By default, calling <code>img.save()</code> will save the image as
+  <code>untitled.png</code>.</p>
+
+  <p>Calling <code>img.save()</code> with one argument, as in
+  <code>img.save('photo.png')</code>,
+
+  will set the image's filename and type together.</p>
+
+  <p>Calling <code>img.save()</code> with two arguments, as in
+
+  <code>image.save('photo', 'png')</code>, will set the image's filename and
+  type
+
+  separately.</p>
+
+  <p>The image will only be downloaded as an animated GIF if the
+
+  <a href="#/p5.Image">p5.Image</a> object was loaded from a GIF file.
+
+  See <a href="#/p5/saveGif">saveGif()</a> to create new GIFs.</p>
+line: 1238
+params:
+  - name: filename
+    description: |
+      <p>filename. Defaults to 'untitled'.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>file extension, either 'png' or 'jpg'.
+                                 Defaults to 'png'.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function draw() {
+      image(img, 0, 0);
+
+      describe('An image of a mountain landscape.');
+    }
+
+    function keyPressed() {
+      if (key === 's') {
+        img.save();
+      } else if (key === 'j') {
+        img.save('rockies.jpg');
+      } else if (key === 'p') {
+        img.save('rockies', 'png');
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# save
diff --git a/src/content/reference/en/p5.Image/set.mdx b/src/content/reference/en/p5.Image/set.mdx
new file mode 100644
index 0000000000..9c2dc4842e
--- /dev/null
+++ b/src/content/reference/en/p5.Image/set.mdx
@@ -0,0 +1,161 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Sets the color of one or more pixels within a
+
+  <a href="#/p5.Image">p5.Image</a> object.</p>
+
+  <p><code>img.set()</code> is easy to use but it's not as fast as
+
+  <a href="#/p5.Image/pixels">img.pixels</a>. Use
+
+  <a href="#/p5.Image/pixels">img.pixels</a> to set many pixel values.</p>
+
+  <p><code>img.set()</code> interprets the first two parameters as x- and
+  y-coordinates. It
+
+  interprets the last parameter as a grayscale value, a <code>[R, G, B,
+  A]</code> pixel
+
+  array, a <a href="#/p5.Color">p5.Color</a> object, or another
+
+  <a href="#/p5.Image">p5.Image</a> object.</p>
+
+  <p><a href="#/p5.Image/updatePixels">img.updatePixels()</a> must be called
+
+  after using <code>img.set()</code> for changes to appear.</p>
+line: 535
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the pixel.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the pixel.</p>
+    type: Number
+  - name: a
+    description: |
+      <p>grayscale value | pixel array |
+                                        <a href="#/p5.Color">p5.Color</a> object |
+                                        <a href="#/p5.Image">p5.Image</a> to copy.</p>
+    type: 'Number|Number[]|Object'
+itemtype: method
+class: p5.Image
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let img = createImage(100, 100);
+
+    img.set(30, 20, 0);
+
+    img.set(85, 20, 0);
+
+    img.set(85, 75, 0);
+
+    img.set(30, 75, 0);
+
+    img.updatePixels();
+
+    image(img, 0, 0);
+
+
+    describe('Four black dots arranged in a square drawn on a gray
+    background.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let img = createImage(100, 100);
+
+    let black = color(0);
+
+    img.set(30, 20, black);
+
+    img.set(85, 20, black);
+
+    img.set(85, 75, black);
+
+    img.set(30, 75, black);
+
+    img.updatePixels();
+
+    image(img, 0, 0);
+
+
+    describe('Four black dots arranged in a square drawn on a gray
+    background.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let img = createImage(66, 66);
+
+    for (let x = 0; x < img.width; x += 1) {
+      for (let y = 0; y < img.height; y += 1) {
+        let c = map(x, 0, img.width, 0, 255);
+        img.set(x, y, c);
+      }
+    }
+
+    img.updatePixels();
+
+    image(img, 17, 17);
+
+
+    describe('A square with a horiztonal color gradient from black to white
+    drawn on a gray background.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let img;
+
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+
+    function setup() {
+      let img2 = createImage(100, 100);
+      img2.set(0, 0, img);
+      image(img2, 0, 0);
+
+      describe('An image of a mountain landscape.');
+    }
+
+    </code>
+
+    </div>
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Image/setFrame.mdx b/src/content/reference/en/p5.Image/setFrame.mdx
new file mode 100644
index 0000000000..b4e10951a3
--- /dev/null
+++ b/src/content/reference/en/p5.Image/setFrame.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setFrame
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Sets the current frame in an animated GIF.</p>
+line: 1365
+params:
+  - name: index
+    description: |
+      <p>index of the frame to display.</p>
+    type: Number
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let gif;
+    let frameSlider;
+
+    function preload() {
+      gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
+    }
+
+    function setup() {
+      let maxFrame = gif.numFrames() - 1;
+      frameSlider = createSlider(0, maxFrame);
+      frameSlider.position(10, 80);
+      frameSlider.size(80);
+    }
+
+    function draw() {
+      let index = frameSlider.value();
+      gif.setFrame(index);
+      image(gif, 0, 0);
+
+      describe('A cartoon eye looks around when a slider is moved.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setFrame
diff --git a/src/content/reference/en/p5.Image/updatePixels.mdx b/src/content/reference/en/p5.Image/updatePixels.mdx
new file mode 100644
index 0000000000..57f41c4628
--- /dev/null
+++ b/src/content/reference/en/p5.Image/updatePixels.mdx
@@ -0,0 +1,82 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: updatePixels
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>Updates the canvas with the RGBA values in the
+
+  <a href="#/p5.Image/pixels">img.pixels</a> array.</p>
+
+  <p><code>img.updatePixels()</code> only needs to be called after changing
+  values in
+
+  the <a href="#/p5.Image/pixels">img.pixels</a> array. Such changes can be
+
+  made directly after calling
+
+  <a href="#/p5.Image/loadPixels">img.loadPixels()</a> or by calling
+
+  <a href="#/p5.Image/set">img.set()</a>.</p>
+
+  <p>The optional parameters <code>x</code>, <code>y</code>, <code>width</code>,
+  and <code>height</code> define a
+
+  subsection of the <a href="#/p5.Image">p5.Image</a> object to update.
+
+  Doing so can improve performance in some cases.</p>
+
+  <p>If the <a href="#/p5.Image">p5.Image</a> object was loaded from a GIF,
+
+  then calling <code>img.updatePixels()</code> will update the pixels in current
+
+  frame.</p>
+line: 358
+itemtype: method
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img = createImage(66, 66);
+    img.loadPixels();
+    for (let x = 0; x < img.width; x += 1) {
+      for (let y = 0; y < img.height; y += 1) {
+        img.set(x, y, 0);
+      }
+    }
+    img.updatePixels();
+    image(img, 17, 17);
+
+    describe('A black square drawn in the middle of a gray square.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img = createImage(66, 66);
+    img.loadPixels();
+    let numPixels = 4 * img.width * img.height;
+    for (let i = 0; i < numPixels; i += 4) {
+      // Red.
+      img.pixels[i] = 0;
+      // Green.
+      img.pixels[i + 1] = 0;
+      // Blue.
+      img.pixels[i + 2] = 0;
+      // Alpha.
+      img.pixels[i + 3] = 255;
+    }
+    img.updatePixels();
+    image(img, 17, 17);
+
+    describe('A black square drawn in the middle of a gray square.');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# updatePixels
diff --git a/src/content/reference/en/p5.Image/width.mdx b/src/content/reference/en/p5.Image/width.mdx
new file mode 100644
index 0000000000..12dd7ffe5e
--- /dev/null
+++ b/src/content/reference/en/p5.Image/width.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: width
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: |
+  <p>Image width.</p>
+line: 89
+itemtype: property
+class: p5.Image
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let x = img.width / 2;
+      let y = img.height / 2;
+      let d = 20;
+      circle(x, y, d);
+
+      describe('An image of a mountain landscape with a white circle drawn in the middle.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# width
diff --git a/src/content/reference/en/p5.MediaElement/addCue.mdx b/src/content/reference/en/p5.MediaElement/addCue.mdx
new file mode 100644
index 0000000000..574572e28a
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/addCue.mdx
@@ -0,0 +1,84 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addCue
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Schedules a function to call when the audio/video reaches a specific time
+
+  during its playback.</p>
+
+  <p>The first parameter, <code>time</code>, is the time, in seconds, when the
+  function
+
+  should run. This value is passed to <code>callback</code> as its first
+  argument.</p>
+
+  <p>The second parameter, <code>callback</code>, is the function to call at the
+  specified
+
+  cue time.</p>
+
+  <p>The third parameter, <code>value</code>, is optional and can be any type of
+  value.
+
+  <code>value</code> is passed to <code>callback</code>.</p>
+
+  <p>Calling <code>media.addCue()</code> returns an ID as a string. This is
+  useful for
+
+  removing the cue later.</p>
+line: 4696
+params:
+  - name: time
+    description: |
+      <p>cue time to run the callback function.</p>
+    type: Number
+  - name: callback
+    description: |
+      <p>function to call at the cue time.</p>
+    type: Function
+  - name: value
+    description: |
+      <p>object to pass as the argument to
+                                 <code>callback</code>.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      let beat = createAudio('assets/beat.mp3');
+      // Play the beat in a loop.
+      beat.loop();
+
+      // Schedule a few events.
+      beat.addCue(0, changeBackground, 'red');
+      beat.addCue(2, changeBackground, 'deeppink');
+      beat.addCue(4, changeBackground, 'orchid');
+      beat.addCue(6, changeBackground, 'lavender');
+
+      describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');
+    }
+
+    function changeBackground(c) {
+      background(c);
+    }
+    </code>
+    </div>
+return:
+  description: |-
+    id ID of this cue,
+                        useful for `media.removeCue(id)`.
+  type: Number
+chainable: false
+---
+
+
+# addCue
diff --git a/src/content/reference/en/p5.MediaElement/autoplay.mdx b/src/content/reference/en/p5.MediaElement/autoplay.mdx
new file mode 100644
index 0000000000..6025923003
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/autoplay.mdx
@@ -0,0 +1,72 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: autoplay
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Sets the audio/video to play once it's loaded.</p>
+
+  <p>The parameter, <code>shouldAutoplay</code>, is optional. Calling
+
+  <code>media.autoplay()</code> without an argument causes the media to play
+
+  automatically. If <code>true</code> is passed, as in
+  <code>media.autoplay(true)</code>, the
+
+  media will automatically play. If <code>false</code> is passed, as in
+
+  <code>media.autoPlay(false)</code>, it won't play automatically.</p>
+line: 4055
+params:
+  - name: shouldAutoplay
+    description: |
+      <p>whether the element should autoplay.</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video and play it automatically.
+      let video = createVideo('assets/fingers.mov', () => {
+        video.autoplay();
+        video.size(100, 100);
+      });
+
+      describe('A video of fingers walking on a treadmill.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video, but don't play it automatically.
+      let video = createVideo('assets/fingers.mov', () => {
+        video.autoplay(false);
+        video.size(100, 100);
+      });
+
+      // Play the video when the user clicks on it.
+      video.mousePressed(() => {
+        video.play();
+      });
+
+      describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# autoplay
diff --git a/src/content/reference/en/p5.MediaElement/clearCues.mdx b/src/content/reference/en/p5.MediaElement/clearCues.mdx
new file mode 100644
index 0000000000..4c30f026b5
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/clearCues.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clearCues
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Removes all functions scheduled with <code>media.addCue()</code>.</p>
+line: 4820
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let isChanging = true;
+
+    function setup() {
+      background(200);
+
+      // Create a p5.MediaElement using createAudio().
+      let beat = createAudio('assets/beat.mp3');
+      // Play the beat in a loop.
+      beat.loop();
+
+      // Schedule a few events.
+      beat.addCue(0, changeBackground, 'red');
+      beat.addCue(2, changeBackground, 'deeppink');
+      beat.addCue(4, changeBackground, 'orchid');
+      beat.addCue(6, changeBackground, 'lavender');
+
+      describe('The text "Double-click to stop changing." written on a square. The color changes every 2 seconds while the audio plays. The color stops changing when the user double-clicks the square.');
+    }
+
+    function draw() {
+      if (isChanging === true) {
+        text('Double-click to stop changing.', 10, 10, 80, 80);
+      } else {
+        text('No more changes.', 10, 10, 80, 80);
+      }
+    }
+
+    function changeBackground(c) {
+      background(c);
+    }
+
+    // Remove cued functions and stop
+    // changing colors when the user
+    // double-clicks.
+    function doubleClicked() {
+      if (isChanging === true) {
+        beat.clearCues();
+        isChanging = false;
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# clearCues
diff --git a/src/content/reference/en/p5.MediaElement/connect.mdx b/src/content/reference/en/p5.MediaElement/connect.mdx
new file mode 100644
index 0000000000..225e798455
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/connect.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Send the audio output of this element to a specified audioNode or
+  p5.sound object. If no element is provided, connects to p5's main
+  output. That connection is established when this method is first called.
+  All connections are removed by the .disconnect() method.</p>
+  <p>This method is meant to be used with the p5.sound.js addon library.</p>
+line: 4547
+params:
+  - name: audioNode
+    description: |
+      <p>AudioNode from the Web Audio API,
+      or an object from the p5.sound library</p>
+    type: AudioNode|Object
+itemtype: method
+class: p5.MediaElement
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.MediaElement/disconnect.mdx b/src/content/reference/en/p5.MediaElement/disconnect.mdx
new file mode 100644
index 0000000000..a8ff8fa476
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/disconnect.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Disconnect all Web Audio routing, including to main output.
+  This is useful if you want to re-route the output through
+  audio effects, for example.</p>
+line: 4596
+itemtype: method
+class: p5.MediaElement
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.MediaElement/duration.mdx b/src/content/reference/en/p5.MediaElement/duration.mdx
new file mode 100644
index 0000000000..36971fb1ca
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/duration.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: duration
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Returns the audio/video's duration in seconds.</p>
+line: 4339
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let dragon;
+
+    function setup() {
+      background(200);
+
+      // Create a p5.MediaElement using createAudio().
+      dragon = createAudio('assets/lucky_dragons.mp3');
+      // Show the default media controls.
+      dragon.showControls();
+
+      describe('The text "S seconds left" on a gray square with media controls beneath it. The number "S" decreases as the song plays.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the time remaining.
+      let s = dragon.duration() - dragon.time();
+      // Round s to 1 decimal place
+      // for display.
+      s = round(s, 1);
+
+      // Display the time remaining.
+      textAlign(CENTER);
+      text(`${s} seconds left`, 50, 50);
+    }
+    </code>
+    </div>
+return:
+  description: duration (in seconds).
+  type: Number
+chainable: false
+---
+
+
+# duration
diff --git a/src/content/reference/en/p5.MediaElement/hideControls.mdx b/src/content/reference/en/p5.MediaElement/hideControls.mdx
new file mode 100644
index 0000000000..04e53e4690
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/hideControls.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hideControls
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Hide the default
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"
+  target="_blank">HTMLMediaElement</a>
+
+  controls.</p>
+line: 4645
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let dragon;
+    let isHidden = false;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      dragon = createAudio('assets/lucky_dragons.mp3');
+      // Show the default media controls.
+      dragon.showControls();
+
+      describe('The text "Double-click to hide controls" written in the middle of a gray square. A song plays in the background. Audio controls are displayed beneath the canvas. The controls appear/disappear when the user double-clicks the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display a different message when
+      // controls are hidden or shown.
+      textAlign(CENTER);
+      if (isHidden === true) {
+        text('Double-click to show controls', 10, 20, 80, 80);
+      } else {
+        text('Double-click to hide controls', 10, 20, 80, 80);
+      }
+    }
+
+    // Show/hide controls based on a double-click.
+    function doubleClicked() {
+      if (isHidden === true) {
+        dragon.showControls();
+        isHidden = false;
+      } else {
+        dragon.hideControls();
+        isHidden = true;
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# hideControls
diff --git a/src/content/reference/en/p5.MediaElement/loop.mdx b/src/content/reference/en/p5.MediaElement/loop.mdx
new file mode 100644
index 0000000000..d2e520c406
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/loop.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loop
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Play the audio/video repeatedly in a loop.</p>
+line: 3922
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let beat;
+    let isLooping = false;
+
+    function setup() {
+      background(200);
+
+      // Create a p5.MediaElement using createAudio().
+      beat = createAudio('assets/beat.mp3');
+
+      describe('The text "Click to loop" written in black on a gray background. A beat plays repeatedly in a loop when the user clicks. The beat stops when the user clicks again.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display different instructions
+      // based on playback.
+      textAlign(CENTER);
+      if (isLooping === true) {
+        text('Click to stop', 50, 50);
+      } else {
+        text('Click to loop', 50, 50);
+      }
+    }
+
+    // Adjust playback when the user
+    // presses the mouse.
+    function mousePressed() {
+      if (isLooping === true) {
+        // If the beat is looping,
+        // stop it.
+        beat.stop();
+        isLooping = false;
+      } else {
+        // If the beat is stopped,
+        // loop it.
+        beat.loop();
+        isLooping = true;
+      }
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# loop
diff --git a/src/content/reference/en/p5.MediaElement/noLoop.mdx b/src/content/reference/en/p5.MediaElement/noLoop.mdx
new file mode 100644
index 0000000000..5d062cff3a
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/noLoop.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noLoop
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Stops the audio/video from playing in a loop. It will stop when it
+  reaches the end.</p>
+line: 3978
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let beat;
+    let isPlaying = false;
+
+    function setup() {
+      background(200);
+
+      // Create a p5.MediaElement using createAudio().
+      beat = createAudio('assets/beat.mp3');
+
+      describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks. The beat stops when the user clicks again.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display different instructions
+      // based on playback.
+      textAlign(CENTER);
+      if (isPlaying === true) {
+        text('Click to stop', 50, 50);
+      } else {
+        text('Click to play', 50, 50);
+      }
+    }
+
+    // Adjust playback when the user
+    // presses the mouse.
+    function mousePressed() {
+      if (isPlaying === true) {
+        // If the beat is playing,
+        // stop it.
+        beat.stop();
+        isPlaying = false;
+      } else {
+        // If the beat is stopped,
+        // play it.
+        beat.play();
+        isPlaying = true;
+      }
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# noLoop
diff --git a/src/content/reference/en/p5.MediaElement/onended.mdx b/src/content/reference/en/p5.MediaElement/onended.mdx
new file mode 100644
index 0000000000..ff82b35ba7
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/onended.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: onended
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Calls a function when the audio/video reaches the end of its playback
+
+  The function won't be called if the media is looping.</p>
+
+  <p>The <code>p5.MediaElement</code> is passed as an argument to the callback
+  function.</p>
+line: 4482
+params:
+  - name: callback
+    description: |
+      <p>function to call when playback ends.
+                                  The <code>p5.MediaElement</code> is passed as
+                                  the argument.</p>
+    type: Function
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let beat;
+    let isPlaying = false;
+    let isDone = false;
+
+    function setup() {
+
+      // Create a p5.MediaElement using createAudio().
+      beat = createAudio('assets/beat.mp3');
+
+      // Set isDone to false when
+      // the beat finishes.
+      beat.onended(() => {
+        isDone = true;
+      });
+
+      describe('The text "Click to play" written in black on a gray square. A beat plays when the user clicks. The text "Done!" appears when the beat finishes playing.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display different messages
+      // based on playback.
+      textAlign(CENTER);
+      if (isDone === true) {
+        text('Done!', 50, 50);
+      } else if (isPlaying === false) {
+        text('Click to play', 50, 50);
+      } else {
+        text('Playing...', 50, 50);
+      }
+    }
+
+    // Play the beat when the
+    // user presses the mouse.
+    function mousePressed() {
+      if (isPlaying === false) {
+        isPlaying = true;
+        beat.play();
+      }
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# onended
diff --git a/src/content/reference/en/p5.MediaElement/pause.mdx b/src/content/reference/en/p5.MediaElement/pause.mdx
new file mode 100644
index 0000000000..8506ba1ea7
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/pause.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pause
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Pauses a media element. Calling <code>media.play()</code> will resume
+  playing
+
+  audio/video from the moment it paused.</p>
+line: 3867
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let beat;
+    let isPaused = true;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      beat = createAudio('assets/beat.mp3');
+
+      describe('The text "Click to play" written in black on a gray background. The beat plays or pauses when the user clicks the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display different instructions
+      // based on playback.
+      textAlign(CENTER);
+      if (isPaused === true) {
+        text('Click to play', 50, 50);
+      } else {
+        text('Click to pause', 50, 50);
+      }
+    }
+
+    // Adjust playback when the user
+    // presses the mouse.
+    function mousePressed() {
+      if (isPaused === true) {
+        // If the beat is paused,
+        // play it.
+        beat.play();
+        isPaused = false;
+      } else {
+        // If the beat is playing,
+        // pause it.
+        beat.pause();
+        isPaused = true;
+      }
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# pause
diff --git a/src/content/reference/en/p5.MediaElement/play.mdx b/src/content/reference/en/p5.MediaElement/play.mdx
new file mode 100644
index 0000000000..3afb01c615
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/play.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: play
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Play audio or video from a media element.</p>
+line: 3753
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let beat;
+
+    function setup() {
+      background(200);
+
+      textAlign(CENTER);
+      text('Click to play', 50, 50);
+
+      // Create a p5.MediaElement using createAudio().
+      beat = createAudio('assets/beat.mp3');
+
+      describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks the square.');
+    }
+
+    // Play the beat when the user
+    // presses the mouse.
+    function mousePressed() {
+      beat.play();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# play
diff --git a/src/content/reference/en/p5.MediaElement/removeCue.mdx b/src/content/reference/en/p5.MediaElement/removeCue.mdx
new file mode 100644
index 0000000000..3167b3732c
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/removeCue.mdx
@@ -0,0 +1,68 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeCue
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Remove a callback based on its ID.</p>
+line: 4756
+params:
+  - name: id
+    description: |
+      <p>ID of the cue, created by <code>media.addCue()</code>.</p>
+    type: Number
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let lavenderID;
+    let isRemoved = false;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      let beat = createAudio('assets/beat.mp3');
+      // Play the beat in a loop.
+      beat.loop();
+
+      // Schedule a few events.
+      beat.addCue(0, changeBackground, 'red');
+      beat.addCue(2, changeBackground, 'deeppink');
+      beat.addCue(4, changeBackground, 'orchid');
+
+      // Record the ID of the "lavender" callback.
+      lavenderID = beat.addCue(6, changeBackground, 'lavender');
+
+      describe('The text "Double-click to remove lavender." written on a red square. The color changes every 2 seconds while the audio plays. The lavender option is removed when the user double-clicks the square.');
+    }
+
+    function draw() {
+      if (isRemoved === false) {
+        text('Double-click to remove lavender.', 10, 10, 80, 80);
+      } else {
+        text('No more lavender.', 10, 10, 80, 80);
+      }
+    }
+
+    function changeBackground(c) {
+      background(c);
+    }
+
+    // Remove the lavender color-change cue
+    // when the user double-clicks.
+    function doubleClicked() {
+      if (isRemoved === false) {
+        beat.removeCue(lavenderID);
+        isRemoved = true;
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# removeCue
diff --git a/src/content/reference/en/p5.MediaElement/showControls.mdx b/src/content/reference/en/p5.MediaElement/showControls.mdx
new file mode 100644
index 0000000000..8ef1147694
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/showControls.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: showControls
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Show the default
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"
+  target="_blank">HTMLMediaElement</a>
+
+  controls. These vary between web browser.</p>
+line: 4613
+itemtype: method
+class: p5.MediaElement
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  background('cornflowerblue');\n\n  textAlign(CENTER);\n  textSize(50);\n  text('\U0001F409', 50, 50);\n\n  // Create a p5.MediaElement using createAudio().\n  let dragon = createAudio('assets/lucky_dragons.mp3');\n  // Show the default media controls.\n  dragon.showControls();\n\n  describe('A dragon emoji, \U0001F409, drawn in the center of a blue square. A song plays in the background. Audio controls are displayed beneath the canvas.');\n}\n</code>\n</div>"
+chainable: false
+---
+
+
+# showControls
diff --git a/src/content/reference/en/p5.MediaElement/speed.mdx b/src/content/reference/en/p5.MediaElement/speed.mdx
new file mode 100644
index 0000000000..b1ef348091
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/speed.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: speed
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Manages the audio/video playback speed. Calling <code>media.speed()</code>
+  returns
+
+  the current speed as a number.</p>
+
+  <p>The parameter, <code>val</code>, is optional. It's a number that sets the
+  playback
+
+  speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
+
+  plays it at double speed, and so on. -1 plays the media at normal speed
+
+  in reverse.</p>
+
+  <p>Note: Not all browsers support backward playback. Even if they do,
+
+  playback might not be smooth.</p>
+line: 4188
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let dragon;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      dragon = createAudio('assets/lucky_dragons.mp3');
+
+      // Show the default media controls.
+      dragon.showControls();
+
+      describe('The text "Speed: S" on a gray square with media controls beneath it. The number "S" oscillates between 0 and 1 as the music plays.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Produce a number between 0 and 2.
+      let n = sin(frameCount * 0.01) + 1;
+      // Use n to set the playback speed.
+      dragon.speed(n);
+
+      // Get the current speed
+      // and display it.
+      let s = dragon.speed();
+      // Round s to 1 decimal place
+      // for display.
+      s = round(s, 1);
+      textAlign(CENTER);
+      text(`Speed: ${s}`, 50, 50);
+    }
+    </code>
+return:
+  description: current playback speed.
+  type: Number
+chainable: false
+---
+
+
+# speed
diff --git a/src/content/reference/en/p5.MediaElement/src.mdx b/src/content/reference/en/p5.MediaElement/src.mdx
new file mode 100644
index 0000000000..5f6d20eff2
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/src.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: src
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Path to the media element's source as a string.</p>
+line: 3699
+itemtype: property
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let beat;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      beat = createAudio('assets/beat.mp3');
+
+      describe('The text "https://p5js.org/reference/assets/beat.mp3" written in black on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      textWrap(CHAR);
+      text(beat.src, 10, 10, 80, 80);
+    }
+    </code>
+    </div>
+return:
+  description: src
+  type: String
+chainable: false
+---
+
+
+# src
diff --git a/src/content/reference/en/p5.MediaElement/stop.mdx b/src/content/reference/en/p5.MediaElement/stop.mdx
new file mode 100644
index 0000000000..fbe62fc556
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/stop.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Stops a media element and sets its current time to zero. Calling
+
+  <code>media.play()</code> will restart playing audio/video from the
+  beginning.</p>
+line: 3813
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let beat;
+    let isStopped = true;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      beat = createAudio('assets/beat.mp3');
+
+      describe('The text "Click to start" written in black on a gray background. The beat starts or stops when the user presses the mouse.');
+    }
+
+    function draw() {
+      background(200);
+
+      textAlign(CENTER);
+      if (isStopped === true) {
+        text('Click to start', 50, 50);
+      } else {
+        text('Click to stop', 50, 50);
+      }
+    }
+
+    // Adjust playback when the user
+    // presses the mouse.
+    function mousePressed() {
+      if (isStopped === true) {
+        // If the beat is stopped,
+        // play it.
+        beat.play();
+        isStopped = false;
+      } else {
+        // If the beat is playing,
+        // stop it.
+        beat.stop();
+        isStopped = true;
+      }
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.MediaElement/time.mdx b/src/content/reference/en/p5.MediaElement/time.mdx
new file mode 100644
index 0000000000..3e6e71ebb9
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/time.mdx
@@ -0,0 +1,89 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: time
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Manages the media element's playback time. Calling
+  <code>media.time()</code>
+
+  returns the number of seconds the audio/video has played. Time resets to
+
+  0 when the looping media restarts.</p>
+
+  <p>The parameter, <code>time</code>, is optional. It's a number that specifies
+  the
+
+  time, in seconds, to jump to when playback begins.</p>
+line: 4255
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let dragon;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      dragon = createAudio('assets/lucky_dragons.mp3');
+      // Show the default media controls.
+      dragon.showControls();
+
+      describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display the current time.
+      let s = dragon.time();
+      // Round s to 1 decimal place
+      // for display.
+      s = round(s, 1);
+      textAlign(CENTER);
+      text(`${s} seconds`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let dragon;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      dragon = createAudio('assets/lucky_dragons.mp3');
+      // Show the default media controls.
+      dragon.showControls();
+
+      // Jump to 2 seconds
+      // to start.
+      dragon.time(2);
+
+      describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display the current time.
+      let s = dragon.time();
+      // Round s to 1 decimal place
+      // for display.
+      s = round(s, 1);
+      textAlign(CENTER);
+      text(`${s} seconds`, 50, 50);
+    }
+    </code>
+    </div>
+return:
+  description: current time (in seconds).
+  type: Number
+chainable: false
+---
+
+
+# time
diff --git a/src/content/reference/en/p5.MediaElement/volume.mdx b/src/content/reference/en/p5.MediaElement/volume.mdx
new file mode 100644
index 0000000000..ba00a016b6
--- /dev/null
+++ b/src/content/reference/en/p5.MediaElement/volume.mdx
@@ -0,0 +1,67 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: volume
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Manages the audio/video volume.</p>
+
+  <p>Calling <code>media.volume()</code> without an argument returns the current
+  volume
+
+  as a number in the range 0 (off) to 1 (maximum).</p>
+
+  <p>The parameter, <code>val</code>, is optional. It's a number that sets the
+  volume
+
+  from 0 (off) to 1 (maximum). For example, calling
+  <code>media.volume(0.5)</code>
+
+  sets the volume to half of its maximum.</p>
+line: 4128
+itemtype: method
+class: p5.MediaElement
+example:
+  - |-
+
+    <div>
+    <code>
+    let dragon;
+
+    function setup() {
+      // Create a p5.MediaElement using createAudio().
+      dragon = createAudio('assets/lucky_dragons.mp3');
+      // Show the default media controls.
+      dragon.showControls();
+
+      describe('The text "Volume: V" on a gray square with media controls beneath it. The number "V" oscillates between 0 and 1 as the music plays.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Produce a number between 0 and 1.
+      let n = 0.5 * sin(frameCount * 0.01) + 0.5;
+      // Use n to set the volume.
+      dragon.volume(n);
+
+      // Get the current volume
+      // and display it.
+      let v = dragon.volume();
+      // Round v to 1 decimal place
+      // for display.
+      v = round(v, 1);
+      textAlign(CENTER);
+      text(`Volume: ${v}`, 50, 50);
+    }
+    </code>
+    </div>
+return:
+  description: current volume.
+  type: Number
+chainable: false
+---
+
+
+# volume
diff --git a/src/content/reference/en/p5.MonoSynth/amp.mdx b/src/content/reference/en/p5.MonoSynth/amp.mdx
new file mode 100644
index 0000000000..200c4866f4
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/amp.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>MonoSynth amp</p>
+line: 11544
+params:
+  - name: vol
+    description: |
+      <p>desired volume</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>Time to reach new volume</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.MonoSynth
+return:
+  description: new volume value
+  type: Number
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.MonoSynth/attack.mdx b/src/content/reference/en/p5.MonoSynth/attack.mdx
new file mode 100644
index 0000000000..9b4a2b6709
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/attack.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: attack
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Getters and Setters</p>
+line: 11322
+itemtype: property
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# attack
diff --git a/src/content/reference/en/p5.MonoSynth/connect.mdx b/src/content/reference/en/p5.MonoSynth/connect.mdx
new file mode 100644
index 0000000000..a9da457f60
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/connect.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect to a p5.sound / Web Audio object.</p>
+line: 11564
+params:
+  - name: unit
+    description: |
+      <p>A p5.sound or Web Audio object</p>
+    type: Object
+itemtype: method
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.MonoSynth/decay.mdx b/src/content/reference/en/p5.MonoSynth/decay.mdx
new file mode 100644
index 0000000000..d11689a7aa
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/decay.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: decay
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 11328
+itemtype: property
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# decay
diff --git a/src/content/reference/en/p5.MonoSynth/disconnect.mdx b/src/content/reference/en/p5.MonoSynth/disconnect.mdx
new file mode 100644
index 0000000000..40d51e3d8f
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect all outputs</p>
+line: 11578
+itemtype: method
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.MonoSynth/dispose.mdx b/src/content/reference/en/p5.MonoSynth/dispose.mdx
new file mode 100644
index 0000000000..5d408b6216
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/dispose.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: dispose
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get rid of the MonoSynth and free up its resources / memory.</p>
+line: 11592
+itemtype: method
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# dispose
diff --git a/src/content/reference/en/p5.MonoSynth/play.mdx b/src/content/reference/en/p5.MonoSynth/play.mdx
new file mode 100644
index 0000000000..9101923c68
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/play.mdx
@@ -0,0 +1,72 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: play
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Play tells the MonoSynth to start playing a note. This method schedules
+  the calling of .triggerAttack and .triggerRelease.</p>
+line: 11379
+params:
+  - name: note
+    description: |
+      <p>the note you want to play, specified as a
+                                     frequency in Hertz (Number) or as a midi
+                                     value in Note/Octave format ("C4", "Eb3"...etc")
+                                     See <a href = "https://github.com/Tonejs/Tone.js/wiki/Instruments">
+                                     Tone</a>. Defaults to 440 hz.</p>
+    type: String | Number
+  - name: velocity
+    description: |
+      <p>velocity of the note to play (ranging from 0 to 1)</p>
+    type: Number
+    optional: true
+  - name: secondsFromNow
+    description: |
+      <p>time from now (in seconds) at which to play</p>
+    type: Number
+    optional: true
+  - name: sustainTime
+    description: >
+      <p>time to sustain before releasing the envelope. Defaults to 0.15
+      seconds.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.MonoSynth
+example:
+  - |
+
+    <div><code>
+    let monoSynth;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playSynth);
+      background(220);
+      textAlign(CENTER);
+      text('tap to play', width/2, height/2);
+
+      monoSynth = new p5.MonoSynth();
+    }
+
+    function playSynth() {
+      userStartAudio();
+
+      let note = random(['Fb4', 'G4']);
+      // note velocity (volume, from 0 to 1)
+      let velocity = random();
+      // time from now (in seconds)
+      let time = 0;
+      // note duration (in seconds)
+      let dur = 1/6;
+
+      monoSynth.play(note, velocity, time, dur);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# play
diff --git a/src/content/reference/en/p5.MonoSynth/release.mdx b/src/content/reference/en/p5.MonoSynth/release.mdx
new file mode 100644
index 0000000000..2da7f11aff
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/release.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: release
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 11338
+itemtype: property
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# release
diff --git a/src/content/reference/en/p5.MonoSynth/setADSR.mdx b/src/content/reference/en/p5.MonoSynth/setADSR.mdx
new file mode 100644
index 0000000000..0c3607641e
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/setADSR.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setADSR
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Set values like a traditional
+
+  <a
+  href="https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg">
+
+  ADSR envelope
+
+  </a>.</p>
+line: 11516
+params:
+  - name: attackTime
+    description: |
+      <p>Time (in seconds before envelope
+                                    reaches Attack Level</p>
+    type: Number
+  - name: decayTime
+    description: |
+      <p>Time (in seconds) before envelope
+                                    reaches Decay/Sustain Level</p>
+    type: Number
+    optional: true
+  - name: susRatio
+    description: |
+      <p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+                                    where 1.0 = attackLevel, 0.0 = releaseLevel.
+                                    The susRatio determines the decayLevel and the level at which the
+                                    sustain portion of the envelope will sustain.
+                                    For example, if attackLevel is 0.4, releaseLevel is 0,
+                                    and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+                                    increased to 1.0 (using <code>setRange</code>),
+                                    then decayLevel would increase proportionally, to become 0.5.</p>
+    type: Number
+    optional: true
+  - name: releaseTime
+    description: |
+      <p>Time in seconds from now (defaults to 0)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# setADSR
diff --git a/src/content/reference/en/p5.MonoSynth/sustain.mdx b/src/content/reference/en/p5.MonoSynth/sustain.mdx
new file mode 100644
index 0000000000..bd8dc0c609
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/sustain.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sustain
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: ''
+line: 11333
+itemtype: property
+class: p5.MonoSynth
+chainable: false
+---
+
+
+# sustain
diff --git a/src/content/reference/en/p5.MonoSynth/triggerAttack.mdx b/src/content/reference/en/p5.MonoSynth/triggerAttack.mdx
new file mode 100644
index 0000000000..f29e9c6f58
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/triggerAttack.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: triggerAttack
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Trigger the Attack, and Decay portion of the Envelope.
+  Similar to holding down a key on a piano, but it will
+  hold the sustain level until you let go.</p>
+line: 11431
+params:
+  - name: note
+    description: |
+      <p>the note you want to play, specified as a
+                                     frequency in Hertz (Number) or as a midi
+                                     value in Note/Octave format ("C4", "Eb3"...etc")
+                                     See <a href = "https://github.com/Tonejs/Tone.js/wiki/Instruments">
+                                     Tone</a>. Defaults to 440 hz</p>
+    type: String | Number
+  - name: velocity
+    description: |
+      <p>velocity of the note to play (ranging from 0 to 1)</p>
+    type: Number
+    optional: true
+  - name: secondsFromNow
+    description: |
+      <p>time from now (in seconds) at which to play</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.MonoSynth
+example:
+  - |-
+
+    <div><code>
+    let monoSynth;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(triggerAttack);
+      background(220);
+      text('tap here for attack, let go to release', 5, 20, width - 20);
+      monoSynth = new p5.MonoSynth();
+    }
+
+    function triggerAttack() {
+      userStartAudio();
+
+      monoSynth.triggerAttack("E3");
+    }
+
+    function mouseReleased() {
+      monoSynth.triggerRelease();
+    }
+    </code></div>
+chainable: false
+---
+
+
+# triggerAttack
diff --git a/src/content/reference/en/p5.MonoSynth/triggerRelease.mdx b/src/content/reference/en/p5.MonoSynth/triggerRelease.mdx
new file mode 100644
index 0000000000..b9079a0f88
--- /dev/null
+++ b/src/content/reference/en/p5.MonoSynth/triggerRelease.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: triggerRelease
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Trigger the release of the Envelope. This is similar to releasing
+  the key on a piano and letting the sound fade according to the
+  release level and release time.</p>
+line: 11478
+params:
+  - name: secondsFromNow
+    description: |
+      <p>time to trigger the release</p>
+    type: Number
+itemtype: method
+class: p5.MonoSynth
+example:
+  - |-
+
+    <div><code>
+    let monoSynth;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(triggerAttack);
+      background(220);
+      text('tap here for attack, let go to release', 5, 20, width - 20);
+      monoSynth = new p5.MonoSynth();
+    }
+
+    function triggerAttack() {
+      userStartAudio();
+
+      monoSynth.triggerAttack("E3");
+    }
+
+    function mouseReleased() {
+      monoSynth.triggerRelease();
+    }
+    </code></div>
+chainable: false
+---
+
+
+# triggerRelease
diff --git a/src/content/reference/en/p5.Noise/setType.mdx b/src/content/reference/en/p5.Noise/setType.mdx
new file mode 100644
index 0000000000..efeaafb858
--- /dev/null
+++ b/src/content/reference/en/p5.Noise/setType.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setType
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set type of noise to 'white', 'pink' or 'brown'.
+  White is the default.</p>
+line: 5657
+params:
+  - name: type
+    description: |
+      <p>'white', 'pink' or 'brown'</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.Noise
+chainable: false
+---
+
+
+# setType
diff --git a/src/content/reference/en/p5.NumberDict/add.mdx b/src/content/reference/en/p5.NumberDict/add.mdx
new file mode 100644
index 0000000000..cb98eb6a71
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/add.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: add
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Add the given number to the value currently stored at the given key.
+  The sum then replaces the value previously stored in the Dictionary.</p>
+line: 439
+params:
+  - name: Key
+    description: |
+      <p>for the value you wish to add to</p>
+    type: Number
+  - name: Number
+    description: |
+      <p>to add to the value</p>
+    type: Number
+itemtype: method
+class: p5.NumberDict
+example:
+  - |
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict(2, 5);
+      myDictionary.add(2, 2);
+      print(myDictionary.get(2)); // logs 7 to console.
+    }
+    </code></div>
+chainable: false
+---
+
+
+# add
diff --git a/src/content/reference/en/p5.NumberDict/div.mdx b/src/content/reference/en/p5.NumberDict/div.mdx
new file mode 100644
index 0000000000..8c7034bb7e
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/div.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: div
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Divide the given number with the value currently stored at the given key.
+  The quotient then replaces the value previously stored in the Dictionary.</p>
+line: 516
+params:
+  - name: Key
+    description: |
+      <p>for value you wish to divide</p>
+    type: Number
+  - name: Amount
+    description: |
+      <p>to divide the value by</p>
+    type: Number
+itemtype: method
+class: p5.NumberDict
+example:
+  - |
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict(2, 8);
+      myDictionary.div(2, 2);
+      print(myDictionary.get(2)); // logs 4 to console.
+    }
+    </code></div>
+chainable: false
+---
+
+
+# div
diff --git a/src/content/reference/en/p5.NumberDict/maxKey.mdx b/src/content/reference/en/p5.NumberDict/maxKey.mdx
new file mode 100644
index 0000000000..bea693630b
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/maxKey.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: maxKey
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Return the highest key currently used in the Dictionary.</p>
+line: 649
+itemtype: method
+class: p5.NumberDict
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+      let highestKey = myDictionary.maxKey(); // value is 4
+      print(highestKey);
+    }
+    </code></div>
+return:
+  description: ''
+  type: Number
+chainable: false
+---
+
+
+# maxKey
diff --git a/src/content/reference/en/p5.NumberDict/maxValue.mdx b/src/content/reference/en/p5.NumberDict/maxValue.mdx
new file mode 100644
index 0000000000..baf058d414
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/maxValue.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: maxValue
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Return the highest number currently stored in the Dictionary.</p>
+line: 587
+itemtype: method
+class: p5.NumberDict
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+      let highestValue = myDictionary.maxValue(); // value is 3
+      print(highestValue);
+    }
+    </code></div>
+return:
+  description: ''
+  type: Number
+chainable: false
+---
+
+
+# maxValue
diff --git a/src/content/reference/en/p5.NumberDict/minKey.mdx b/src/content/reference/en/p5.NumberDict/minKey.mdx
new file mode 100644
index 0000000000..3f1af56337
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/minKey.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: minKey
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Return the lowest key currently used in the Dictionary.</p>
+line: 629
+itemtype: method
+class: p5.NumberDict
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
+      let lowestKey = myDictionary.minKey(); // value is 1.2
+      print(lowestKey);
+    }
+    </code></div>
+return:
+  description: ''
+  type: Number
+chainable: false
+---
+
+
+# minKey
diff --git a/src/content/reference/en/p5.NumberDict/minValue.mdx b/src/content/reference/en/p5.NumberDict/minValue.mdx
new file mode 100644
index 0000000000..1a58c28c1d
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/minValue.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: minValue
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Return the lowest number currently stored in the Dictionary.</p>
+line: 567
+itemtype: method
+class: p5.NumberDict
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
+      let lowestValue = myDictionary.minValue(); // value is -10
+      print(lowestValue);
+    }
+    </code></div>
+return:
+  description: ''
+  type: Number
+chainable: false
+---
+
+
+# minValue
diff --git a/src/content/reference/en/p5.NumberDict/mult.mdx b/src/content/reference/en/p5.NumberDict/mult.mdx
new file mode 100644
index 0000000000..4e9809b8c5
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/mult.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mult
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Multiply the given number with the value currently stored at the given key.
+  The product then replaces the value previously stored in the Dictionary.</p>
+line: 489
+params:
+  - name: Key
+    description: |
+      <p>for value you wish to multiply</p>
+    type: Number
+  - name: Amount
+    description: |
+      <p>to multiply the value by</p>
+    type: Number
+itemtype: method
+class: p5.NumberDict
+example:
+  - |
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict(2, 4);
+      myDictionary.mult(2, 2);
+      print(myDictionary.get(2)); // logs 8 to console.
+    }
+    </code></div>
+chainable: false
+---
+
+
+# mult
diff --git a/src/content/reference/en/p5.NumberDict/sub.mdx b/src/content/reference/en/p5.NumberDict/sub.mdx
new file mode 100644
index 0000000000..1704eee1e9
--- /dev/null
+++ b/src/content/reference/en/p5.NumberDict/sub.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sub
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: >
+  <p>Subtract the given number from the value currently stored at the given key.
+
+  The difference then replaces the value previously stored in the
+  Dictionary.</p>
+line: 466
+params:
+  - name: Key
+    description: |
+      <p>for the value you wish to subtract from</p>
+    type: Number
+  - name: Number
+    description: |
+      <p>to subtract from the value</p>
+    type: Number
+itemtype: method
+class: p5.NumberDict
+example:
+  - |
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict(2, 5);
+      myDictionary.sub(2, 2);
+      print(myDictionary.get(2)); // logs 3 to console.
+    }
+    </code></div>
+chainable: false
+---
+
+
+# sub
diff --git a/src/content/reference/en/p5.Oscillator/add.mdx b/src/content/reference/en/p5.Oscillator/add.mdx
new file mode 100644
index 0000000000..f4ed12bc9f
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/add.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: add
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Add a value to the p5.Oscillator's output amplitude,
+  and return the oscillator. Calling this method again
+  will override the initial add() with a new value.</p>
+line: 4522
+params:
+  - name: number
+    description: |
+      <p>Constant number to add</p>
+    type: Number
+itemtype: method
+class: p5.Oscillator
+return:
+  description: |-
+    Oscillator Returns this oscillator
+                                       with scaled output
+  type: p5.Oscillator
+chainable: false
+---
+
+
+# add
diff --git a/src/content/reference/en/p5.Oscillator/amp.mdx b/src/content/reference/en/p5.Oscillator/amp.mdx
new file mode 100644
index 0000000000..e5558eeb50
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/amp.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the amplitude between 0 and 1.0. Or, pass in an object
+  such as an oscillator to modulate amplitude with an audio signal.</p>
+line: 4238
+params:
+  - name: vol
+    description: |
+      <p>between 0 and 1.0
+                                  or a modulating signal/oscillator</p>
+    type: Number|Object
+  - name: rampTime
+    description: |
+      <p>create a fade that lasts rampTime</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Oscillator
+return:
+  description: |-
+    gain  If no value is provided,
+                                returns the Web Audio API
+                                AudioParam that controls
+                                this oscillator's
+                                gain/amplitude/volume)
+  type: AudioParam
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.Oscillator/connect.mdx b/src/content/reference/en/p5.Oscillator/connect.mdx
new file mode 100644
index 0000000000..e2901b4941
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/connect.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect to a p5.sound / Web Audio object.</p>
+line: 4399
+params:
+  - name: unit
+    description: |
+      <p>A p5.sound or Web Audio object</p>
+    type: Object
+itemtype: method
+class: p5.Oscillator
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.Oscillator/disconnect.mdx b/src/content/reference/en/p5.Oscillator/disconnect.mdx
new file mode 100644
index 0000000000..d2f7402ad4
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect all outputs</p>
+line: 4420
+itemtype: method
+class: p5.Oscillator
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.Oscillator/freq.mdx b/src/content/reference/en/p5.Oscillator/freq.mdx
new file mode 100644
index 0000000000..2774b66500
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/freq.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: freq
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set frequency of an oscillator to a value. Or, pass in an object
+  such as an oscillator to modulate the frequency with an audio signal.</p>
+line: 4285
+params:
+  - name: Frequency
+    description: |
+      <p>Frequency in Hz
+                                            or modulating signal/oscillator</p>
+    type: Number|Object
+  - name: rampTime
+    description: |
+      <p>Ramp time (in seconds)</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>Schedule this event to happen
+                                       at x seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Oscillator
+example:
+  - |-
+
+    <div><code>
+    let osc;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playOscillator);
+      osc = new p5.Oscillator(300);
+      background(220);
+      text('tap to play', 20, 20);
+    }
+
+    function playOscillator() {
+      osc.start();
+      osc.amp(0.5);
+      // start at 700Hz
+      osc.freq(700);
+      // ramp to 60Hz over 0.7 seconds
+      osc.freq(60, 0.7);
+      osc.amp(0, 0.1, 0.7);
+    }
+    </code></div>
+return:
+  description: |-
+    Frequency If no value is provided,
+                                    returns the Web Audio API
+                                    AudioParam that controls
+                                    this oscillator's frequency
+  type: AudioParam
+chainable: false
+---
+
+
+# freq
diff --git a/src/content/reference/en/p5.Oscillator/getAmp.mdx b/src/content/reference/en/p5.Oscillator/getAmp.mdx
new file mode 100644
index 0000000000..f8a0a3bac0
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/getAmp.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getAmp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the value of output gain</p>
+line: 4271
+itemtype: method
+class: p5.Oscillator
+return:
+  description: Amplitude value between 0.0 and 1.0
+  type: Number
+chainable: false
+---
+
+
+# getAmp
diff --git a/src/content/reference/en/p5.Oscillator/getFreq.mdx b/src/content/reference/en/p5.Oscillator/getFreq.mdx
new file mode 100644
index 0000000000..cf60ee4f6e
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/getFreq.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getFreq
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the value of frequency of oscillator</p>
+line: 4360
+itemtype: method
+class: p5.Oscillator
+return:
+  description: Frequency of oscillator in Hertz
+  type: Number
+chainable: false
+---
+
+
+# getFreq
diff --git a/src/content/reference/en/p5.Oscillator/getPan.mdx b/src/content/reference/en/p5.Oscillator/getPan.mdx
new file mode 100644
index 0000000000..98ff9cf976
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/getPan.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getPan
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Returns the current value of panPosition , between Left (-1) and Right
+  (1)</p>
+line: 4460
+itemtype: method
+class: p5.Oscillator
+return:
+  description: 'panPosition of oscillator , between Left (-1) and Right (1)'
+  type: Number
+chainable: false
+---
+
+
+# getPan
diff --git a/src/content/reference/en/p5.Oscillator/getType.mdx b/src/content/reference/en/p5.Oscillator/getType.mdx
new file mode 100644
index 0000000000..7b88a7cd54
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/getType.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getType
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Returns  current type of oscillator eg. 'sine', 'triangle', 'sawtooth' or
+  'square'.</p>
+line: 4386
+itemtype: method
+class: p5.Oscillator
+return:
+  description: 'type of oscillator  eg . ''sine'', ''triangle'', ''sawtooth'' or ''square''.'
+  type: String
+chainable: false
+---
+
+
+# getType
diff --git a/src/content/reference/en/p5.Oscillator/mult.mdx b/src/content/reference/en/p5.Oscillator/mult.mdx
new file mode 100644
index 0000000000..6f6b5ad28d
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/mult.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mult
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Multiply the p5.Oscillator's output amplitude
+  by a fixed value (i.e. turn it up!). Calling this method
+  again will override the initial mult() with a new value.</p>
+line: 4543
+params:
+  - name: number
+    description: |
+      <p>Constant number to multiply</p>
+    type: Number
+itemtype: method
+class: p5.Oscillator
+return:
+  description: |-
+    Oscillator Returns this oscillator
+                                       with multiplied output
+  type: p5.Oscillator
+chainable: false
+---
+
+
+# mult
diff --git a/src/content/reference/en/p5.Oscillator/pan.mdx b/src/content/reference/en/p5.Oscillator/pan.mdx
new file mode 100644
index 0000000000..60d86f61f3
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/pan.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pan
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Pan between Left (-1) and Right (1)</p>
+line: 4444
+params:
+  - name: panning
+    description: |
+      <p>Number between -1 and 1</p>
+    type: Number
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+itemtype: method
+class: p5.Oscillator
+chainable: false
+---
+
+
+# pan
diff --git a/src/content/reference/en/p5.Oscillator/phase.mdx b/src/content/reference/en/p5.Oscillator/phase.mdx
new file mode 100644
index 0000000000..eaa589eb53
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/phase.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: phase
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the phase of an oscillator between 0.0 and 1.0.
+  In this implementation, phase is a delay time
+  based on the oscillator's current frequency.</p>
+line: 4494
+params:
+  - name: phase
+    description: |
+      <p>float between 0.0 and 1.0</p>
+    type: Number
+itemtype: method
+class: p5.Oscillator
+chainable: false
+---
+
+
+# phase
diff --git a/src/content/reference/en/p5.Oscillator/scale.mdx b/src/content/reference/en/p5.Oscillator/scale.mdx
new file mode 100644
index 0000000000..91f846d18a
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/scale.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: scale
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Scale this oscillator's amplitude values to a given
+  range, and return the oscillator. Calling this method
+  again will override the initial scale() with new values.</p>
+line: 4563
+params:
+  - name: inMin
+    description: |
+      <p>input range minumum</p>
+    type: Number
+  - name: inMax
+    description: |
+      <p>input range maximum</p>
+    type: Number
+  - name: outMin
+    description: |
+      <p>input range minumum</p>
+    type: Number
+  - name: outMax
+    description: |
+      <p>input range maximum</p>
+    type: Number
+itemtype: method
+class: p5.Oscillator
+return:
+  description: |-
+    Oscillator Returns this oscillator
+                                       with scaled output
+  type: p5.Oscillator
+chainable: false
+---
+
+
+# scale
diff --git a/src/content/reference/en/p5.Oscillator/setType.mdx b/src/content/reference/en/p5.Oscillator/setType.mdx
new file mode 100644
index 0000000000..f0044bef79
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/setType.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setType
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>
+line: 4373
+params:
+  - name: type
+    description: |
+      <p>'sine', 'triangle', 'sawtooth' or 'square'.</p>
+    type: String
+itemtype: method
+class: p5.Oscillator
+chainable: false
+---
+
+
+# setType
diff --git a/src/content/reference/en/p5.Oscillator/start.mdx b/src/content/reference/en/p5.Oscillator/start.mdx
new file mode 100644
index 0000000000..d4bdb6238e
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/start.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: start
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Start an oscillator.</p>
+  <p>Starting an oscillator on a user gesture will enable audio in browsers
+  that have a strict autoplay policy, including Chrome and most mobile
+  devices. See also: <code>userStartAudio()</code>.</p>
+line: 4168
+params:
+  - name: time
+    description: |
+      <p>startTime in seconds from now.</p>
+    type: Number
+    optional: true
+  - name: frequency
+    description: |
+      <p>frequency in Hz.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Oscillator
+chainable: false
+---
+
+
+# start
diff --git a/src/content/reference/en/p5.Oscillator/stop.mdx b/src/content/reference/en/p5.Oscillator/stop.mdx
new file mode 100644
index 0000000000..2858217111
--- /dev/null
+++ b/src/content/reference/en/p5.Oscillator/stop.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Stop an oscillator. Accepts an optional parameter
+  to determine how long (in seconds from now) until the
+  oscillator stops.</p>
+line: 4218
+params:
+  - name: secondsFromNow
+    description: |
+      <p>Time, in seconds from now.</p>
+    type: Number
+itemtype: method
+class: p5.Oscillator
+chainable: false
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.Panner3D/maxDist.mdx b/src/content/reference/en/p5.Panner3D/maxDist.mdx
new file mode 100644
index 0000000000..193593360f
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/maxDist.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: maxDist
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Maxium distance between the source and the listener</p>
+line: 7852
+params:
+  - name: maxDistance
+    description: ''
+    type: Number
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated value
+  type: Number
+chainable: false
+---
+
+
+# maxDist
diff --git a/src/content/reference/en/p5.Panner3D/orient.mdx b/src/content/reference/en/p5.Panner3D/orient.mdx
new file mode 100644
index 0000000000..37846ac0cd
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/orient.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: orient
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the X,Y,Z position of the Panner</p>
+line: 7753
+params:
+  - name: xVal
+    description: ''
+    type: Number
+  - name: yVal
+    description: ''
+    type: Number
+  - name: zVal
+    description: ''
+    type: Number
+  - name: time
+    description: ''
+    type: Number
+itemtype: method
+class: p5.Panner3D
+return:
+  description: 'Updated x, y, z values as an array'
+  type: Array
+chainable: false
+---
+
+
+# orient
diff --git a/src/content/reference/en/p5.Panner3D/orientX.mdx b/src/content/reference/en/p5.Panner3D/orientX.mdx
new file mode 100644
index 0000000000..70ef06cdcf
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/orientX.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: orientX
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Getter and setter methods for orient coordinates</p>
+line: 7772
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated coordinate value
+  type: Number
+chainable: false
+---
+
+
+# orientX
diff --git a/src/content/reference/en/p5.Panner3D/orientY.mdx b/src/content/reference/en/p5.Panner3D/orientY.mdx
new file mode 100644
index 0000000000..9796f574d7
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/orientY.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: orientY
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Getter and setter methods for orient coordinates</p>
+line: 7779
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated coordinate value
+  type: Number
+chainable: false
+---
+
+
+# orientY
diff --git a/src/content/reference/en/p5.Panner3D/orientZ.mdx b/src/content/reference/en/p5.Panner3D/orientZ.mdx
new file mode 100644
index 0000000000..0771949203
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/orientZ.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: orientZ
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Getter and setter methods for orient coordinates</p>
+line: 7786
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated coordinate value
+  type: Number
+chainable: false
+---
+
+
+# orientZ
diff --git a/src/content/reference/en/p5.Panner3D/panner.mdx b/src/content/reference/en/p5.Panner3D/panner.mdx
new file mode 100644
index 0000000000..d3754886a7
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/panner.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: panner
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p><a title="Web Audio Panner docs"  href=
+  "https://developer.mozilla.org/en-US/docs/Web/API/PannerNode">
+  Web Audio Spatial Panner Node</a></p>
+  <p>Properties include<br>
+   <a href="https://www.w3.org/TR/webaudio/#idl-def-PanningModelType">Panning Model</a>
+   : "equal power" or "HRTF"<br>
+   <a href="https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType">DistanceModel</a>
+  : "linear", "inverse", or "exponential"</p>
+line: 7629
+itemtype: property
+class: p5.Panner3D
+chainable: false
+---
+
+
+# panner
diff --git a/src/content/reference/en/p5.Panner3D/positionX.mdx b/src/content/reference/en/p5.Panner3D/positionX.mdx
new file mode 100644
index 0000000000..b7bd91ed43
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/positionX.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: positionX
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Getter and setter methods for position coordinates</p>
+line: 7687
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated coordinate value
+  type: Number
+chainable: false
+---
+
+
+# positionX
diff --git a/src/content/reference/en/p5.Panner3D/positionY.mdx b/src/content/reference/en/p5.Panner3D/positionY.mdx
new file mode 100644
index 0000000000..f9b18bee58
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/positionY.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: positionY
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Getter and setter methods for position coordinates</p>
+line: 7694
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated coordinate value
+  type: Number
+chainable: false
+---
+
+
+# positionY
diff --git a/src/content/reference/en/p5.Panner3D/positionZ.mdx b/src/content/reference/en/p5.Panner3D/positionZ.mdx
new file mode 100644
index 0000000000..4b63c07570
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/positionZ.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: positionZ
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Getter and setter methods for position coordinates</p>
+line: 7701
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated coordinate value
+  type: Number
+chainable: false
+---
+
+
+# positionZ
diff --git a/src/content/reference/en/p5.Panner3D/process.mdx b/src/content/reference/en/p5.Panner3D/process.mdx
new file mode 100644
index 0000000000..6ab9dee282
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/process.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect an audio sorce</p>
+line: 7654
+params:
+  - name: src
+    description: |
+      <p>Input source</p>
+    type: Object
+itemtype: method
+class: p5.Panner3D
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Panner3D/rollof.mdx b/src/content/reference/en/p5.Panner3D/rollof.mdx
new file mode 100644
index 0000000000..eb421e8b38
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/rollof.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rollof
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>How quickly the volume is reduced as the source moves away from the
+  listener</p>
+line: 7869
+params:
+  - name: rolloffFactor
+    description: ''
+    type: Number
+itemtype: method
+class: p5.Panner3D
+return:
+  description: updated value
+  type: Number
+chainable: false
+---
+
+
+# rollof
diff --git a/src/content/reference/en/p5.Panner3D/set.mdx b/src/content/reference/en/p5.Panner3D/set.mdx
new file mode 100644
index 0000000000..fc6c9df604
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/set.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the X,Y,Z position of the Panner</p>
+line: 7668
+params:
+  - name: xVal
+    description: ''
+    type: Number
+  - name: yVal
+    description: ''
+    type: Number
+  - name: zVal
+    description: ''
+    type: Number
+  - name: time
+    description: ''
+    type: Number
+itemtype: method
+class: p5.Panner3D
+return:
+  description: 'Updated x, y, z values as an array'
+  type: Array
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Panner3D/setFalloff.mdx b/src/content/reference/en/p5.Panner3D/setFalloff.mdx
new file mode 100644
index 0000000000..c76642cfe8
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/setFalloff.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setFalloff
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the rolloff factor and max distance</p>
+line: 7838
+params:
+  - name: maxDistance
+    description: ''
+    type: Number
+    optional: true
+  - name: rolloffFactor
+    description: ''
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Panner3D
+chainable: false
+---
+
+
+# setFalloff
diff --git a/src/content/reference/en/p5.Part/addPhrase.mdx b/src/content/reference/en/p5.Part/addPhrase.mdx
new file mode 100644
index 0000000000..c16f5c05f7
--- /dev/null
+++ b/src/content/reference/en/p5.Part/addPhrase.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addPhrase
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Add a p5.Phrase to this Part.</p>
+line: 9379
+params:
+  - name: phrase
+    description: |
+      <p>reference to a p5.Phrase</p>
+    type: p5.Phrase
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# addPhrase
diff --git a/src/content/reference/en/p5.Part/getBPM.mdx b/src/content/reference/en/p5.Part/getBPM.mdx
new file mode 100644
index 0000000000..1db25025e4
--- /dev/null
+++ b/src/content/reference/en/p5.Part/getBPM.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getBPM
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the tempo, in Beats Per Minute, of this part.</p>
+line: 9278
+itemtype: method
+class: p5.Part
+return:
+  description: ''
+  type: Number
+chainable: false
+---
+
+
+# getBPM
diff --git a/src/content/reference/en/p5.Part/getPhrase.mdx b/src/content/reference/en/p5.Part/getPhrase.mdx
new file mode 100644
index 0000000000..1fd8f2c3c9
--- /dev/null
+++ b/src/content/reference/en/p5.Part/getPhrase.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getPhrase
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get a phrase from this part, based on the name it was
+  given when it was created. Now you can modify its array.</p>
+line: 9424
+params:
+  - name: phraseName
+    description: ''
+    type: String
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# getPhrase
diff --git a/src/content/reference/en/p5.Part/loop.mdx b/src/content/reference/en/p5.Part/loop.mdx
new file mode 100644
index 0000000000..08abd42cd7
--- /dev/null
+++ b/src/content/reference/en/p5.Part/loop.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Loop playback of this part. It will begin
+  looping through all of its phrases at a speed
+  determined by setBPM.</p>
+line: 9311
+params:
+  - name: time
+    description: |
+      <p>seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# loop
diff --git a/src/content/reference/en/p5.Part/noLoop.mdx b/src/content/reference/en/p5.Part/noLoop.mdx
new file mode 100644
index 0000000000..58cb22cea1
--- /dev/null
+++ b/src/content/reference/en/p5.Part/noLoop.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noLoop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Tell the part to stop looping.</p>
+line: 9333
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# noLoop
diff --git a/src/content/reference/en/p5.Part/onStep.mdx b/src/content/reference/en/p5.Part/onStep.mdx
new file mode 100644
index 0000000000..ce7472638b
--- /dev/null
+++ b/src/content/reference/en/p5.Part/onStep.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: onStep
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Set the function that will be called at every step. This will clear the
+  previous function.</p>
+line: 9473
+params:
+  - name: callback
+    description: |
+      <p>The name of the callback
+                                  you want to fire
+                                  on every beat/tatum.</p>
+    type: Function
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# onStep
diff --git a/src/content/reference/en/p5.Part/pause.mdx b/src/content/reference/en/p5.Part/pause.mdx
new file mode 100644
index 0000000000..802f0755f8
--- /dev/null
+++ b/src/content/reference/en/p5.Part/pause.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pause
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Pause the part. Playback will resume
+  from the current step.</p>
+line: 9363
+params:
+  - name: time
+    description: |
+      <p>seconds from now</p>
+    type: Number
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# pause
diff --git a/src/content/reference/en/p5.Part/removePhrase.mdx b/src/content/reference/en/p5.Part/removePhrase.mdx
new file mode 100644
index 0000000000..905fb1eaf2
--- /dev/null
+++ b/src/content/reference/en/p5.Part/removePhrase.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removePhrase
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Remove a phrase from this part, based on the name it was
+  given when it was created.</p>
+line: 9406
+params:
+  - name: phraseName
+    description: ''
+    type: String
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# removePhrase
diff --git a/src/content/reference/en/p5.Part/replaceSequence.mdx b/src/content/reference/en/p5.Part/replaceSequence.mdx
new file mode 100644
index 0000000000..72b5191358
--- /dev/null
+++ b/src/content/reference/en/p5.Part/replaceSequence.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: replaceSequence
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Find all sequences with the specified name, and replace their patterns with
+  the specified array.</p>
+line: 9442
+params:
+  - name: phraseName
+    description: ''
+    type: String
+  - name: sequence
+    description: |
+      <p>Array of values to pass into the callback
+                                at each step of the phrase.</p>
+    type: Array
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# replaceSequence
diff --git a/src/content/reference/en/p5.Part/setBPM.mdx b/src/content/reference/en/p5.Part/setBPM.mdx
new file mode 100644
index 0000000000..c5faa89df5
--- /dev/null
+++ b/src/content/reference/en/p5.Part/setBPM.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setBPM
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the tempo of this part, in Beats Per Minute.</p>
+line: 9263
+params:
+  - name: BPM
+    description: |
+      <p>Beats Per Minute</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>Seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# setBPM
diff --git a/src/content/reference/en/p5.Part/start.mdx b/src/content/reference/en/p5.Part/start.mdx
new file mode 100644
index 0000000000..616f3c1622
--- /dev/null
+++ b/src/content/reference/en/p5.Part/start.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: start
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Start playback of this part. It will play
+  through all of its phrases at a speed
+  determined by setBPM.</p>
+line: 9291
+params:
+  - name: time
+    description: |
+      <p>seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# start
diff --git a/src/content/reference/en/p5.Part/stop.mdx b/src/content/reference/en/p5.Part/stop.mdx
new file mode 100644
index 0000000000..a988eab55f
--- /dev/null
+++ b/src/content/reference/en/p5.Part/stop.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Stop the part and cue it to step 0. Playback will resume from the begining
+  of the Part when it is played again.</p>
+line: 9349
+params:
+  - name: time
+    description: |
+      <p>seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Part
+chainable: false
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.PeakDetect/isDetected.mdx b/src/content/reference/en/p5.PeakDetect/isDetected.mdx
new file mode 100644
index 0000000000..21f18f3f15
--- /dev/null
+++ b/src/content/reference/en/p5.PeakDetect/isDetected.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: isDetected
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>isDetected is set to true when a peak is detected.</p>
+line: 10419
+itemtype: attribute
+class: p5.PeakDetect
+chainable: false
+---
+
+
+# isDetected
diff --git a/src/content/reference/en/p5.PeakDetect/onPeak.mdx b/src/content/reference/en/p5.PeakDetect/onPeak.mdx
new file mode 100644
index 0000000000..f16a7c08ec
--- /dev/null
+++ b/src/content/reference/en/p5.PeakDetect/onPeak.mdx
@@ -0,0 +1,84 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: onPeak
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>onPeak accepts two arguments: a function to call when
+  a peak is detected. The value of the peak,
+  between 0.0 and 1.0, is passed to the callback.</p>
+line: 10470
+params:
+  - name: callback
+    description: |
+      <p>Name of a function that will
+                                  be called when a peak is
+                                  detected.</p>
+    type: Function
+  - name: val
+    description: |
+      <p>Optional value to pass
+                                  into the function when
+                                  a peak is detected.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.PeakDetect
+example:
+  - |-
+
+    <div><code>
+    var cnv, soundFile, fft, peakDetect;
+    var ellipseWidth = 0;
+
+    function preload() {
+      soundFile = loadSound('assets/beat.mp3');
+    }
+
+    function setup() {
+      cnv = createCanvas(100,100);
+      textAlign(CENTER);
+
+      fft = new p5.FFT();
+      peakDetect = new p5.PeakDetect();
+
+      setupSound();
+
+      // when a beat is detected, call triggerBeat()
+      peakDetect.onPeak(triggerBeat);
+    }
+
+    function draw() {
+      background(0);
+      fill(255);
+      text('click to play', width/2, height/2);
+
+      fft.analyze();
+      peakDetect.update(fft);
+
+      ellipseWidth *= 0.95;
+      ellipse(width/2, height/2, ellipseWidth, ellipseWidth);
+    }
+
+    // this function is called by peakDetect.onPeak
+    function triggerBeat() {
+      ellipseWidth = 50;
+    }
+
+    // mouseclick starts/stops sound
+    function setupSound() {
+      cnv.mouseClicked( function() {
+        if (soundFile.isPlaying() ) {
+          soundFile.stop();
+        } else {
+          soundFile.play();
+        }
+      });
+    }
+    </code></div>
+chainable: false
+---
+
+
+# onPeak
diff --git a/src/content/reference/en/p5.PeakDetect/update.mdx b/src/content/reference/en/p5.PeakDetect/update.mdx
new file mode 100644
index 0000000000..0d9912a002
--- /dev/null
+++ b/src/content/reference/en/p5.PeakDetect/update.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: update
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>The update method is run in the draw loop.</p>
+  <p>Accepts an FFT object. You must call .analyze()
+  on the FFT object prior to updating the peakDetect
+  because it relies on a completed FFT analysis.</p>
+line: 10432
+params:
+  - name: fftObject
+    description: |
+      <p>A p5.FFT object</p>
+    type: p5.FFT
+itemtype: method
+class: p5.PeakDetect
+chainable: false
+---
+
+
+# update
diff --git a/src/content/reference/en/p5.Phrase/sequence.mdx b/src/content/reference/en/p5.Phrase/sequence.mdx
new file mode 100644
index 0000000000..6d32605a08
--- /dev/null
+++ b/src/content/reference/en/p5.Phrase/sequence.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sequence
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Array of values to pass into the callback
+  at each step of the phrase. Depending on the callback
+  function's requirements, these values may be numbers,
+  strings, or an object with multiple parameters.
+  Zero (0) indicates a rest.</p>
+line: 9173
+itemtype: property
+class: p5.Phrase
+chainable: false
+---
+
+
+# sequence
diff --git a/src/content/reference/en/p5.PolySynth/AudioVoice.mdx b/src/content/reference/en/p5.PolySynth/AudioVoice.mdx
new file mode 100644
index 0000000000..640b67d0e6
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/AudioVoice.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: AudioVoice
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Monosynth that generates the sound for each note that is triggered. The
+  p5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>
+line: 11761
+itemtype: property
+class: p5.PolySynth
+chainable: false
+---
+
+
+# AudioVoice
diff --git a/src/content/reference/en/p5.PolySynth/connect.mdx b/src/content/reference/en/p5.PolySynth/connect.mdx
new file mode 100644
index 0000000000..ee13491044
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/connect.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect to a p5.sound / Web Audio object.</p>
+line: 12105
+params:
+  - name: unit
+    description: |
+      <p>A p5.sound or Web Audio object</p>
+    type: Object
+itemtype: method
+class: p5.PolySynth
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.PolySynth/disconnect.mdx b/src/content/reference/en/p5.PolySynth/disconnect.mdx
new file mode 100644
index 0000000000..2c0d369adf
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect all outputs</p>
+line: 12119
+itemtype: method
+class: p5.PolySynth
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.PolySynth/dispose.mdx b/src/content/reference/en/p5.PolySynth/dispose.mdx
new file mode 100644
index 0000000000..19bdb8ee14
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/dispose.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: dispose
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Get rid of the MonoSynth and free up its resources / memory.</p>
+line: 12133
+itemtype: method
+class: p5.PolySynth
+chainable: false
+---
+
+
+# dispose
diff --git a/src/content/reference/en/p5.PolySynth/noteADSR.mdx b/src/content/reference/en/p5.PolySynth/noteADSR.mdx
new file mode 100644
index 0000000000..c79dc38379
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/noteADSR.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noteADSR
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>noteADSR sets the envelope for a specific note that has just been
+  triggered.
+
+  Using this method modifies the envelope of whichever audiovoice is being used
+
+  to play the desired note. The envelope should be reset before noteRelease is
+  called
+
+  in order to prevent the modified envelope from being used on other notes.</p>
+line: 11849
+params:
+  - name: note
+    description: |
+      <p>Midi note on which ADSR should be set.</p>
+    type: Number
+    optional: true
+  - name: attackTime
+    description: |
+      <p>Time (in seconds before envelope
+                                    reaches Attack Level</p>
+    type: Number
+    optional: true
+  - name: decayTime
+    description: |
+      <p>Time (in seconds) before envelope
+                                    reaches Decay/Sustain Level</p>
+    type: Number
+    optional: true
+  - name: susRatio
+    description: |
+      <p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+                                    where 1.0 = attackLevel, 0.0 = releaseLevel.
+                                    The susRatio determines the decayLevel and the level at which the
+                                    sustain portion of the envelope will sustain.
+                                    For example, if attackLevel is 0.4, releaseLevel is 0,
+                                    and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+                                    increased to 1.0 (using <code>setRange</code>),
+                                    then decayLevel would increase proportionally, to become 0.5.</p>
+    type: Number
+    optional: true
+  - name: releaseTime
+    description: |
+      <p>Time in seconds from now (defaults to 0)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.PolySynth
+chainable: false
+---
+
+
+# noteADSR
diff --git a/src/content/reference/en/p5.PolySynth/noteAttack.mdx b/src/content/reference/en/p5.PolySynth/noteAttack.mdx
new file mode 100644
index 0000000000..d0970ed46e
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/noteAttack.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noteAttack
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Trigger the Attack, and Decay portion of a MonoSynth.
+  Similar to holding down a key on a piano, but it will
+  hold the sustain level until you let go.</p>
+line: 11909
+params:
+  - name: note
+    description: |
+      <p>midi note on which attack should be triggered.</p>
+    type: Number
+    optional: true
+  - name: velocity
+    description: |
+      <p>velocity of the note to play (ranging from 0 to 1)/</p>
+    type: Number
+    optional: true
+  - name: secondsFromNow
+    description: |
+      <p>time from now (in seconds)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.PolySynth
+example:
+  - |-
+
+    <div><code>
+    let polySynth = new p5.PolySynth();
+    let pitches = ['G', 'D', 'G', 'C'];
+    let octaves = [2, 3, 4];
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playChord);
+      background(220);
+      text('tap to play', 20, 20);
+    }
+
+    function playChord() {
+      userStartAudio();
+
+      // play a chord: multiple notes at the same time
+      for (let i = 0; i < 4; i++) {
+        let note = random(pitches) + random(octaves);
+        polySynth.noteAttack(note, 0.1);
+      }
+    }
+
+    function mouseReleased() {
+      // release all voices
+      polySynth.noteRelease();
+    }
+    </code></div>
+chainable: false
+---
+
+
+# noteAttack
diff --git a/src/content/reference/en/p5.PolySynth/noteRelease.mdx b/src/content/reference/en/p5.PolySynth/noteRelease.mdx
new file mode 100644
index 0000000000..0cbbfbf546
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/noteRelease.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noteRelease
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Trigger the Release of an AudioVoice note. This is similar to releasing
+  the key on a piano and letting the sound fade according to the
+  release level and release time.</p>
+line: 12021
+params:
+  - name: note
+    description: |
+      <p>midi note on which attack should be triggered.
+                                        If no value is provided, all notes will be released.</p>
+    type: Number
+    optional: true
+  - name: secondsFromNow
+    description: |
+      <p>time to trigger the release</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.PolySynth
+example:
+  - |
+
+    <div><code>
+    let polySynth = new p5.PolySynth();
+    let pitches = ['G', 'D', 'G', 'C'];
+    let octaves = [2, 3, 4];
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playChord);
+      background(220);
+      text('tap to play', 20, 20);
+    }
+
+    function playChord() {
+      userStartAudio();
+
+      // play a chord: multiple notes at the same time
+      for (let i = 0; i < 4; i++) {
+        let note = random(pitches) + random(octaves);
+        polySynth.noteAttack(note, 0.1);
+      }
+    }
+
+    function mouseReleased() {
+      // release all voices
+      polySynth.noteRelease();
+    }
+    </code></div>
+chainable: false
+---
+
+
+# noteRelease
diff --git a/src/content/reference/en/p5.PolySynth/notes.mdx b/src/content/reference/en/p5.PolySynth/notes.mdx
new file mode 100644
index 0000000000..5d94769bed
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/notes.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: notes
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>An object that holds information about which notes have been played and
+  which notes are currently being played. New notes are added as keys
+  on the fly. While a note has been attacked, but not released, the value of the
+  key is the audiovoice which is generating that note. When notes are released,
+  the value of the key becomes undefined.</p>
+line: 11742
+itemtype: property
+class: p5.PolySynth
+chainable: false
+---
+
+
+# notes
diff --git a/src/content/reference/en/p5.PolySynth/play.mdx b/src/content/reference/en/p5.PolySynth/play.mdx
new file mode 100644
index 0000000000..6652f7843e
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/play.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: play
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Play a note by triggering noteAttack and noteRelease with sustain time</p>
+line: 11800
+params:
+  - name: note
+    description: |
+      <p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>
+    type: Number
+    optional: true
+  - name: velocity
+    description: |
+      <p>velocity of the note to play (ranging from 0 to 1)</p>
+    type: Number
+    optional: true
+  - name: secondsFromNow
+    description: |
+      <p>time from now (in seconds) at which to play</p>
+    type: Number
+    optional: true
+  - name: sustainTime
+    description: |
+      <p>time to sustain before releasing the envelope</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.PolySynth
+example:
+  - |-
+
+    <div><code>
+    let polySynth;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playSynth);
+      background(220);
+      text('click to play', 20, 20);
+
+      polySynth = new p5.PolySynth();
+    }
+
+    function playSynth() {
+      userStartAudio();
+
+      // note duration (in seconds)
+      let dur = 1.5;
+
+      // time from now (in seconds)
+      let time = 0;
+
+      // velocity (volume, from 0 to 1)
+      let vel = 0.1;
+
+      // notes can overlap with each other
+      polySynth.play('G2', vel, 0, dur);
+      polySynth.play('C3', vel, time += 1/3, dur);
+      polySynth.play('G3', vel, time += 1/3, dur);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# play
diff --git a/src/content/reference/en/p5.PolySynth/polyvalue.mdx b/src/content/reference/en/p5.PolySynth/polyvalue.mdx
new file mode 100644
index 0000000000..f66dd286a8
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/polyvalue.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: polyvalue
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>A PolySynth must have at least 1 voice, defaults to 8</p>
+line: 11755
+itemtype: property
+class: p5.PolySynth
+chainable: false
+---
+
+
+# polyvalue
diff --git a/src/content/reference/en/p5.PolySynth/setADSR.mdx b/src/content/reference/en/p5.PolySynth/setADSR.mdx
new file mode 100644
index 0000000000..b180ab5811
--- /dev/null
+++ b/src/content/reference/en/p5.PolySynth/setADSR.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setADSR
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Set the PolySynths global envelope. This method modifies the envelopes of
+  each
+
+  monosynth so that all notes are played with this envelope.</p>
+line: 11881
+params:
+  - name: attackTime
+    description: |
+      <p>Time (in seconds before envelope
+                                     reaches Attack Level</p>
+    type: Number
+    optional: true
+  - name: decayTime
+    description: |
+      <p>Time (in seconds) before envelope
+                                     reaches Decay/Sustain Level</p>
+    type: Number
+    optional: true
+  - name: susRatio
+    description: |
+      <p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,
+                                     where 1.0 = attackLevel, 0.0 = releaseLevel.
+                                     The susRatio determines the decayLevel and the level at which the
+                                     sustain portion of the envelope will sustain.
+                                     For example, if attackLevel is 0.4, releaseLevel is 0,
+                                     and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is
+                                     increased to 1.0 (using <code>setRange</code>),
+                                     then decayLevel would increase proportionally, to become 0.5.</p>
+    type: Number
+    optional: true
+  - name: releaseTime
+    description: |
+      <p>Time in seconds from now (defaults to 0)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.PolySynth
+chainable: false
+---
+
+
+# setADSR
diff --git a/src/content/reference/en/p5.PrintWriter/clear.mdx b/src/content/reference/en/p5.PrintWriter/clear.mdx
new file mode 100644
index 0000000000..f2f369b50e
--- /dev/null
+++ b/src/content/reference/en/p5.PrintWriter/clear.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clear
+module: IO
+submodule: Output
+file: src/io/files.js
+description: |
+  <p>Clears the data already written to the PrintWriter object</p>
+line: 1298
+itemtype: method
+class: p5.PrintWriter
+example:
+  - |
+
+    <div class ="norender notest"><code>
+    // create writer object
+    let writer = createWriter('newFile.txt');
+    writer.write(['clear me']);
+    // clear writer object here
+    writer.clear();
+    // close writer
+    writer.close();
+    </code></div>
+    <div>
+    <code>
+    function setup() {
+      button = createButton('CLEAR ME');
+      button.position(21, 40);
+      button.mousePressed(createFile);
+    }
+
+    function createFile() {
+      let writer = createWriter('newFile.txt');
+      writer.write(['clear me']);
+      writer.clear();
+      writer.close();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# clear
diff --git a/src/content/reference/en/p5.PrintWriter/close.mdx b/src/content/reference/en/p5.PrintWriter/close.mdx
new file mode 100644
index 0000000000..bcfdf118b8
--- /dev/null
+++ b/src/content/reference/en/p5.PrintWriter/close.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: close
+module: IO
+submodule: Output
+file: src/io/files.js
+description: |
+  <p>Closes the PrintWriter</p>
+line: 1332
+itemtype: method
+class: p5.PrintWriter
+example:
+  - |-
+
+    <div class="norender notest">
+    <code>
+    // create a file called 'newFile.txt'
+    let writer = createWriter('newFile.txt');
+    // close the PrintWriter and save the file
+    writer.close();
+    </code>
+    </div>
+    <div class='norender notest'>
+    <code>
+    // create a file called 'newFile2.txt'
+    let writer = createWriter('newFile2.txt');
+    // write some data to the file
+    writer.write([100, 101, 102]);
+    // close the PrintWriter and save the file
+    writer.close();
+    </code>
+    </div>
+chainable: false
+---
+
+
+# close
diff --git a/src/content/reference/en/p5.PrintWriter/print.mdx b/src/content/reference/en/p5.PrintWriter/print.mdx
new file mode 100644
index 0000000000..0ef9becd9b
--- /dev/null
+++ b/src/content/reference/en/p5.PrintWriter/print.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: print
+module: IO
+submodule: Output
+file: src/io/files.js
+description: |
+  <p>Writes data to the PrintWriter stream, and adds a new line at the end</p>
+line: 1257
+params:
+  - name: data
+    description: |
+      <p>all data to be printed by the PrintWriter</p>
+    type: Array
+itemtype: method
+class: p5.PrintWriter
+example:
+  - |-
+
+    <div class='norender notest'>
+    <code>
+    // creates a file called 'newFile.txt'
+    let writer = createWriter('newFile.txt');
+    // creates a file containing
+    //  My name is:
+    //  Teddy
+    writer.print('My name is:');
+    writer.print('Teddy');
+    // close the PrintWriter and save the file
+    writer.close();
+    </code>
+    </div>
+    <div class='norender notest'>
+    <code>
+    let writer;
+
+    function setup() {
+      createCanvas(400, 400);
+      // create a PrintWriter
+      writer = createWriter('newFile.txt');
+    }
+
+    function draw() {
+      writer.print([mouseX, mouseY]);
+    }
+
+    function mouseClicked() {
+      writer.close();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# print
diff --git a/src/content/reference/en/p5.PrintWriter/write.mdx b/src/content/reference/en/p5.PrintWriter/write.mdx
new file mode 100644
index 0000000000..7730ea4ba1
--- /dev/null
+++ b/src/content/reference/en/p5.PrintWriter/write.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: write
+module: IO
+submodule: Output
+file: src/io/files.js
+description: |
+  <p>Writes data to the PrintWriter stream</p>
+line: 1198
+params:
+  - name: data
+    description: |
+      <p>all data to be written by the PrintWriter</p>
+    type: Array
+itemtype: method
+class: p5.PrintWriter
+example:
+  - |-
+
+    <div class="norender notest">
+    <code>
+    // creates a file called 'newFile.txt'
+    let writer = createWriter('newFile.txt');
+    // write 'Hello world!'' to the file
+    writer.write(['Hello world!']);
+    // close the PrintWriter and save the file
+    writer.close();
+    </code>
+    </div>
+    <div class='norender notest'>
+    <code>
+    // creates a file called 'newFile2.txt'
+    let writer = createWriter('newFile2.txt');
+    // write 'apples,bananas,123' to the file
+    writer.write(['apples', 'bananas', 123]);
+    // close the PrintWriter and save the file
+    writer.close();
+    </code>
+    </div>
+    <div class='norender notest'>
+    <code>
+    // creates a file called 'newFile3.txt'
+    let writer = createWriter('newFile3.txt');
+    // write 'My name is: Teddy' to the file
+    writer.write('My name is:');
+    writer.write(' Teddy');
+    // close the PrintWriter and save the file
+    writer.close();
+    </code>
+    </div>
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      button = createButton('SAVE FILE');
+      button.position(21, 40);
+      button.mousePressed(createFile);
+    }
+
+    function createFile() {
+      // creates a file called 'newFile.txt'
+      let writer = createWriter('newFile.txt');
+      // write 'Hello world!'' to the file
+      writer.write(['Hello world!']);
+      // close the PrintWriter and save the file
+      writer.close();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# write
diff --git a/src/content/reference/en/p5.Pulse/width.mdx b/src/content/reference/en/p5.Pulse/width.mdx
new file mode 100644
index 0000000000..22a4babb42
--- /dev/null
+++ b/src/content/reference/en/p5.Pulse/width.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: width
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the width of a Pulse object (an oscillator that implements
+  Pulse Width Modulation).</p>
+line: 5871
+params:
+  - name: width
+    description: |
+      <p>Width between the pulses (0 to 1.0,
+                             defaults to 0)</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Pulse
+chainable: false
+---
+
+
+# width
diff --git a/src/content/reference/en/p5.Reverb/amp.mdx b/src/content/reference/en/p5.Reverb/amp.mdx
new file mode 100644
index 0000000000..ec28c2581b
--- /dev/null
+++ b/src/content/reference/en/p5.Reverb/amp.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the output level of the reverb effect.</p>
+line: 8482
+params:
+  - name: volume
+    description: |
+      <p>amplitude between 0 and 1.0</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>create a fade that lasts rampTime</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                    seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Reverb
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.Reverb/connect.mdx b/src/content/reference/en/p5.Reverb/connect.mdx
new file mode 100644
index 0000000000..13119bad10
--- /dev/null
+++ b/src/content/reference/en/p5.Reverb/connect.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Send output to a p5.sound or web audio object</p>
+line: 8493
+params:
+  - name: unit
+    description: ''
+    type: Object
+itemtype: method
+class: p5.Reverb
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.Reverb/disconnect.mdx b/src/content/reference/en/p5.Reverb/disconnect.mdx
new file mode 100644
index 0000000000..f4436541fa
--- /dev/null
+++ b/src/content/reference/en/p5.Reverb/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnect all output.</p>
+line: 8501
+itemtype: method
+class: p5.Reverb
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.Reverb/process.mdx b/src/content/reference/en/p5.Reverb/process.mdx
new file mode 100644
index 0000000000..49cde55535
--- /dev/null
+++ b/src/content/reference/en/p5.Reverb/process.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: process
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect a source to the reverb, and assign reverb parameters.</p>
+line: 8409
+params:
+  - name: src
+    description: |
+      <p>p5.sound / Web Audio object with a sound
+                               output.</p>
+    type: Object
+  - name: seconds
+    description: |
+      <p>Duration of the reverb, in seconds.
+                               Min: 0, Max: 10. Defaults to 3.</p>
+    type: Number
+    optional: true
+  - name: decayRate
+    description: |
+      <p>Percentage of decay with each echo.
+                                Min: 0, Max: 100. Defaults to 2.</p>
+    type: Number
+    optional: true
+  - name: reverse
+    description: |
+      <p>Play the reverb backwards or forwards.</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5.Reverb
+chainable: false
+---
+
+
+# process
diff --git a/src/content/reference/en/p5.Reverb/set.mdx b/src/content/reference/en/p5.Reverb/set.mdx
new file mode 100644
index 0000000000..5b7f20ffc5
--- /dev/null
+++ b/src/content/reference/en/p5.Reverb/set.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the reverb settings. Similar to .process(), but without
+  assigning a new input.</p>
+line: 8446
+params:
+  - name: seconds
+    description: |
+      <p>Duration of the reverb, in seconds.
+                               Min: 0, Max: 10. Defaults to 3.</p>
+    type: Number
+    optional: true
+  - name: decayRate
+    description: |
+      <p>Percentage of decay with each echo.
+                                Min: 0, Max: 100. Defaults to 2.</p>
+    type: Number
+    optional: true
+  - name: reverse
+    description: |
+      <p>Play the reverb backwards or forwards.</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5.Reverb
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Score/loop.mdx b/src/content/reference/en/p5.Score/loop.mdx
new file mode 100644
index 0000000000..a1ce74d355
--- /dev/null
+++ b/src/content/reference/en/p5.Score/loop.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Loop playback of the score.</p>
+line: 9581
+itemtype: method
+class: p5.Score
+chainable: false
+---
+
+
+# loop
diff --git a/src/content/reference/en/p5.Score/noLoop.mdx b/src/content/reference/en/p5.Score/noLoop.mdx
new file mode 100644
index 0000000000..1f9da92a84
--- /dev/null
+++ b/src/content/reference/en/p5.Score/noLoop.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noLoop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Stop looping playback of the score. If it
+  is currently playing, this will go into effect
+  after the current round of playback completes.</p>
+line: 9594
+itemtype: method
+class: p5.Score
+chainable: false
+---
+
+
+# noLoop
diff --git a/src/content/reference/en/p5.Score/pause.mdx b/src/content/reference/en/p5.Score/pause.mdx
new file mode 100644
index 0000000000..ddba62772d
--- /dev/null
+++ b/src/content/reference/en/p5.Score/pause.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pause
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Pause playback of the score.</p>
+line: 9569
+itemtype: method
+class: p5.Score
+chainable: false
+---
+
+
+# pause
diff --git a/src/content/reference/en/p5.Score/setBPM.mdx b/src/content/reference/en/p5.Score/setBPM.mdx
new file mode 100644
index 0000000000..1c60a12299
--- /dev/null
+++ b/src/content/reference/en/p5.Score/setBPM.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setBPM
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the tempo for all parts in the score</p>
+line: 9628
+params:
+  - name: BPM
+    description: |
+      <p>Beats Per Minute</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>Seconds from now</p>
+    type: Number
+itemtype: method
+class: p5.Score
+chainable: false
+---
+
+
+# setBPM
diff --git a/src/content/reference/en/p5.Score/start.mdx b/src/content/reference/en/p5.Score/start.mdx
new file mode 100644
index 0000000000..4dcba9dc6e
--- /dev/null
+++ b/src/content/reference/en/p5.Score/start.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: start
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Start playback of the score.</p>
+line: 9542
+itemtype: method
+class: p5.Score
+chainable: false
+---
+
+
+# start
diff --git a/src/content/reference/en/p5.Score/stop.mdx b/src/content/reference/en/p5.Score/stop.mdx
new file mode 100644
index 0000000000..2df491c1ce
--- /dev/null
+++ b/src/content/reference/en/p5.Score/stop.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Stop playback of the score.</p>
+line: 9555
+itemtype: method
+class: p5.Score
+chainable: false
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.Shader/copyToContext.mdx b/src/content/reference/en/p5.Shader/copyToContext.mdx
new file mode 100644
index 0000000000..f0ed381a8c
--- /dev/null
+++ b/src/content/reference/en/p5.Shader/copyToContext.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: copyToContext
+module: 3D
+submodule: Material
+file: src/webgl/p5.Shader.js
+description: |
+  <p>Shaders belong to the main canvas or a p5.Graphics. Once they are compiled,
+  they can only be used in the context they were compiled on.</p>
+  <p>Use this method to make a new copy of a shader that gets compiled on a
+  different context.</p>
+line: 106
+params:
+  - name: context
+    description: |
+      <p>The graphic or instance to copy this shader to.
+      Pass <code>window</code> if you need to copy to the main canvas.</p>
+    type: p5|p5.Graphics
+itemtype: method
+class: p5.Shader
+example:
+  - |-
+
+    <div class='norender notest'>
+    <code>
+    let graphic = createGraphics(200, 200, WEBGL);
+    let graphicShader = graphic.createShader(vert, frag);
+    graphic.shader(graphicShader); // Use graphicShader on the graphic
+
+    let mainShader = graphicShader.copyToContext(window);
+    shader(mainShader); // Use `mainShader` on the main canvas
+    </code>
+    </div>
+return:
+  description: A new shader on the target context.
+  type: p5.Shader
+chainable: false
+---
+
+
+# copyToContext
diff --git a/src/content/reference/en/p5.Shader/setUniform.mdx b/src/content/reference/en/p5.Shader/setUniform.mdx
new file mode 100644
index 0000000000..56f85f5090
--- /dev/null
+++ b/src/content/reference/en/p5.Shader/setUniform.mdx
@@ -0,0 +1,133 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setUniform
+module: 3D
+submodule: Material
+file: src/webgl/p5.Shader.js
+description: >
+  <p>Used to set the uniforms of a
+
+  <a href="#/p5.Shader">p5.Shader</a> object.</p>
+
+  <p>Uniforms are used as a way to provide shader programs
+
+  (which run on the GPU) with values from a sketch
+
+  (which runs on the CPU).</p>
+
+  <p>Here are some examples of uniforms you can make:</p>
+
+  <ul>
+
+  <li>booleans<ul>
+
+  <li>Example: <code>setUniform('x', true)</code> becomes <code>uniform float
+  x</code> with the value <code>1.0</code></li>
+
+  </ul>
+
+  </li>
+
+  <li>numbers<ul>
+
+  <li>Example: <code>setUniform('x', -2)</code> becomes <code>uniform float
+  x</code> with the value <code>-2.0</code></li>
+
+  </ul>
+
+  </li>
+
+  <li>arrays of numbers<ul>
+
+  <li>Example: <code>setUniform('x', [0, 0.5, 1])</code> becomes <code>uniform
+  vec3 x</code> with the value <code>vec3(0.0, 0.5, 1.0)</code></li>
+
+  </ul>
+
+  </li>
+
+  <li>a p5.Image, p5.Graphics, p5.MediaElement, or p5.Texture<ul>
+
+  <li>Example: <code>setUniform('x', img)</code> becomes <code>uniform sampler2D
+  x</code></li>
+
+  </ul>
+
+  </li>
+
+  </ul>
+line: 367
+params:
+  - name: uniformName
+    description: |
+      <p>the name of the uniform.
+      Must correspond to the name used in the vertex and fragment shaders</p>
+    type: String
+  - name: data
+    description: |
+      <p>The value to assign to the uniform. This can be
+      a boolean (true/false), a number, an array of numbers, or
+      an image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture)</p>
+    type: 'Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture'
+itemtype: method
+class: p5.Shader
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Click within the image to toggle the value of uniforms
+    // Note: for an alternative approach to the same example,
+    // involving toggling between shaders please refer to:
+    // https://p5js.org/reference/#/p5/shader
+
+    let grad;
+    let showRedGreen = false;
+
+    function preload() {
+      // note that we are using two instances
+      // of the same vertex and fragment shaders
+      grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      shader(grad);
+      noStroke();
+
+      describe(
+        'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
+      );
+    }
+
+    function draw() {
+      // update the offset values for each scenario,
+      // moving the "grad" shader in either vertical or
+      // horizontal direction each with differing colors
+
+      if (showRedGreen === true) {
+        grad.setUniform('colorCenter', [1, 0, 0]);
+        grad.setUniform('colorBackground', [0, 1, 0]);
+        grad.setUniform('offset', [sin(millis() / 2000), 1]);
+      } else {
+        grad.setUniform('colorCenter', [1, 0.5, 0]);
+        grad.setUniform('colorBackground', [0.226, 0, 0.615]);
+        grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+      }
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+
+    function mouseClicked() {
+      showRedGreen = !showRedGreen;
+    }
+    </code>
+    </div>
+alt: >-
+  canvas toggles between a circular gradient of orange and blue vertically. and
+  a circular gradient of red and green moving horizontally when mouse is
+  clicked/pressed.
+chainable: true
+---
+
+
+# setUniform
diff --git a/src/content/reference/en/p5.SoundFile/addCue.mdx b/src/content/reference/en/p5.SoundFile/addCue.mdx
new file mode 100644
index 0000000000..5b9cda6d35
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/addCue.mdx
@@ -0,0 +1,82 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addCue
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Schedule events to trigger every time a MediaElement
+  (audio/video) reaches a playback cue point.</p>
+  <p>Accepts a callback function, a time (in seconds) at which to trigger
+  the callback, and an optional parameter for the callback.</p>
+  <p>Time will be passed as the first parameter to the callback function,
+  and param will be the second parameter.</p>
+line: 2719
+params:
+  - name: time
+    description: |
+      <p>Time in seconds, relative to this media
+                                 element's playback. For example, to trigger
+                                 an event every time playback reaches two
+                                 seconds, pass in the number 2. This will be
+                                 passed as the first parameter to
+                                 the callback function.</p>
+    type: Number
+  - name: callback
+    description: |
+      <p>Name of a function that will be
+                                 called at the given time. The callback will
+                                 receive time and (optionally) param as its
+                                 two parameters.</p>
+    type: Function
+  - name: value
+    description: |
+      <p>An object to be passed as the
+                                 second parameter to the
+                                 callback function.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.SoundFile
+example:
+  - |-
+
+    <div><code>
+    let mySound;
+    function preload() {
+      mySound = loadSound('assets/Damscray_DancingTiger.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+      background(220);
+      text('tap to play', 10, 20);
+
+      // schedule calls to changeText
+      mySound.addCue(0, changeText, "hello" );
+      mySound.addCue(0.5, changeText, "hello," );
+      mySound.addCue(1, changeText, "hello, p5!");
+      mySound.addCue(1.5, changeText, "hello, p5!!");
+      mySound.addCue(2, changeText, "hello, p5!!!!!");
+    }
+
+    function changeText(val) {
+      background(220);
+      text(val, 10, 20);
+    }
+
+    function canvasPressed() {
+      mySound.play();
+    }
+    </code></div>
+return:
+  description: |-
+    id ID of this cue,
+                        useful for removeCue(id)
+  type: Number
+chainable: false
+---
+
+
+# addCue
diff --git a/src/content/reference/en/p5.SoundFile/channels.mdx b/src/content/reference/en/p5.SoundFile/channels.mdx
new file mode 100644
index 0000000000..af05b0dc74
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/channels.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: channels
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Return the number of channels in a sound file.
+  For example, Mono = 1, Stereo = 2.</p>
+line: 2340
+itemtype: method
+class: p5.SoundFile
+return:
+  description: '[channels]'
+  type: Number
+chainable: false
+---
+
+
+# channels
diff --git a/src/content/reference/en/p5.SoundFile/clearCues.mdx b/src/content/reference/en/p5.SoundFile/clearCues.mdx
new file mode 100644
index 0000000000..173016acec
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/clearCues.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clearCues
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Remove all of the callbacks that had originally been scheduled
+  via the addCue method.</p>
+line: 2817
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# clearCues
diff --git a/src/content/reference/en/p5.SoundFile/connect.mdx b/src/content/reference/en/p5.SoundFile/connect.mdx
new file mode 100644
index 0000000000..5538f16b3f
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/connect.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: connect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connects the output of a p5sound object to input of another
+  p5.sound object. For example, you may connect a p5.SoundFile to an
+  FFT or an Effect. If no parameter is given, it will connect to
+  the main output. Most p5sound objects connect to the master
+  output when they are created.</p>
+line: 2565
+params:
+  - name: object
+    description: |
+      <p>Audio object that accepts an input</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# connect
diff --git a/src/content/reference/en/p5.SoundFile/currentTime.mdx b/src/content/reference/en/p5.SoundFile/currentTime.mdx
new file mode 100644
index 0000000000..93d9f45983
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/currentTime.mdx
@@ -0,0 +1,24 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: currentTime
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Return the current position of the p5.SoundFile playhead, in seconds.
+
+  Time is relative to the normal buffer direction, so if
+  <code>reverseBuffer</code>
+
+  has been called, currentTime will count backwards.</p>
+line: 2293
+itemtype: method
+class: p5.SoundFile
+return:
+  description: currentTime of the soundFile in seconds.
+  type: Number
+chainable: false
+---
+
+
+# currentTime
diff --git a/src/content/reference/en/p5.SoundFile/disconnect.mdx b/src/content/reference/en/p5.SoundFile/disconnect.mdx
new file mode 100644
index 0000000000..f2f08061ed
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/disconnect.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disconnect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Disconnects the output of this p5sound object.</p>
+line: 2590
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# disconnect
diff --git a/src/content/reference/en/p5.SoundFile/duration.mdx b/src/content/reference/en/p5.SoundFile/duration.mdx
new file mode 100644
index 0000000000..3b74440f3b
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/duration.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: duration
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the duration of a sound file in seconds.</p>
+line: 2276
+itemtype: method
+class: p5.SoundFile
+return:
+  description: The duration of the soundFile in seconds.
+  type: Number
+chainable: false
+---
+
+
+# duration
diff --git a/src/content/reference/en/p5.SoundFile/frames.mdx b/src/content/reference/en/p5.SoundFile/frames.mdx
new file mode 100644
index 0000000000..5f3bd9fc89
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/frames.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: frames
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Return the number of samples in a sound file.
+  Equal to sampleRate * duration.</p>
+line: 2367
+itemtype: method
+class: p5.SoundFile
+return:
+  description: '[sampleCount]'
+  type: Number
+chainable: false
+---
+
+
+# frames
diff --git a/src/content/reference/en/p5.SoundFile/getBlob.mdx b/src/content/reference/en/p5.SoundFile/getBlob.mdx
new file mode 100644
index 0000000000..9617c1a955
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/getBlob.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getBlob
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>This method is useful for sending a SoundFile to a server. It returns the
+  .wav-encoded audio data as a "<a target="_blank" title="Blob reference at
+  MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>".
+  A Blob is a file-like data object that can be uploaded to a server
+  with an <a href="/reference/#/p5/httpDo">http</a> request. We'll
+  use the <code>httpDo</code> options object to send a POST request with some
+  specific options: we encode the request as <code>multipart/form-data</code>,
+  and attach the blob as one of the form values using <code>FormData</code>.</p>
+line: 2882
+itemtype: method
+class: p5.SoundFile
+example:
+  - |2-
+
+     <div><code>
+     function preload() {
+       mySound = loadSound('assets/doorbell.mp3');
+     }
+
+     function setup() {
+       noCanvas();
+       let soundBlob = mySound.getBlob();
+
+       // Now we can send the blob to a server...
+       let serverUrl = 'https://jsonplaceholder.typicode.com/posts';
+       let httpRequestOptions = {
+         method: 'POST',
+         body: new FormData().append('soundBlob', soundBlob),
+         headers: new Headers({
+           'Content-Type': 'multipart/form-data'
+         })
+       };
+       httpDo(serverUrl, httpRequestOptions);
+
+       // We can also create an `ObjectURL` pointing to the Blob
+       let blobUrl = URL.createObjectURL(soundBlob);
+
+       // The `<Audio>` Element accepts Object URL's
+       createAudio(blobUrl).showControls();
+
+       createDiv();
+
+       // The ObjectURL exists as long as this tab is open
+       let input = createInput(blobUrl);
+       input.attribute('readonly', true);
+       input.mouseClicked(function() { input.elt.select() });
+     }
+
+    </code></div>
+return:
+  description: A file-like data object
+  type: Blob
+chainable: false
+---
+
+
+# getBlob
diff --git a/src/content/reference/en/p5.SoundFile/getPan.mdx b/src/content/reference/en/p5.SoundFile/getPan.mdx
new file mode 100644
index 0000000000..14bda2f61e
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/getPan.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getPan
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the current stereo pan position (-1.0 to 1.0)</p>
+line: 2131
+itemtype: method
+class: p5.SoundFile
+return:
+  description: |-
+    Returns the stereo pan setting of the Oscillator
+                             as a number between -1.0 (left) and 1.0 (right).
+                             0.0 is center and default.
+  type: Number
+chainable: false
+---
+
+
+# getPan
diff --git a/src/content/reference/en/p5.SoundFile/getPeaks.mdx b/src/content/reference/en/p5.SoundFile/getPeaks.mdx
new file mode 100644
index 0000000000..627933c6b7
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/getPeaks.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getPeaks
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns an array of amplitude peaks in a p5.SoundFile that can be
+  used to draw a static waveform. Scans through the p5.SoundFile's
+  audio buffer to find the greatest amplitudes. Accepts one
+  parameter, 'length', which determines size of the array.
+  Larger arrays result in more precise waveform visualizations.</p>
+  <p>Inspired by Wavesurfer.js.</p>
+line: 2381
+params:
+  - name: length
+    description: |
+      <p>length is the size of the returned array.
+                               Larger length results in more precision.
+                               Defaults to 5*width of the browser window.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+return:
+  description: Array of peaks.
+  type: Float32Array
+chainable: false
+---
+
+
+# getPeaks
diff --git a/src/content/reference/en/p5.SoundFile/isLoaded.mdx b/src/content/reference/en/p5.SoundFile/isLoaded.mdx
new file mode 100644
index 0000000000..8d6d21f26d
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/isLoaded.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: isLoaded
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns true if the sound file finished loading successfully.</p>
+line: 1662
+itemtype: method
+class: p5.SoundFile
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# isLoaded
diff --git a/src/content/reference/en/p5.SoundFile/isLooping.mdx b/src/content/reference/en/p5.SoundFile/isLooping.mdx
new file mode 100644
index 0000000000..18f2714e25
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/isLooping.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: isLooping
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false'
+  if not.</p>
+line: 1976
+itemtype: method
+class: p5.SoundFile
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# isLooping
diff --git a/src/content/reference/en/p5.SoundFile/isPaused.mdx b/src/content/reference/en/p5.SoundFile/isPaused.mdx
new file mode 100644
index 0000000000..96ef7a3143
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/isPaused.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: isPaused
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns true if a p5.SoundFile is paused, false if not (i.e.
+  playing or stopped).</p>
+line: 2011
+itemtype: method
+class: p5.SoundFile
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# isPaused
diff --git a/src/content/reference/en/p5.SoundFile/isPlaying.mdx b/src/content/reference/en/p5.SoundFile/isPlaying.mdx
new file mode 100644
index 0000000000..f273927a14
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/isPlaying.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: isPlaying
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns true if a p5.SoundFile is playing, false if not (i.e.
+  paused or stopped).</p>
+line: 1997
+itemtype: method
+class: p5.SoundFile
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# isPlaying
diff --git a/src/content/reference/en/p5.SoundFile/jump.mdx b/src/content/reference/en/p5.SoundFile/jump.mdx
new file mode 100644
index 0000000000..10b7d7e6e5
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/jump.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: jump
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Move the playhead of a soundfile that is currently playing to a
+
+  new position and a new duration, in seconds.
+
+  If none are given, will reset the file to play entire duration
+
+  from start to finish. To set the position of a soundfile that is
+
+  not currently playing, use the <code>play</code> or <code>loop</code>
+  methods.</p>
+line: 2308
+params:
+  - name: cueTime
+    description: |
+      <p>cueTime of the soundFile in seconds.</p>
+    type: Number
+  - name: duration
+    description: |
+      <p>duration in seconds.</p>
+    type: Number
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# jump
diff --git a/src/content/reference/en/p5.SoundFile/loop.mdx b/src/content/reference/en/p5.SoundFile/loop.mdx
new file mode 100644
index 0000000000..307564235f
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/loop.mdx
@@ -0,0 +1,71 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Loop the p5.SoundFile. Accepts optional parameters to set the
+  playback rate, playback volume, loopStart, loopEnd.</p>
+line: 1905
+params:
+  - name: startTime
+    description: |
+      <p>(optional) schedule event to occur
+                                  seconds from now</p>
+    type: Number
+    optional: true
+  - name: rate
+    description: |
+      <p>(optional) playback rate</p>
+    type: Number
+    optional: true
+  - name: amp
+    description: |
+      <p>(optional) playback volume</p>
+    type: Number
+    optional: true
+  - name: cueLoopStart
+    description: |
+      <p>(optional) startTime in seconds</p>
+    type: Number
+    optional: true
+  - name: duration
+    description: |
+      <p>(optional) loop duration in seconds</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+example:
+  - |2-
+
+     <div><code>
+     let soundFile;
+     let loopStart = 0.5;
+     let loopDuration = 0.2;
+     function preload() {
+       soundFormats('ogg', 'mp3');
+       soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');
+     }
+     function setup() {
+       let cnv = createCanvas(100, 100);
+       cnv.mousePressed(canvasPressed);
+       background(220);
+       text('tap to play, release to pause', 10, 20, width - 20);
+     }
+     function canvasPressed() {
+       soundFile.loop();
+       background(0, 200, 50);
+     }
+     function mouseReleased() {
+       soundFile.pause();
+       background(220);
+     }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# loop
diff --git a/src/content/reference/en/p5.SoundFile/onended.mdx b/src/content/reference/en/p5.SoundFile/onended.mdx
new file mode 100644
index 0000000000..1839c65d73
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/onended.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: onended
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Schedule an event to be called when the soundfile
+  reaches the end of a buffer. If the soundfile is
+  playing through once, this will be called when it
+  ends. If it is looping, it will be called when
+  stop is called.</p>
+line: 2497
+params:
+  - name: callback
+    description: |
+      <p>function to call when the
+                                  soundfile has ended.</p>
+    type: Function
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# onended
diff --git a/src/content/reference/en/p5.SoundFile/pan.mdx b/src/content/reference/en/p5.SoundFile/pan.mdx
new file mode 100644
index 0000000000..b8a81a4d72
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/pan.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pan
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the stereo panning of a p5.sound object to
+  a floating point number between -1.0 (left) and 1.0 (right).
+  Default is 0.0 (center).</p>
+line: 2087
+params:
+  - name: panValue
+    description: |
+      <p>Set the stereo panner</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>schedule this event to happen
+                                      seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+example:
+  - |-
+
+    <div><code>
+     let ballX = 0;
+     let soundFile;
+
+     function preload() {
+       soundFormats('ogg', 'mp3');
+       soundFile = loadSound('assets/beatbox.mp3');
+     }
+
+     function draw() {
+       let cnv = createCanvas(100, 100);
+       cnv.mousePressed(canvasPressed);
+       background(220);
+       ballX = constrain(mouseX, 0, width);
+       ellipse(ballX, height/2, 20, 20);
+     }
+
+     function canvasPressed(){
+       // map the ball's x location to a panning degree
+       // between -1.0 (left) and 1.0 (right)
+       let panning = map(ballX, 0., width,-1.0, 1.0);
+       soundFile.pan(panning);
+       soundFile.play();
+     }
+     </div></code>
+chainable: false
+---
+
+
+# pan
diff --git a/src/content/reference/en/p5.SoundFile/pause.mdx b/src/content/reference/en/p5.SoundFile/pause.mdx
new file mode 100644
index 0000000000..c0fb2e0542
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/pause.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pause
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Pauses a file that is currently playing. If the file is not
+  playing, then nothing will happen.</p>
+  <p>After pausing, .play() will resume from the paused
+  position.
+  If p5.SoundFile had been set to loop before it was paused,
+  it will continue to loop after it is unpaused with .play().</p>
+line: 1847
+params:
+  - name: startTime
+    description: |
+      <p>(optional) schedule event to occur
+                                   seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+example:
+  - |-
+
+    <div><code>
+    let soundFile;
+    function preload() {
+      soundFormats('ogg', 'mp3');
+      soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');
+    }
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+      background(220);
+      text('tap to play, release to pause', 10, 20, width - 20);
+    }
+    function canvasPressed() {
+      soundFile.loop();
+      background(0, 200, 50);
+    }
+    function mouseReleased() {
+      soundFile.pause();
+      background(220);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pause
diff --git a/src/content/reference/en/p5.SoundFile/play.mdx b/src/content/reference/en/p5.SoundFile/play.mdx
new file mode 100644
index 0000000000..d41cee1f1e
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/play.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: play
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Play the p5.SoundFile</p>
+line: 1679
+params:
+  - name: startTime
+    description: |
+      <p>(optional) schedule playback to start (in seconds from now).</p>
+    type: Number
+    optional: true
+  - name: rate
+    description: |
+      <p>(optional) playback rate</p>
+    type: Number
+    optional: true
+  - name: amp
+    description: |
+      <p>(optional) amplitude (volume)
+                                          of playback</p>
+    type: Number
+    optional: true
+  - name: cueStart
+    description: |
+      <p>(optional) cue start time in seconds</p>
+    type: Number
+    optional: true
+  - name: duration
+    description: |
+      <p>(optional) duration of playback in seconds</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# play
diff --git a/src/content/reference/en/p5.SoundFile/playMode.mdx b/src/content/reference/en/p5.SoundFile/playMode.mdx
new file mode 100644
index 0000000000..9068a4ee12
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/playMode.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: playMode
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>p5.SoundFile has two play modes: <code>restart</code> and
+  <code>sustain</code>. Play Mode determines what happens to a
+  p5.SoundFile if it is triggered while in the middle of playback.
+  In sustain mode, playback will continue simultaneous to the
+  new playback. In restart mode, play() will stop playback
+  and start over. With untilDone, a sound will play only if it's
+  not already playing. Sustain is the default mode.</p>
+line: 1787
+params:
+  - name: str
+    description: |
+      <p>'restart' or 'sustain' or 'untilDone'</p>
+    type: String
+itemtype: method
+class: p5.SoundFile
+example:
+  - |-
+
+    <div><code>
+    let mySound;
+    function preload(){
+      mySound = loadSound('assets/Damscray_DancingTiger.mp3');
+    }
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+      noFill();
+      rect(0, height/2, width - 1, height/2 - 1);
+      rect(0, 0, width - 1, height/2);
+      textAlign(CENTER, CENTER);
+      fill(20);
+      text('restart', width/2, 1 * height/4);
+      text('sustain', width/2, 3 * height/4);
+    }
+    function canvasPressed() {
+      if (mouseX < height/2) {
+        mySound.playMode('restart');
+      } else {
+        mySound.playMode('sustain');
+      }
+      mySound.play();
+    }
+
+     </code></div>
+chainable: false
+---
+
+
+# playMode
diff --git a/src/content/reference/en/p5.SoundFile/rate.mdx b/src/content/reference/en/p5.SoundFile/rate.mdx
new file mode 100644
index 0000000000..64952d3396
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/rate.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rate
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the playback rate of a sound file. Will change the speed and the pitch.
+  Values less than zero will reverse the audio buffer.</p>
+line: 2146
+params:
+  - name: playbackRate
+    description: |
+      <p>Set the playback rate. 1.0 is normal,
+                                         .5 is half-speed, 2.0 is twice as fast.
+                                         Values less than zero play backwards.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+example:
+  - |
+
+    <div><code>
+    let mySound;
+
+    function preload() {
+      mySound = loadSound('assets/Damscray_DancingTiger.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+    }
+    function canvasPressed() {
+      mySound.loop();
+    }
+    function mouseReleased() {
+      mySound.pause();
+    }
+    function draw() {
+      background(220);
+
+      // Set the rate to a range between 0.1 and 4
+      // Changing the rate also alters the pitch
+      let playbackRate = map(mouseY, 0.1, height, 2, 0);
+      playbackRate = constrain(playbackRate, 0.01, 4);
+      mySound.rate(playbackRate);
+
+      line(0, mouseY, width, mouseY);
+      text('rate: ' + round(playbackRate * 100) + '%', 10, 20);
+    }
+
+     </code>
+     </div>
+chainable: false
+---
+
+
+# rate
diff --git a/src/content/reference/en/p5.SoundFile/removeCue.mdx b/src/content/reference/en/p5.SoundFile/removeCue.mdx
new file mode 100644
index 0000000000..f1758692cc
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/removeCue.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeCue
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Remove a callback based on its ID. The ID is returned by the
+  addCue method.</p>
+line: 2790
+params:
+  - name: id
+    description: |
+      <p>ID of the cue, as returned by addCue</p>
+    type: Number
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# removeCue
diff --git a/src/content/reference/en/p5.SoundFile/reverseBuffer.mdx b/src/content/reference/en/p5.SoundFile/reverseBuffer.mdx
new file mode 100644
index 0000000000..ee8582b93e
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/reverseBuffer.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: reverseBuffer
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Reverses the p5.SoundFile's buffer source.
+  Playback must be handled separately (see example).</p>
+line: 2443
+itemtype: method
+class: p5.SoundFile
+example:
+  - |-
+
+    <div><code>
+    let drum;
+    function preload() {
+      drum = loadSound('assets/drum.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+      background(220);
+      text('tap to play', 20, 20);
+    }
+
+    function canvasPressed() {
+      drum.stop();
+      drum.reverseBuffer();
+      drum.play();
+    }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# reverseBuffer
diff --git a/src/content/reference/en/p5.SoundFile/sampleRate.mdx b/src/content/reference/en/p5.SoundFile/sampleRate.mdx
new file mode 100644
index 0000000000..a8b2eb69d8
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/sampleRate.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sampleRate
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Return the sample rate of the sound file.</p>
+line: 2354
+itemtype: method
+class: p5.SoundFile
+return:
+  description: '[sampleRate]'
+  type: Number
+chainable: false
+---
+
+
+# sampleRate
diff --git a/src/content/reference/en/p5.SoundFile/save.mdx b/src/content/reference/en/p5.SoundFile/save.mdx
new file mode 100644
index 0000000000..e328dae08f
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/save.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: save
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Save a p5.SoundFile as a .wav file. The browser will prompt the user
+  to download the file to their device. To upload a file to a server, see
+  <a href="/reference/#/p5.SoundFile/getBlob">getBlob</a></p>
+line: 2850
+params:
+  - name: fileName
+    description: |
+      <p>name of the resulting .wav file.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.SoundFile
+example:
+  - |2-
+
+     <div><code>
+     let mySound;
+     function preload() {
+       mySound = loadSound('assets/doorbell.mp3');
+     }
+     function setup() {
+       let cnv = createCanvas(100, 100);
+       cnv.mousePressed(canvasPressed);
+       background(220);
+       text('tap to download', 10, 20);
+     }
+
+     function canvasPressed() {
+       mySound.save('my cool filename');
+     }
+    </code></div>
+chainable: false
+---
+
+
+# save
diff --git a/src/content/reference/en/p5.SoundFile/setBuffer.mdx b/src/content/reference/en/p5.SoundFile/setBuffer.mdx
new file mode 100644
index 0000000000..bdb92a5005
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/setBuffer.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setBuffer
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Replace the current Audio Buffer with a new Buffer.</p>
+line: 2630
+params:
+  - name: buf
+    description: |
+      <p>Array of Float32 Array(s). 2 Float32 Arrays
+                         will create a stereo source. 1 will create
+                         a mono source.</p>
+    type: Array
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# setBuffer
diff --git a/src/content/reference/en/p5.SoundFile/setLoop.mdx b/src/content/reference/en/p5.SoundFile/setLoop.mdx
new file mode 100644
index 0000000000..aa9b245023
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/setLoop.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setLoop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set a p5.SoundFile's looping flag to true or false. If the sound
+  is currently playing, this change will take effect when it
+  reaches the end of the current playback.</p>
+line: 1950
+params:
+  - name: Boolean
+    description: |
+      <p>set looping to true or false</p>
+    type: Boolean
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# setLoop
diff --git a/src/content/reference/en/p5.SoundFile/setPath.mdx b/src/content/reference/en/p5.SoundFile/setPath.mdx
new file mode 100644
index 0000000000..bdc995ef6a
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/setPath.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setPath
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Reset the source for this SoundFile to a
+  new path (URL).</p>
+line: 2612
+params:
+  - name: path
+    description: |
+      <p>path to audio file</p>
+    type: String
+  - name: callback
+    description: |
+      <p>Callback</p>
+    type: Function
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# setPath
diff --git a/src/content/reference/en/p5.SoundFile/setVolume.mdx b/src/content/reference/en/p5.SoundFile/setVolume.mdx
new file mode 100644
index 0000000000..28e7302f6b
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/setVolume.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setVolume
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Multiply the output volume (amplitude) of a sound file
+  between 0.0 (silence) and 1.0 (full volume).
+  1.0 is the maximum amplitude of a digital sound, so multiplying
+  by greater than 1.0 may cause digital distortion. To
+  fade, provide a <code>rampTime</code> parameter. For more
+  complex fades, see the Envelope class.</p>
+  <p>Alternately, you can pass in a signal source such as an
+  oscillator to modulate the amplitude with an audio signal.</p>
+line: 2239
+params:
+  - name: volume
+    description: |
+      <p>Volume (amplitude) between 0.0
+                                         and 1.0 or modulating signal/oscillator</p>
+    type: Number|Object
+  - name: rampTime
+    description: |
+      <p>Fade for t seconds</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>Schedule this event to happen at
+                                     t seconds in the future</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# setVolume
diff --git a/src/content/reference/en/p5.SoundFile/stop.mdx b/src/content/reference/en/p5.SoundFile/stop.mdx
new file mode 100644
index 0000000000..5f7dbf7af8
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/stop.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Stop soundfile playback.</p>
+line: 2025
+params:
+  - name: startTime
+    description: |
+      <p>(optional) schedule event to occur
+                                  in seconds from now</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.SoundLoop/bpm.mdx b/src/content/reference/en/p5.SoundLoop/bpm.mdx
new file mode 100644
index 0000000000..a76ac43e6b
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/bpm.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: bpm
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Getters and Setters, setting any paramter will result in a change in the
+  clock's
+
+  frequency, that will be reflected after the next callback
+
+  beats per minute (defaults to 60)</p>
+line: 9729
+itemtype: property
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# bpm
diff --git a/src/content/reference/en/p5.SoundLoop/interval.mdx b/src/content/reference/en/p5.SoundLoop/interval.mdx
new file mode 100644
index 0000000000..cad2c0386b
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/interval.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: interval
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>length of the loops interval</p>
+line: 9770
+itemtype: property
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# interval
diff --git a/src/content/reference/en/p5.SoundLoop/iterations.mdx b/src/content/reference/en/p5.SoundLoop/iterations.mdx
new file mode 100644
index 0000000000..3574e575bc
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/iterations.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: iterations
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>how many times the callback has been called so far</p>
+line: 9787
+itemtype: property
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# iterations
diff --git a/src/content/reference/en/p5.SoundLoop/maxIterations.mdx b/src/content/reference/en/p5.SoundLoop/maxIterations.mdx
new file mode 100644
index 0000000000..ce1e93e806
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/maxIterations.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: maxIterations
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set a limit to the number of loops to play. defaults to Infinity</p>
+line: 9816
+itemtype: property
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# maxIterations
diff --git a/src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx b/src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx
new file mode 100644
index 0000000000..b006d161f6
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: musicalTimeMode
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>musicalTimeMode uses <a href =
+  "https://github.com/Tonejs/Tone.js/wiki/Time">Tone.Time</a> convention
+
+  true if string, false if number</p>
+line: 9800
+itemtype: property
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# musicalTimeMode
diff --git a/src/content/reference/en/p5.SoundLoop/pause.mdx b/src/content/reference/en/p5.SoundLoop/pause.mdx
new file mode 100644
index 0000000000..4c664223b4
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/pause.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pause
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Pause the loop</p>
+line: 9878
+params:
+  - name: timeFromNow
+    description: |
+      <p>schedule a pausing time</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# pause
diff --git a/src/content/reference/en/p5.SoundLoop/start.mdx b/src/content/reference/en/p5.SoundLoop/start.mdx
new file mode 100644
index 0000000000..c63dce7f64
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/start.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: start
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Start the loop</p>
+line: 9841
+params:
+  - name: timeFromNow
+    description: |
+      <p>schedule a starting time</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# start
diff --git a/src/content/reference/en/p5.SoundLoop/stop.mdx b/src/content/reference/en/p5.SoundLoop/stop.mdx
new file mode 100644
index 0000000000..06b0308fd2
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/stop.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Stop the loop</p>
+line: 9860
+params:
+  - name: timeFromNow
+    description: |
+      <p>schedule a stopping time</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.SoundLoop/syncedStart.mdx b/src/content/reference/en/p5.SoundLoop/syncedStart.mdx
new file mode 100644
index 0000000000..1bd6c6f1ca
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/syncedStart.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: syncedStart
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Synchronize loops. Use this method to start two or more loops in
+  synchronization
+
+  or to start a loop in synchronization with a loop that is already playing
+
+  This method will schedule the implicit loop in sync with the explicit master
+  loop
+
+  i.e. loopToStart.syncedStart(loopToSyncWith)</p>
+line: 9896
+params:
+  - name: otherLoop
+    description: |
+      <p>a p5.SoundLoop to sync with</p>
+    type: Object
+  - name: timeFromNow
+    description: |
+      <p>Start the loops in sync after timeFromNow seconds</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# syncedStart
diff --git a/src/content/reference/en/p5.SoundLoop/timeSignature.mdx b/src/content/reference/en/p5.SoundLoop/timeSignature.mdx
new file mode 100644
index 0000000000..40180eac91
--- /dev/null
+++ b/src/content/reference/en/p5.SoundLoop/timeSignature.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: timeSignature
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>number of quarter notes in a measure (defaults to 4)</p>
+line: 9750
+itemtype: property
+class: p5.SoundLoop
+chainable: false
+---
+
+
+# timeSignature
diff --git a/src/content/reference/en/p5.SoundRecorder/record.mdx b/src/content/reference/en/p5.SoundRecorder/record.mdx
new file mode 100644
index 0000000000..e052747694
--- /dev/null
+++ b/src/content/reference/en/p5.SoundRecorder/record.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: record
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Start recording. To access the recording, provide
+  a p5.SoundFile as the first parameter. The p5.SoundRecorder
+  will send its recording to that p5.SoundFile for playback once
+  recording is complete. Optional parameters include duration
+  (in seconds) of the recording, and a callback function that
+  will be called once the complete recording has been
+  transfered to the p5.SoundFile.</p>
+line: 10703
+params:
+  - name: soundFile
+    description: |
+      <p>p5.SoundFile</p>
+    type: p5.SoundFile
+  - name: duration
+    description: |
+      <p>Time (in seconds)</p>
+    type: Number
+    optional: true
+  - name: callback
+    description: |
+      <p>The name of a function that will be
+                                    called once the recording completes</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5.SoundRecorder
+chainable: false
+---
+
+
+# record
diff --git a/src/content/reference/en/p5.SoundRecorder/setInput.mdx b/src/content/reference/en/p5.SoundRecorder/setInput.mdx
new file mode 100644
index 0000000000..2a8676b80b
--- /dev/null
+++ b/src/content/reference/en/p5.SoundRecorder/setInput.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setInput
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Connect a specific device to the p5.SoundRecorder.
+  If no parameter is given, p5.SoundRecorer will record
+  all audible p5.sound from your sketch.</p>
+line: 10676
+params:
+  - name: unit
+    description: |
+      <p>p5.sound object or a web audio unit
+                             that outputs sound</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5.SoundRecorder
+chainable: false
+---
+
+
+# setInput
diff --git a/src/content/reference/en/p5.SoundRecorder/stop.mdx b/src/content/reference/en/p5.SoundRecorder/stop.mdx
new file mode 100644
index 0000000000..a2cc40683e
--- /dev/null
+++ b/src/content/reference/en/p5.SoundRecorder/stop.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: stop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Stop the recording. Once the recording is stopped,
+  the results will be sent to the p5.SoundFile that
+  was given on .record(), and if a callback function
+  was provided on record, that function will be called.</p>
+line: 10739
+itemtype: method
+class: p5.SoundRecorder
+chainable: false
+---
+
+
+# stop
diff --git a/src/content/reference/en/p5.Table/addColumn.mdx b/src/content/reference/en/p5.Table/addColumn.mdx
new file mode 100644
index 0000000000..1a89e8f89f
--- /dev/null
+++ b/src/content/reference/en/p5.Table/addColumn.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addColumn
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p>Use <a href="#/p5/addColumn">addColumn()</a> to add a new column to a <a
+  href="#/p5.Table">Table</a> object.
+
+  Typically, you will want to specify a title, so the column
+
+  may be easily referenced later by name. (If no title is
+
+  specified, the new column's title will be null.)</p>
+line: 631
+params:
+  - name: title
+    description: |
+      <p>title of the given column</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     table.addColumn('carnivore');
+     table.set(0, 'carnivore', 'no');
+     table.set(1, 'carnivore', 'yes');
+     table.set(2, 'carnivore', 'no');
+
+     //print the results
+     for (let r = 0; r < table.getRowCount(); r++)
+       for (let c = 0; c < table.getColumnCount(); c++)
+         print(table.getString(r, c));
+
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# addColumn
diff --git a/src/content/reference/en/p5.Table/addRow.mdx b/src/content/reference/en/p5.Table/addRow.mdx
new file mode 100644
index 0000000000..51fa7798cd
--- /dev/null
+++ b/src/content/reference/en/p5.Table/addRow.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addRow
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p>Use <a href="#/p5/addRow">addRow()</a> to add a new row of data to a <a
+  href="#/p5.Table">p5.Table</a> object. By default,
+
+  an empty row is created. Typically, you would store a reference to
+
+  the new row in a TableRow object (see newRow in the example above),
+
+  and then set individual values using <a href="#/p5/set">set()</a>.</p>
+
+  <p>If a <a href="#/p5.TableRow">p5.TableRow</a> object is included as a
+  parameter, then that row is
+
+  duplicated and added to the table.</p>
+line: 90
+params:
+  - name: row
+    description: |
+      <p>row to be added to the table</p>
+    type: p5.TableRow
+    optional: true
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     //add a row
+     let newRow = table.addRow();
+     newRow.setString('id', table.getRowCount() - 1);
+     newRow.setString('species', 'Canis Lupus');
+     newRow.setString('name', 'Wolf');
+
+     //print the results
+     for (let r = 0; r < table.getRowCount(); r++)
+       for (let c = 0; c < table.getColumnCount(); c++)
+         print(table.getString(r, c));
+
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+return:
+  description: the row that was added
+  type: p5.TableRow
+chainable: false
+---
+
+
+# addRow
diff --git a/src/content/reference/en/p5.Table/clearRows.mdx b/src/content/reference/en/p5.Table/clearRows.mdx
new file mode 100644
index 0000000000..10221cf585
--- /dev/null
+++ b/src/content/reference/en/p5.Table/clearRows.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clearRows
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Removes all rows from a Table. While all rows are removed,
+  columns and column titles are maintained.</p>
+line: 592
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     table.clearRows();
+     print(table.getRowCount() + ' total rows in table');
+     print(table.getColumnCount() + ' total columns in table');
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# clearRows
diff --git a/src/content/reference/en/p5.Table/columns.mdx b/src/content/reference/en/p5.Table/columns.mdx
new file mode 100644
index 0000000000..66cfbea052
--- /dev/null
+++ b/src/content/reference/en/p5.Table/columns.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: columns
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p>An array containing the names of the columns in the table, if the "header"
+  the table is
+
+  loaded with the "header" parameter.</p>
+line: 43
+itemtype: property
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      //print the column names
+      for (let c = 0; c < table.getColumnCount(); c++) {
+        print('column ' + c + ' is named ' + table.columns[c]);
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# columns
diff --git a/src/content/reference/en/p5.Table/findRow.mdx b/src/content/reference/en/p5.Table/findRow.mdx
new file mode 100644
index 0000000000..f532c69c09
--- /dev/null
+++ b/src/content/reference/en/p5.Table/findRow.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: findRow
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Finds the first row in the Table that contains the value
+  provided, and returns a reference to that row. Even if
+  multiple rows are possible matches, only the first matching
+  row is returned. The column to search may be specified by
+  either its ID or title.</p>
+line: 289
+params:
+  - name: value
+    description: |
+      <p>The value to match</p>
+    type: String
+  - name: column
+    description: |
+      <p>ID number or title of the
+                                     column to search</p>
+    type: Integer|String
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     //find the animal named zebra
+     let row = table.findRow('Zebra', 'name');
+     //find the corresponding species
+     print(row.getString('species'));
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+return:
+  description: ''
+  type: p5.TableRow
+chainable: false
+---
+
+
+# findRow
diff --git a/src/content/reference/en/p5.Table/findRows.mdx b/src/content/reference/en/p5.Table/findRows.mdx
new file mode 100644
index 0000000000..e91930567b
--- /dev/null
+++ b/src/content/reference/en/p5.Table/findRows.mdx
@@ -0,0 +1,68 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: findRows
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Finds the rows in the Table that contain the value
+  provided, and returns references to those rows. Returns an
+  Array, so for must be used to iterate through all the rows,
+  as shown in the example above. The column to search may be
+  specified by either its ID or title.</p>
+line: 351
+params:
+  - name: value
+    description: |
+      <p>The value to match</p>
+    type: String
+  - name: column
+    description: |
+      <p>ID number or title of the
+                                     column to search</p>
+    type: Integer|String
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     //add another goat
+     let newRow = table.addRow();
+     newRow.setString('id', table.getRowCount() - 1);
+     newRow.setString('species', 'Scape Goat');
+     newRow.setString('name', 'Goat');
+
+     //find the rows containing animals named Goat
+     let rows = table.findRows('Goat', 'name');
+     print(rows.length + ' Goats found');
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+return:
+  description: An Array of TableRow objects
+  type: 'p5.TableRow[]'
+chainable: false
+---
+
+
+# findRows
diff --git a/src/content/reference/en/p5.Table/get.mdx b/src/content/reference/en/p5.Table/get.mdx
new file mode 100644
index 0000000000..bba1d1a435
--- /dev/null
+++ b/src/content/reference/en/p5.Table/get.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: get
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Retrieves a value from the Table's specified row and column.
+  The row is specified by its ID, while the column may be specified by
+  either its ID or title.</p>
+line: 1087
+params:
+  - name: row
+    description: |
+      <p>row ID</p>
+    type: Integer
+  - name: column
+    description: |
+      <p>columnName (string) or
+                                        ID (number)</p>
+    type: String|Integer
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      print(table.get(0, 1));
+      //Capra hircus
+      print(table.get(0, 'species'));
+      //Capra hircus
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: String|Number
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5.Table/getArray.mdx b/src/content/reference/en/p5.Table/getArray.mdx
new file mode 100644
index 0000000000..5f3878f4e1
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getArray.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getArray
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Retrieves all table data and returns it as a multidimensional array.</p>
+line: 1285
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leoperd
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      // table is comma separated value "CSV"
+      // and has specifiying header for column labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      let tableArray = table.getArray();
+      for (let i = 0; i < tableArray.length; i++) {
+        print(tableArray[i]);
+      }
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: Array
+chainable: false
+---
+
+
+# getArray
diff --git a/src/content/reference/en/p5.Table/getColumn.mdx b/src/content/reference/en/p5.Table/getColumn.mdx
new file mode 100644
index 0000000000..8aeefc6ff4
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getColumn.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getColumn
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Retrieves all values in the specified column, and returns them
+  as an array. The column may be specified by either its ID or title.</p>
+line: 542
+params:
+  - name: column
+    description: |
+      <p>String or Number of the column to return</p>
+    type: String|Number
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     //getColumn returns an array that can be printed directly
+     print(table.getColumn('species'));
+     //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+return:
+  description: Array of column values
+  type: Array
+chainable: false
+---
+
+
+# getColumn
diff --git a/src/content/reference/en/p5.Table/getColumnCount.mdx b/src/content/reference/en/p5.Table/getColumnCount.mdx
new file mode 100644
index 0000000000..a1fae6afe0
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getColumnCount.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getColumnCount
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Returns the total number of columns in a Table.</p>
+line: 680
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div>
+     <code>
+     // given the cvs file "blobs.csv" in /assets directory
+     // ID, Name, Flavor, Shape, Color
+     // Blob1, Blobby, Sweet, Blob, Pink
+     // Blob2, Saddy, Savory, Blob, Blue
+
+     let table;
+
+     function preload() {
+     table = loadTable('assets/blobs.csv');
+     }
+
+     function setup() {
+     createCanvas(200, 100);
+     textAlign(CENTER);
+     background(255);
+     }
+
+     function draw() {
+     let numOfColumn = table.getColumnCount();
+     text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
+     }
+     </code>
+     </div>
+return:
+  description: Number of columns in this table
+  type: Integer
+chainable: false
+---
+
+
+# getColumnCount
diff --git a/src/content/reference/en/p5.Table/getNum.mdx b/src/content/reference/en/p5.Table/getNum.mdx
new file mode 100644
index 0000000000..eb5e48dc99
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getNum.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getNum
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Retrieves a Float value from the Table's specified row and column.
+  The row is specified by its ID, while the column may be specified by
+  either its ID or title.</p>
+line: 1131
+params:
+  - name: row
+    description: |
+      <p>row ID</p>
+    type: Integer
+  - name: column
+    description: |
+      <p>columnName (string) or
+                                        ID (number)</p>
+    type: String|Integer
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      print(table.getNum(1, 0) + 100);
+      //id 1 + 100 = 101
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: Number
+chainable: false
+---
+
+
+# getNum
diff --git a/src/content/reference/en/p5.Table/getObject.mdx b/src/content/reference/en/p5.Table/getObject.mdx
new file mode 100644
index 0000000000..c414dec60d
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getObject.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getObject
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Retrieves all table data and returns as an object. If a column name is
+  passed in, each row object will be stored with that attribute as its
+  title.</p>
+line: 1223
+params:
+  - name: headerColumn
+    description: |
+      <p>Name of the column which should be used to
+                                   title each row object (optional)</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      let tableObject = table.getObject();
+
+      print(tableObject);
+      //outputs an object
+
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: Object
+chainable: false
+---
+
+
+# getObject
diff --git a/src/content/reference/en/p5.Table/getRow.mdx b/src/content/reference/en/p5.Table/getRow.mdx
new file mode 100644
index 0000000000..3d90850d9f
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getRow.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getRow
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p>Returns a reference to the specified <a
+  href="#/p5.TableRow">p5.TableRow</a>. The reference
+
+  can then be used to get and set values of the selected row.</p>
+line: 198
+params:
+  - name: rowID
+    description: |
+      <p>ID number of the row to get</p>
+    type: Integer
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      let row = table.getRow(1);
+      //print it column by column
+      //note: a row is an object, not an array
+      for (let c = 0; c < table.getColumnCount(); c++) {
+        print(row.getString(c));
+      }
+
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+return:
+  description: <a href="#/p5.TableRow">p5.TableRow</a> object
+  type: p5.TableRow
+chainable: false
+---
+
+
+# getRow
diff --git a/src/content/reference/en/p5.Table/getRowCount.mdx b/src/content/reference/en/p5.Table/getRowCount.mdx
new file mode 100644
index 0000000000..e6d88270c9
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getRowCount.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getRowCount
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Returns the total number of rows in a Table.</p>
+line: 716
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div>
+     <code>
+     // given the cvs file "blobs.csv" in /assets directory
+     //
+     // ID, Name, Flavor, Shape, Color
+     // Blob1, Blobby, Sweet, Blob, Pink
+     // Blob2, Saddy, Savory, Blob, Blue
+
+     let table;
+
+     function preload() {
+     table = loadTable('assets/blobs.csv');
+     }
+
+     function setup() {
+     createCanvas(200, 100);
+     textAlign(CENTER);
+     background(255);
+     }
+
+     function draw() {
+     text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
+     }
+     </code>
+     </div>
+return:
+  description: Number of rows in this table
+  type: Integer
+chainable: false
+---
+
+
+# getRowCount
diff --git a/src/content/reference/en/p5.Table/getRows.mdx b/src/content/reference/en/p5.Table/getRows.mdx
new file mode 100644
index 0000000000..33ce25cbf3
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getRows.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getRows
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p>Gets all rows from the table. Returns an array of <a
+  href="#/p5.TableRow">p5.TableRow</a>s.</p>
+line: 242
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     let rows = table.getRows();
+
+     //warning: rows is an array of objects
+     for (let r = 0; r < rows.length; r++) {
+       rows[r].set('name', 'Unicorn');
+     }
+
+     //print the results
+     for (let r = 0; r < table.getRowCount(); r++)
+       for (let c = 0; c < table.getColumnCount(); c++)
+         print(table.getString(r, c));
+
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+return:
+  description: Array of <a href="#/p5.TableRow">p5.TableRow</a>s
+  type: 'p5.TableRow[]'
+chainable: false
+---
+
+
+# getRows
diff --git a/src/content/reference/en/p5.Table/getString.mdx b/src/content/reference/en/p5.Table/getString.mdx
new file mode 100644
index 0000000000..a31bc70739
--- /dev/null
+++ b/src/content/reference/en/p5.Table/getString.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getString
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Retrieves a String value from the Table's specified row and column.
+  The row is specified by its ID, while the column may be specified by
+  either its ID or title.</p>
+line: 1173
+params:
+  - name: row
+    description: |
+      <p>row ID</p>
+    type: Integer
+  - name: column
+    description: |
+      <p>columnName (string) or
+                                        ID (number)</p>
+    type: String|Integer
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      // table is comma separated value "CSV"
+      // and has specifiying header for column labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      print(table.getString(0, 0)); // 0
+      print(table.getString(0, 1)); // Capra hircus
+      print(table.getString(0, 2)); // Goat
+      print(table.getString(1, 0)); // 1
+      print(table.getString(1, 1)); // Panthera pardus
+      print(table.getString(1, 2)); // Leopard
+      print(table.getString(2, 0)); // 2
+      print(table.getString(2, 1)); // Equus zebra
+      print(table.getString(2, 2)); // Zebra
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: String
+chainable: false
+---
+
+
+# getString
diff --git a/src/content/reference/en/p5.Table/matchRow.mdx b/src/content/reference/en/p5.Table/matchRow.mdx
new file mode 100644
index 0000000000..02b85c6163
--- /dev/null
+++ b/src/content/reference/en/p5.Table/matchRow.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: matchRow
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Finds the first row in the Table that matches the regular
+  expression provided, and returns a reference to that row.
+  Even if multiple rows are possible matches, only the first
+  matching row is returned. The column to search may be
+  specified by either its ID or title.</p>
+line: 417
+params:
+  - name: regexp
+    description: |
+      <p>The regular expression to match</p>
+    type: String|RegExp
+  - name: column
+    description: |
+      <p>The column ID (number) or
+                                       title (string)</p>
+    type: String|Integer
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      //Search using specified regex on a given column, return TableRow object
+      let mammal = table.matchRow(new RegExp('ant'), 1);
+      print(mammal.getString(1));
+      //Output "Panthera pardus"
+    }
+    </code>
+    </div>
+return:
+  description: TableRow object
+  type: p5.TableRow
+chainable: false
+---
+
+
+# matchRow
diff --git a/src/content/reference/en/p5.Table/matchRows.mdx b/src/content/reference/en/p5.Table/matchRows.mdx
new file mode 100644
index 0000000000..2bdcfda7cf
--- /dev/null
+++ b/src/content/reference/en/p5.Table/matchRows.mdx
@@ -0,0 +1,72 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: matchRows
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Finds the rows in the Table that match the regular expression provided,
+  and returns references to those rows. Returns an array, so for must be
+  used to iterate through all the rows, as shown in the example. The
+  column to search may be specified by either its ID or title.</p>
+line: 475
+params:
+  - name: regexp
+    description: |
+      <p>The regular expression to match</p>
+    type: String
+  - name: column
+    description: |
+      <p>The column ID (number) or
+                                       title (string)</p>
+    type: String|Integer
+    optional: true
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let table;
+
+    function setup() {
+      table = new p5.Table();
+
+      table.addColumn('name');
+      table.addColumn('type');
+
+      let newRow = table.addRow();
+      newRow.setString('name', 'Lion');
+      newRow.setString('type', 'Mammal');
+
+      newRow = table.addRow();
+      newRow.setString('name', 'Snake');
+      newRow.setString('type', 'Reptile');
+
+      newRow = table.addRow();
+      newRow.setString('name', 'Mosquito');
+      newRow.setString('type', 'Insect');
+
+      newRow = table.addRow();
+      newRow.setString('name', 'Lizard');
+      newRow.setString('type', 'Reptile');
+
+      let rows = table.matchRows('R.*', 'type');
+      for (let i = 0; i < rows.length; i++) {
+        print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+      }
+    }
+    // Sketch prints:
+    // Snake: Reptile
+    // Lizard: Reptile
+    </code>
+    </div>
+return:
+  description: An Array of TableRow objects
+  type: 'p5.TableRow[]'
+chainable: false
+---
+
+
+# matchRows
diff --git a/src/content/reference/en/p5.Table/removeColumn.mdx b/src/content/reference/en/p5.Table/removeColumn.mdx
new file mode 100644
index 0000000000..3798f0844e
--- /dev/null
+++ b/src/content/reference/en/p5.Table/removeColumn.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeColumn
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p>Use <a href="#/p5/removeColumn">removeColumn()</a> to remove an existing
+  column from a Table
+
+  object. The column to be removed may be identified by either
+
+  its title (a String) or its index value (an int).
+
+  removeColumn(0) would remove the first column, removeColumn(1)
+
+  would remove the second column, and so on.</p>
+line: 888
+params:
+  - name: column
+    description: |
+      <p>columnName (string) or ID (number)</p>
+    type: String|Integer
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     // Given the CSV file "mammals.csv"
+     // in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     table.removeColumn('id');
+     print(table.getColumnCount());
+     describe('no image displayed');
+     }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# removeColumn
diff --git a/src/content/reference/en/p5.Table/removeRow.mdx b/src/content/reference/en/p5.Table/removeRow.mdx
new file mode 100644
index 0000000000..9a47d1c3ab
--- /dev/null
+++ b/src/content/reference/en/p5.Table/removeRow.mdx
@@ -0,0 +1,55 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeRow
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Removes a row from the table object.</p>
+line: 152
+params:
+  - name: id
+    description: |
+      <p>ID number of the row to remove</p>
+    type: Integer
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      //remove the first row
+      table.removeRow(0);
+
+      //print the results
+      for (let r = 0; r < table.getRowCount(); r++)
+        for (let c = 0; c < table.getColumnCount(); c++)
+          print(table.getString(r, c));
+
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# removeRow
diff --git a/src/content/reference/en/p5.Table/removeTokens.mdx b/src/content/reference/en/p5.Table/removeTokens.mdx
new file mode 100644
index 0000000000..d30f40f37b
--- /dev/null
+++ b/src/content/reference/en/p5.Table/removeTokens.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeTokens
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Removes any of the specified characters (or "tokens").</p>
+  <p>If no column is specified, then the values in all columns and
+  rows are processed. A specific column may be referenced by
+  either its ID or title.</p>
+line: 752
+params:
+  - name: chars
+    description: |
+      <p>String listing characters to be removed</p>
+    type: String
+  - name: column
+    description: |
+      <p>Column ID (number)
+                                       or name (string)</p>
+    type: String|Integer
+    optional: true
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender"><code>
+     function setup() {
+     let table = new p5.Table();
+
+     table.addColumn('name');
+     table.addColumn('type');
+
+     let newRow = table.addRow();
+     newRow.setString('name', '   $Lion  ,');
+     newRow.setString('type', ',,,Mammal');
+
+     newRow = table.addRow();
+     newRow.setString('name', '$Snake  ');
+     newRow.setString('type', ',,,Reptile');
+
+     table.removeTokens(',$ ');
+     print(table.getArray());
+     }
+
+     // prints:
+     //  0  "Lion"   "Mamal"
+     //  1  "Snake"  "Reptile"
+     </code></div>
+chainable: false
+---
+
+
+# removeTokens
diff --git a/src/content/reference/en/p5.Table/rows.mdx b/src/content/reference/en/p5.Table/rows.mdx
new file mode 100644
index 0000000000..6cfac953cb
--- /dev/null
+++ b/src/content/reference/en/p5.Table/rows.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rows
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p>An array containing the <a href="#/p5.Table">p5.TableRow</a> objects that
+  make up the
+
+  rows of the table. The same result as calling <a
+  href="#/p5/getRows">getRows()</a></p>
+line: 80
+itemtype: property
+class: p5.Table
+chainable: false
+---
+
+
+# rows
diff --git a/src/content/reference/en/p5.Table/set.mdx b/src/content/reference/en/p5.Table/set.mdx
new file mode 100644
index 0000000000..390c9253d9
--- /dev/null
+++ b/src/content/reference/en/p5.Table/set.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Stores a value in the Table's specified row and column.
+  The row is specified by its ID, while the column may be specified
+  by either its ID or title.</p>
+line: 950
+params:
+  - name: row
+    description: |
+      <p>row ID</p>
+    type: Integer
+  - name: column
+    description: |
+      <p>column ID (Number)
+                                    or title (String)</p>
+    type: String|Integer
+  - name: value
+    description: |
+      <p>value to assign</p>
+    type: String|Number
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      table.set(0, 'species', 'Canis Lupus');
+      table.set(0, 'name', 'Wolf');
+
+      //print the results
+      for (let r = 0; r < table.getRowCount(); r++)
+        for (let c = 0; c < table.getColumnCount(); c++)
+          print(table.getString(r, c));
+
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Table/setNum.mdx b/src/content/reference/en/p5.Table/setNum.mdx
new file mode 100644
index 0000000000..032b3b299b
--- /dev/null
+++ b/src/content/reference/en/p5.Table/setNum.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setNum
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Stores a Float value in the Table's specified row and column.
+  The row is specified by its ID, while the column may be specified
+  by either its ID or title.</p>
+line: 998
+params:
+  - name: row
+    description: |
+      <p>row ID</p>
+    type: Integer
+  - name: column
+    description: |
+      <p>column ID (Number)
+                                    or title (String)</p>
+    type: String|Integer
+  - name: value
+    description: |
+      <p>value to assign</p>
+    type: Number
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Given the CSV file "mammals.csv"
+    // in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      table.setNum(1, 'id', 1);
+
+      print(table.getColumn(0));
+      //["0", 1, "2"]
+
+      describe('no image displayed');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setNum
diff --git a/src/content/reference/en/p5.Table/setString.mdx b/src/content/reference/en/p5.Table/setString.mdx
new file mode 100644
index 0000000000..42592c608e
--- /dev/null
+++ b/src/content/reference/en/p5.Table/setString.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setString
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Stores a String value in the Table's specified row and column.
+  The row is specified by its ID, while the column may be specified
+  by either its ID or title.</p>
+line: 1043
+params:
+  - name: row
+    description: |
+      <p>row ID</p>
+    type: Integer
+  - name: column
+    description: |
+      <p>column ID (Number)
+                                    or title (String)</p>
+    type: String|Integer
+  - name: value
+    description: |
+      <p>value to assign</p>
+    type: String
+itemtype: method
+class: p5.Table
+example:
+  - |-
+
+    <div class="norender"><code>
+    // Given the CSV file "mammals.csv" in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+    }
+
+    function setup() {
+      //add a row
+      let newRow = table.addRow();
+      newRow.setString('id', table.getRowCount() - 1);
+      newRow.setString('species', 'Canis Lupus');
+      newRow.setString('name', 'Wolf');
+
+      print(table.getArray());
+
+      describe('no image displayed');
+    }
+    </code></div>
+chainable: false
+---
+
+
+# setString
diff --git a/src/content/reference/en/p5.Table/trim.mdx b/src/content/reference/en/p5.Table/trim.mdx
new file mode 100644
index 0000000000..c94b184aa0
--- /dev/null
+++ b/src/content/reference/en/p5.Table/trim.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: trim
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: |
+  <p>Trims leading and trailing whitespace, such as spaces and tabs,
+  from String table values. If no column is specified, then the
+  values in all columns and rows are trimmed. A specific column
+  may be referenced by either its ID or title.</p>
+line: 824
+params:
+  - name: column
+    description: |
+      <p>Column ID (number)
+                                       or name (string)</p>
+    type: String|Integer
+    optional: true
+itemtype: method
+class: p5.Table
+example:
+  - |2-
+
+     <div class="norender"><code>
+     function setup() {
+     let table = new p5.Table();
+
+     table.addColumn('name');
+     table.addColumn('type');
+
+     let newRow = table.addRow();
+     newRow.setString('name', '   Lion  ,');
+     newRow.setString('type', ' Mammal  ');
+
+     newRow = table.addRow();
+     newRow.setString('name', '  Snake  ');
+     newRow.setString('type', '  Reptile  ');
+
+     table.trim();
+     print(table.getArray());
+     }
+
+     // prints:
+     //  0  "Lion"   "Mamal"
+     //  1  "Snake"  "Reptile"
+     </code></div>
+chainable: false
+---
+
+
+# trim
diff --git a/src/content/reference/en/p5.TableRow/get.mdx b/src/content/reference/en/p5.TableRow/get.mdx
new file mode 100644
index 0000000000..280567fdbc
--- /dev/null
+++ b/src/content/reference/en/p5.TableRow/get.mdx
@@ -0,0 +1,57 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: get
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>Retrieves a value from the TableRow's specified column.
+  The column may be specified by either its ID or title.</p>
+line: 184
+params:
+  - name: column
+    description: |
+      <p>columnName (string) or
+                                       ID (number)</p>
+    type: String|Integer
+itemtype: method
+class: p5.TableRow
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Given the CSV file "mammals.csv" in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     let names = [];
+     let rows = table.getRows();
+     for (let r = 0; r < rows.length; r++) {
+       names.push(rows[r].get('name'));
+     }
+
+     print(names);
+
+     describe('no image displayed');
+     }
+     </code></div>
+return:
+  description: ''
+  type: String|Number
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5.TableRow/getNum.mdx b/src/content/reference/en/p5.TableRow/getNum.mdx
new file mode 100644
index 0000000000..b9e9bc8322
--- /dev/null
+++ b/src/content/reference/en/p5.TableRow/getNum.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getNum
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>Retrieves a Float value from the TableRow's specified
+  column. The column may be specified by either its ID or
+  title.</p>
+line: 231
+params:
+  - name: column
+    description: |
+      <p>columnName (string) or
+                                       ID (number)</p>
+    type: String|Integer
+itemtype: method
+class: p5.TableRow
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Given the CSV file "mammals.csv" in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     let rows = table.getRows();
+     let minId = Infinity;
+     let maxId = -Infinity;
+     for (let r = 0; r < rows.length; r++) {
+       let id = rows[r].getNum('id');
+       minId = min(minId, id);
+       maxId = min(maxId, id);
+     }
+     print('minimum id = ' + minId + ', maximum id = ' + maxId);
+     describe('no image displayed');
+     }
+     </code></div>
+return:
+  description: Float Floating point number
+  type: Number
+chainable: false
+---
+
+
+# getNum
diff --git a/src/content/reference/en/p5.TableRow/getString.mdx b/src/content/reference/en/p5.TableRow/getString.mdx
new file mode 100644
index 0000000000..2c93a38ba6
--- /dev/null
+++ b/src/content/reference/en/p5.TableRow/getString.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getString
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>Retrieves an String value from the TableRow's specified
+  column. The column may be specified by either its ID or
+  title.</p>
+line: 285
+params:
+  - name: column
+    description: |
+      <p>columnName (string) or
+                                       ID (number)</p>
+    type: String|Integer
+itemtype: method
+class: p5.TableRow
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Given the CSV file "mammals.csv" in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     let rows = table.getRows();
+     let longest = '';
+     for (let r = 0; r < rows.length; r++) {
+       let species = rows[r].getString('species');
+       if (longest.length < species.length) {
+         longest = species;
+       }
+     }
+
+     print('longest: ' + longest);
+
+     describe('no image displayed');
+     }
+     </code></div>
+return:
+  description: String
+  type: String
+chainable: false
+---
+
+
+# getString
diff --git a/src/content/reference/en/p5.TableRow/set.mdx b/src/content/reference/en/p5.TableRow/set.mdx
new file mode 100644
index 0000000000..8c794a21cb
--- /dev/null
+++ b/src/content/reference/en/p5.TableRow/set.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>Stores a value in the TableRow's specified column.
+  The column may be specified by either its ID or title.</p>
+line: 36
+params:
+  - name: column
+    description: |
+      <p>Column ID (Number)
+                                    or Title (String)</p>
+    type: String|Integer
+  - name: value
+    description: |
+      <p>The value to be stored</p>
+    type: String|Number
+itemtype: method
+class: p5.TableRow
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Given the CSV file "mammals.csv" in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     let rows = table.getRows();
+     for (let r = 0; r < rows.length; r++) {
+       rows[r].set('name', 'Unicorn');
+     }
+
+     //print the results
+     print(table.getArray());
+
+     describe('no image displayed');
+     }
+     </code></div>
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.TableRow/setNum.mdx b/src/content/reference/en/p5.TableRow/setNum.mdx
new file mode 100644
index 0000000000..adf8aeec25
--- /dev/null
+++ b/src/content/reference/en/p5.TableRow/setNum.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setNum
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>Stores a Float value in the TableRow's specified column.
+  The column may be specified by either its ID or title.</p>
+line: 97
+params:
+  - name: column
+    description: |
+      <p>Column ID (Number)
+                                    or Title (String)</p>
+    type: String|Integer
+  - name: value
+    description: |
+      <p>The value to be stored
+                                    as a Float</p>
+    type: Number|String
+itemtype: method
+class: p5.TableRow
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Given the CSV file "mammals.csv" in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     let rows = table.getRows();
+     for (let r = 0; r < rows.length; r++) {
+       rows[r].setNum('id', r + 10);
+     }
+
+     print(table.getArray());
+
+     describe('no image displayed');
+     }
+     </code></div>
+chainable: false
+---
+
+
+# setNum
diff --git a/src/content/reference/en/p5.TableRow/setString.mdx b/src/content/reference/en/p5.TableRow/setString.mdx
new file mode 100644
index 0000000000..54e2e0a5a3
--- /dev/null
+++ b/src/content/reference/en/p5.TableRow/setString.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setString
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>Stores a String value in the TableRow's specified column.
+  The column may be specified by either its ID or title.</p>
+line: 140
+params:
+  - name: column
+    description: |
+      <p>Column ID (Number)
+                                    or Title (String)</p>
+    type: String|Integer
+  - name: value
+    description: |
+      <p>The value to be stored
+                                    as a String</p>
+    type: String|Number|Boolean|Object
+itemtype: method
+class: p5.TableRow
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Given the CSV file "mammals.csv" in the project's "assets" folder:
+     //
+     // id,species,name
+     // 0,Capra hircus,Goat
+     // 1,Panthera pardus,Leopard
+     // 2,Equus zebra,Zebra
+
+     let table;
+
+     function preload() {
+     //my table is comma separated value "csv"
+     //and has a header specifying the columns labels
+     table = loadTable('assets/mammals.csv', 'csv', 'header');
+     }
+
+     function setup() {
+     let rows = table.getRows();
+     for (let r = 0; r < rows.length; r++) {
+       let name = rows[r].getString('name');
+       rows[r].setString('name', 'A ' + name + ' named George');
+     }
+
+     print(table.getArray());
+
+     describe('no image displayed');
+     }
+     </code></div>
+chainable: false
+---
+
+
+# setString
diff --git a/src/content/reference/en/p5.TypedDict/clear.mdx b/src/content/reference/en/p5.TypedDict/clear.mdx
new file mode 100644
index 0000000000..f27f921c3a
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/clear.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clear
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Removes all previously stored key-value pairs from the Dictionary.</p>
+line: 245
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createStringDict('p5', 'js');
+      print(myDictionary.hasKey('p5')); // prints 'true'
+      myDictionary.clear();
+      print(myDictionary.hasKey('p5')); // prints 'false'
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# clear
diff --git a/src/content/reference/en/p5.TypedDict/create.mdx b/src/content/reference/en/p5.TypedDict/create.mdx
new file mode 100644
index 0000000000..fcb35ebc84
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/create.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: create
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Creates a new key-value pair in the Dictionary.</p>
+line: 209
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createStringDict('p5', 'js');
+      myDictionary.create('happy', 'coding');
+      myDictionary.print();
+      // above logs "key: p5 - value: js, key: happy - value: coding" to console
+    }
+    </code></div>
+chainable: false
+---
+
+
+# create
diff --git a/src/content/reference/en/p5.TypedDict/get.mdx b/src/content/reference/en/p5.TypedDict/get.mdx
new file mode 100644
index 0000000000..cee8f93a1d
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/get.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: get
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Returns the value stored at the given key.</p>
+line: 145
+params:
+  - name: the
+    description: |
+      <p>key you want to access</p>
+    type: Number|String
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createStringDict('p5', 'js');
+      let myValue = myDictionary.get('p5');
+      print(myValue === 'js'); // logs true to console
+    }
+    </code></div>
+return:
+  description: the value stored at that key
+  type: Number|String
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5.TypedDict/hasKey.mdx b/src/content/reference/en/p5.TypedDict/hasKey.mdx
new file mode 100644
index 0000000000..5a846f3916
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/hasKey.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hasKey
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Returns true if the given key exists in the Dictionary,
+  otherwise returns false.</p>
+line: 123
+params:
+  - name: key
+    description: |
+      <p>that you want to look up</p>
+    type: Number|String
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createStringDict('p5', 'js');
+      print(myDictionary.hasKey('p5')); // logs true to console
+    }
+    </code></div>
+return:
+  description: whether that key exists in Dictionary
+  type: Boolean
+chainable: false
+---
+
+
+# hasKey
diff --git a/src/content/reference/en/p5.TypedDict/print.mdx b/src/content/reference/en/p5.TypedDict/print.mdx
new file mode 100644
index 0000000000..05f1ffec27
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/print.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: print
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: >
+  <p>Logs the set of items currently stored in the Dictionary to the
+  console.</p>
+line: 295
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createStringDict('p5', 'js');
+      myDictionary.create('happy', 'coding');
+      myDictionary.print();
+      // above logs "key: p5 - value: js, key: happy - value: coding" to console
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# print
diff --git a/src/content/reference/en/p5.TypedDict/remove.mdx b/src/content/reference/en/p5.TypedDict/remove.mdx
new file mode 100644
index 0000000000..235debcdcd
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/remove.mdx
@@ -0,0 +1,36 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: remove
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Removes the key-value pair stored at the given key from the Dictionary.</p>
+line: 266
+params:
+  - name: key
+    description: |
+      <p>for the pair to remove</p>
+    type: Number|String
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createStringDict('p5', 'js');
+      myDictionary.create('happy', 'coding');
+      myDictionary.print();
+      // above logs "key: p5 - value: js, key: happy - value: coding" to console
+      myDictionary.remove('p5');
+      myDictionary.print();
+      // above logs "key: happy value: coding" to console
+    }
+    </code></div>
+chainable: false
+---
+
+
+# remove
diff --git a/src/content/reference/en/p5.TypedDict/saveJSON.mdx b/src/content/reference/en/p5.TypedDict/saveJSON.mdx
new file mode 100644
index 0000000000..eddc09202f
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/saveJSON.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveJSON
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Converts the Dictionary into a JSON file for local download.</p>
+line: 357
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+      text('click here to save', 10, 10, 70, 80);
+    }
+
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        createStringDict({
+          john: 1940,
+          paul: 1942,
+          george: 1943,
+          ringo: 1940
+        }).saveJSON('beatles');
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# saveJSON
diff --git a/src/content/reference/en/p5.TypedDict/saveTable.mdx b/src/content/reference/en/p5.TypedDict/saveTable.mdx
new file mode 100644
index 0000000000..e52acfca89
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/saveTable.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveTable
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Converts the Dictionary into a CSV file for local download.</p>
+line: 319
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+      text('click here to save', 10, 10, 70, 80);
+    }
+
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        createStringDict({
+          john: 1940,
+          paul: 1942,
+          george: 1943,
+          ringo: 1940
+        }).saveTable('beatles');
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# saveTable
diff --git a/src/content/reference/en/p5.TypedDict/set.mdx b/src/content/reference/en/p5.TypedDict/set.mdx
new file mode 100644
index 0000000000..fceb7c354e
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/set.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Updates the value associated with the given key in case it already exists
+  in the Dictionary. Otherwise a new key-value pair is added.</p>
+line: 171
+params:
+  - name: key
+    description: ''
+    type: Number|String
+  - name: value
+    description: ''
+    type: Number|String
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createStringDict('p5', 'js');
+      myDictionary.set('p5', 'JS');
+      myDictionary.print(); // logs "key: p5 - value: JS" to console
+    }
+    </code></div>
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.TypedDict/size.mdx b/src/content/reference/en/p5.TypedDict/size.mdx
new file mode 100644
index 0000000000..781a250cc1
--- /dev/null
+++ b/src/content/reference/en/p5.TypedDict/size.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: size
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: >
+  <p>Returns the number of key-value pairs currently stored in the
+  Dictionary.</p>
+line: 102
+itemtype: method
+class: p5.TypedDict
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let myDictionary = createNumberDict(1, 10);
+      myDictionary.create(2, 20);
+      myDictionary.create(3, 30);
+      print(myDictionary.size()); // logs 3 to the console
+    }
+    </code></div>
+return:
+  description: the number of key-value pairs in the Dictionary
+  type: Integer
+chainable: false
+---
+
+
+# size
diff --git a/src/content/reference/en/p5.Vector/add.mdx b/src/content/reference/en/p5.Vector/add.mdx
new file mode 100644
index 0000000000..d683d3069c
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/add.mdx
@@ -0,0 +1,151 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: add
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+  components using separate numbers,
+
+  another <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.
+
+  Calling <code>add()</code> with no arguments has no effect.</p>
+
+  <p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
+  v1)</code>, returns a new
+
+  <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+  originals.</p>
+line: 249
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    // Top left.
+
+    let pos = createVector(25, 25);
+
+    point(pos);
+
+
+    // Top right.
+
+    pos.add(50, 0);
+
+    point(pos);
+
+
+    // Bottom right.
+
+    let p2 = createVector(0, 50);
+
+    pos.add(p2);
+
+    point(pos);
+
+
+    // Bottom left.
+
+    let arr = [-50, 0];
+
+    pos.add(arr);
+
+    point(pos);
+
+
+    describe('Four black dots arranged in a square on a gray background.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Top left.
+
+    let p1 = createVector(25, 25);
+
+
+    // Center.
+
+    let p2 = createVector(50, 50);
+
+
+    // Bottom right.
+
+    let p3 = p5.Vector.add(p1, p2);
+
+
+    strokeWeight(5);
+
+    point(p1);
+
+    point(p2);
+
+    point(p3);
+
+
+    describe('Three black dots in a diagonal line from top left to bottom
+    right.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function draw() {
+      background(200);
+
+      let origin = createVector(0, 0);
+      let v1 = createVector(50, 50);
+      drawArrow(origin, v1, 'red');
+
+      let v2 = createVector(-30, 20);
+      drawArrow(v1, v2, 'blue');
+
+      let v3 = p5.Vector.add(v1, v2);
+      drawArrow(origin, v3, 'purple');
+
+      describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');
+    }
+
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# add
diff --git a/src/content/reference/en/p5.Vector/angleBetween.mdx b/src/content/reference/en/p5.Vector/angleBetween.mdx
new file mode 100644
index 0000000000..4db7d7394e
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/angleBetween.mdx
@@ -0,0 +1,117 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: angleBetween
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Returns the angle between two vectors. The angles returned are signed,
+
+  which means that <code>v1.angleBetween(v2) ===
+  -v2.angleBetween(v1)</code>.</p>
+
+  <p>If the vector was created with
+
+  <a href="#/p5/createVector">createVector()</a>, <code>angleBetween()</code>
+  returns
+
+  angles in the units of the current
+
+  <a href="#/p5/angleMode">angleMode()</a>.</p>
+line: 1797
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(1, 0);
+    let v1 = createVector(0, 1);
+    // Prints "1.570..." to the console.
+    print(v0.angleBetween(v1));
+    // Prints "-1.570..." to the console.
+    print(v1.angleBetween(v0));
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    angleMode(DEGREES);
+    let v0 = createVector(1, 0);
+    let v1 = createVector(0, 1);
+    // Prints "90" to the console.
+    print(v0.angleBetween(v1));
+    // Prints "-90" to the console.
+    print(v1.angleBetween(v0));
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(1, 0);
+    let v1 = createVector(0, 1);
+    // Prints "1.570..." to the console.
+    print(p5.Vector.angleBetween(v0, v1));
+    // Prints "-1.570..." to the console.
+    print(p5.Vector.angleBetween(v1, v0));
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    angleMode(DEGREES);
+    let v0 = createVector(1, 0);
+    let v1 = createVector(0, 1);
+    // Prints "90" to the console.
+    print(p5.Vector.angleBetween(v0, v1));
+    // Prints "-90" to the console.
+    print(p5.Vector.angleBetween(v1, v0));
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let v0 = createVector(50, 50);
+      let v1 = createVector(30, 0);
+      let v2 = createVector(0, 30);
+
+      drawArrow(v0, v1, 'red');
+      drawArrow(v0, v2, 'blue');
+
+      angleMode(RADIANS);
+      let angle = round(v1.angleBetween(v2), 2);
+      text(`Radians: ${angle}`, 20, 20);
+      angleMode(DEGREES);
+      angle = round(v1.angleBetween(v2), 2);
+      text(`Degrees: ${angle}`, 20, 35);
+
+      describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text "Radians: 1.57" and "Degrees: 90" is written above the arrows.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+return:
+  description: angle between the vectors.
+  type: Number
+chainable: false
+---
+
+
+# angleBetween
diff --git a/src/content/reference/en/p5.Vector/array.mdx b/src/content/reference/en/p5.Vector/array.mdx
new file mode 100644
index 0000000000..72c95d6601
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/array.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: array
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Returns the vector's components as an array of numbers.</p>
+line: 2250
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class = "norender">
+    <code>
+    let v = createVector(20, 30);
+    // Prints "[20, 30, 0]" to the console.
+    print(v.array());
+    </code>
+    </div>
+return:
+  description: array with the vector's components.
+  type: 'Number[]'
+chainable: false
+---
+
+
+# array
diff --git a/src/content/reference/en/p5.Vector/copy.mdx b/src/content/reference/en/p5.Vector/copy.mdx
new file mode 100644
index 0000000000..259ecd6c60
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/copy.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: copy
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Returns a copy of the <a href="#/p5.Vector">p5.Vector</a> object.</p>
+line: 217
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div>
+    <code>
+    let pos = createVector(50, 50);
+    let pc = pos.copy();
+
+    strokeWeight(5);
+    point(pc);
+
+    describe('A black point drawn in the middle of a gray square.');
+    </code>
+    </div>
+return:
+  description: copy of the <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# copy
diff --git a/src/content/reference/en/p5.Vector/cross.mdx b/src/content/reference/en/p5.Vector/cross.mdx
new file mode 100644
index 0000000000..72123d16b0
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/cross.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: cross
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Returns the cross product of two vectors. The cross product is a vector
+
+  that points straight out of the plane created by two vectors. The cross
+
+  product's magnitude is the area of the parallelogram formed by the original
+
+  two vectors.</p>
+
+  <p>The static version of <code>cross()</code>, as in <code>p5.Vector.cross(v1,
+  v2)</code>, is the same
+
+  as calling <code>v1.cross(v2)</code>.</p>
+line: 1192
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v1 = createVector(1, 0);
+    let v2 = createVector(3, 4);
+    let cp = v1.cross(v2);
+    // Prints "p5.Vector Object : [0, 0, 4]" to the console.
+    print(cp.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v1 = createVector(1, 0);
+    let v2 = createVector(3, 4);
+    let cp = p5.Vector.cross(v1, v2);
+    // Prints "p5.Vector Object : [0, 0, 4]" to the console.
+    print(cp.toString());
+    </code>
+    </div>
+return:
+  description: cross product as a <a href="#/p5.Vector">p5.Vector</a>.
+  type: p5.Vector
+chainable: false
+---
+
+
+# cross
diff --git a/src/content/reference/en/p5.Vector/dist.mdx b/src/content/reference/en/p5.Vector/dist.mdx
new file mode 100644
index 0000000000..51b7856733
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/dist.mdx
@@ -0,0 +1,89 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: dist
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Returns the distance between two points represented by vectors. A point's
+
+  coordinates can be thought of as a vector's components.</p>
+
+  <p>The static version of <code>dist()</code>, as in <code>p5.Vector.dist(v1,
+  v2)</code>, is the same
+
+  as calling <code>v1.dist(v2)</code>.</p>
+
+  <p>Use <a href="#/p5/dist">dist()</a> to calculate the distance between points
+
+  using coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>
+line: 1236
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v1 = createVector(1, 0);
+    let v2 = createVector(0, 1);
+    let d = v1.dist(v2);
+    // Prints "1.414..." to the console.
+    print(d);
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v1 = createVector(1, 0);
+    let v2 = createVector(0, 1);
+    let d = p5.Vector.dist(v1, v2);
+    // Prints "1.414..." to the console.
+    print(d);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let origin = createVector(0, 0);
+      let v1 = createVector(50, 50);
+      drawArrow(origin, v1, 'red');
+
+      let v2 = createVector(20, 70);
+      drawArrow(origin, v2, 'blue');
+
+      let v3 = p5.Vector.sub(v2, v1);
+      drawArrow(v1, v3, 'purple');
+
+      let m = floor(v3.mag());
+      text(m, 50, 75);
+
+      describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow. The number 36 is written in black near the purple arrow.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+return:
+  description: distance.
+  type: Number
+chainable: false
+---
+
+
+# dist
diff --git a/src/content/reference/en/p5.Vector/div.mdx b/src/content/reference/en/p5.Vector/div.mdx
new file mode 100644
index 0000000000..d38d9662ff
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/div.mdx
@@ -0,0 +1,199 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: div
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+  components by the same number,
+
+  separate numbers, the components of another
+
+  <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers. Calling
+
+  <code>div()</code> with no arguments has no effect.</p>
+
+  <p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v,
+  2)</code>, returns a new
+
+  <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+  originals.</p>
+line: 822
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(50, 50);
+
+    point(p);
+
+
+    p.div(2);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(50, 75);
+
+    point(p);
+
+
+    p.div(2, 3);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(50, 75);
+
+    point(p);
+
+
+    let arr = [2, 3];
+
+    p.div(arr);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(50, 75);
+
+    point(p);
+
+
+    let p2 = createVector(2, 3);
+
+    p.div(p2);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(50, 75);
+
+    point(p);
+
+
+    let p2 = createVector(2, 3);
+
+    let p3 = p5.Vector.div(p, p2);
+
+    point(p3);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function draw() {
+      background(200);
+
+      let origin = createVector(0, 0);
+      let v1 = createVector(50, 50);
+      drawArrow(origin, v1, 'red');
+
+      let v2 = p5.Vector.div(v1, 2);
+      drawArrow(origin, v2, 'blue');
+
+      describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');
+    }
+
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# div
diff --git a/src/content/reference/en/p5.Vector/dot.mdx b/src/content/reference/en/p5.Vector/dot.mdx
new file mode 100644
index 0000000000..9071af6868
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/dot.mdx
@@ -0,0 +1,99 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: dot
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Returns the dot product of two vectors. The dot product is a number that
+
+  describes the overlap between two vectors. Visually, the dot product can be
+
+  thought of as the "shadow" one vector casts on another. The dot product's
+
+  magnitude is largest when two vectors point in the same or opposite
+
+  directions. Its magnitude is 0 when two vectors form a right angle.</p>
+
+  <p>The version of <code>dot()</code> with one parameter interprets it as
+  another
+
+  <a href="#/p5.Vector">p5.Vector</a> object.</p>
+
+  <p>The version of <code>dot()</code> with multiple parameters interprets them
+  as the
+
+  <code>x</code>, <code>y</code>, and <code>z</code> components of another
+  vector.</p>
+
+  <p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1,
+  v2)</code>, is the same
+
+  as calling <code>v1.dot(v2)</code>.</p>
+line: 1103
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v1 = createVector(3, 4);
+    let v2 = createVector(3, 0);
+    let dp = v1.dot(v2);
+    // Prints "9" to the console.
+    print(dp);
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v1 = createVector(1, 0);
+    let v2 = createVector(0, 1);
+    let dp = p5.Vector.dot(v1, v2);
+    // Prints "0" to the console.
+    print(dp);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let v0 = createVector(width / 2, height / 2);
+      let v1 = createVector(30, 0);
+      drawArrow(v0, v1, 'black');
+
+      let v2 = createVector(mouseX - width / 2, mouseY - height / 2);
+      drawArrow(v0, v2, 'red');
+
+      let dp = v2.dot(v1);
+      text(`v2 • v1 = ${dp}`, 15, 20);
+
+      describe('Two arrows drawn on a gray square. A black arrow points to the right and a red arrow follows the mouse. The text "v1 • v2 = something" changes as the mouse moves.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+return:
+  description: dot product.
+  type: Number
+chainable: false
+---
+
+
+# dot
diff --git a/src/content/reference/en/p5.Vector/equals.mdx b/src/content/reference/en/p5.Vector/equals.mdx
new file mode 100644
index 0000000000..352958ad5e
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/equals.mdx
@@ -0,0 +1,80 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: equals
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Returns <code>true</code> if the vector's components are all the same as
+  another
+
+  vector's and <code>false</code> if not.</p>
+
+  <p>The version of <code>equals()</code> with one parameter interprets it as
+  another
+
+  <a href="#/p5.Vector">p5.Vector</a> object.</p>
+
+  <p>The version of <code>equals()</code> with multiple parameters interprets
+  them as the
+
+  components of another vector. Any missing parameters are assigned the value
+
+  0.</p>
+
+  <p>The static version of <code>equals()</code>, as in
+  <code>p5.Vector.equals(v0, v1)</code>,
+
+  interprets both parameters as <a href="#/p5.Vector">p5.Vector</a> objects.</p>
+line: 2268
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(10, 20, 30);
+    let v1 = createVector(10, 20, 30);
+    let v2 = createVector(0, 0, 0);
+
+    // Prints "true" to the console.
+    print(v0.equals(v1));
+    // Prints "false" to the console.
+    print(v0.equals(v2));
+    </code>
+    </div>
+
+    <div class = "norender">
+    <code>
+    let v0 = createVector(5, 10, 20);
+    let v1 = createVector(5, 10, 20);
+    let v2 = createVector(13, 10, 19);
+
+    // Prints "true" to the console.
+    print(v0.equals(v1.x, v1.y, v1.z));
+    // Prints "false" to the console.
+    print(v0.equals(v2.x, v2.y, v2.z));
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(10, 20, 30);
+    let v1 = createVector(10, 20, 30);
+    let v2 = createVector(0, 0, 0);
+
+    // Prints "true" to the console.
+    print(p5.Vector.equals(v0, v1));
+    // Prints "false" to the console.
+    print(p5.Vector.equals(v0, v2));
+    </code>
+    </div>
+return:
+  description: whether the vectors are equal.
+  type: Boolean
+chainable: false
+---
+
+
+# equals
diff --git a/src/content/reference/en/p5.Vector/fromAngle.mdx b/src/content/reference/en/p5.Vector/fromAngle.mdx
new file mode 100644
index 0000000000..9b9ac53b95
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/fromAngle.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: fromAngle
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Make a new 2D vector from an angle.</p>
+line: 2352
+params:
+  - name: angle
+    description: >
+      <p>desired angle, in radians. Unaffected by <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+  - name: length
+    description: |
+      <p>length of the new vector (defaults to 1).</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v = p5.Vector.fromAngle(0);
+    // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let v0 = createVector(50, 50);
+      let v1 = p5.Vector.fromAngle(0, 30);
+
+      drawArrow(v0, v1, 'black');
+
+      describe('A black arrow extends from the center of a gray square. It points to the right.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# fromAngle
diff --git a/src/content/reference/en/p5.Vector/fromAngles.mdx b/src/content/reference/en/p5.Vector/fromAngles.mdx
new file mode 100644
index 0000000000..7b9b4f2ce5
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/fromAngles.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: fromAngles
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Make a new 3D vector from a pair of ISO spherical angles.</p>
+line: 2405
+params:
+  - name: theta
+    description: |
+      <p>polar angle in radians (zero is up).</p>
+    type: Number
+  - name: phi
+    description: |
+      <p>azimuthal angle in radians
+                                    (zero is out of the screen).</p>
+    type: Number
+  - name: length
+    description: |
+      <p>length of the new vector (defaults to 1).</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v = p5.Vector.fromAngles(0, 0);
+    // Prints "p5.Vector Object : [0, -1, 0]" to the console.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(0);
+
+      fill(255);
+      noStroke();
+
+      let theta = frameCount *  0.05;
+      let phi = 0;
+      let v = p5.Vector.fromAngles(theta, phi, 100);
+      let c = color('deeppink');
+      pointLight(c, v);
+
+      sphere(35);
+
+      describe('A light shines on a pink sphere as it orbits.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# fromAngles
diff --git a/src/content/reference/en/p5.Vector/heading.mdx b/src/content/reference/en/p5.Vector/heading.mdx
new file mode 100644
index 0000000000..c4634f56fe
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/heading.mdx
@@ -0,0 +1,95 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: heading
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Calculates the angle a 2D vector makes with the positive x-axis. Angles
+
+  increase in the clockwise direction.</p>
+
+  <p>If the vector was created with
+
+  <a href="#/p5/createVector">createVector()</a>, <code>heading()</code> returns
+  angles
+
+  in the units of the current <a href="#/p5/angleMode">angleMode()</a>.</p>
+
+  <p>The static version of <code>heading()</code>, as in
+  <code>p5.Vector.heading(v)</code>, works the
+
+  same way.</p>
+line: 1530
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class = "norender">
+    <code>
+    let v = createVector(1, 1);
+    // Prints "0.785..." to the console.
+    print(v.heading());
+
+    angleMode(DEGREES);
+    // Prints "45" to the console.
+    print(v.heading());
+    </code>
+    </div>
+
+    <div class = "norender">
+    <code>
+    let v = createVector(1, 1);
+    // Prints "0.785..." to the console.
+    print(p5.Vector.heading(v));
+
+    angleMode(DEGREES);
+    // Prints "45" to the console.
+    print(p5.Vector.heading(v));
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let origin = createVector(0, 0);
+      let v = createVector(50, 50);
+
+      drawArrow(origin, v, 'black');
+
+      angleMode(RADIANS);
+      let h = round(v.heading(), 2);
+      text(`Radians: ${h}`, 20, 70);
+      angleMode(DEGREES);
+      h = v.heading();
+      text(`Degrees: ${h}`, 20, 85);
+
+      describe('A black arrow extends from the top left of a square to its center. The text "Radians: 0.79" and "Degrees: 45" is written near the tip of the arrow.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+return:
+  description: angle of rotation.
+  type: Number
+chainable: false
+---
+
+
+# heading
diff --git a/src/content/reference/en/p5.Vector/lerp.mdx b/src/content/reference/en/p5.Vector/lerp.mdx
new file mode 100644
index 0000000000..765b21b448
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/lerp.mdx
@@ -0,0 +1,97 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: lerp
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code>
+  components that are proportionally the
+
+  same distance between two vectors. The <code>amt</code> parameter is the
+  amount to
+
+  interpolate between the old vector and the new vector. 0.0 keeps all
+
+  components equal to the old vector's, 0.5 is halfway between, and 1.0 sets
+
+  all components equal to the new vector's.</p>
+
+  <p>The static version of <code>lerp()</code>, as in <code>p5.Vector.lerp(v0,
+  v1, 0.5)</code>,
+
+  returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change
+
+  the original.</p>
+line: 1911
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(1, 1, 1);
+    let v1 = createVector(3, 3, 3);
+    v0.lerp(v1, 0.5);
+    // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+    print(v0.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v = createVector(1, 1, 1);
+    v.lerp(3, 3, 3, 0.5);
+    // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(1, 1, 1);
+    let v1 = createVector(3, 3, 3);
+    let v2 = p5.Vector.lerp(v0, v1, 0.5);
+    // Prints "p5.Vector Object : [2, 2, 2]" to the console.
+    print(v2.toString());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let v0 = createVector(50, 50);
+      let v1 = createVector(30, 0);
+      let v2 = createVector(0, 30);
+      let v3 = p5.Vector.lerp(v1, v2, 0.5);
+
+      drawArrow(v0, v1, 'red');
+      drawArrow(v0, v2, 'blue');
+      drawArrow(v0, v3, 'purple');
+
+      describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points down, and a purple arrow points to the bottom right.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# lerp
diff --git a/src/content/reference/en/p5.Vector/limit.mdx b/src/content/reference/en/p5.Vector/limit.mdx
new file mode 100644
index 0000000000..0343cf9d58
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/limit.mdx
@@ -0,0 +1,100 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: limit
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Limits a vector's magnitude to a maximum value.</p>
+
+  <p>The static version of <code>limit()</code>, as in <code>p5.Vector.limit(v,
+  5)</code>, returns a
+
+  new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+  original.</p>
+line: 1388
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div class="norender">
+
+    <code>
+
+    let v = createVector(10, 20, 2);
+
+    v.limit(5);
+
+    // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the
+    console.
+
+    print(v.toString());
+
+    </code>
+
+    </div>
+
+
+    <div class="norender">
+
+    <code>
+
+    let v0 = createVector(10, 20, 2);
+
+    let v1 = p5.Vector.limit(v0, 5);
+
+    // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the
+    console.
+
+    print(v1.toString());
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function draw() {
+      background(240);
+
+      let v0 = createVector(50, 50);
+      let v1 = createVector(mouseX - 50, mouseY - 50);
+
+      let r = 25;
+      drawArrow(v0, v1, 'red');
+      drawArrow(v0, v1.limit(r), 'blue');
+
+      noFill();
+      circle(50, 50, r * 2);
+
+      describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow never crosses the circle's edge.");
+    }
+
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# limit
diff --git a/src/content/reference/en/p5.Vector/mag.mdx b/src/content/reference/en/p5.Vector/mag.mdx
new file mode 100644
index 0000000000..7b4522beb7
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/mag.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mag
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Returns the magnitude (length) of the vector.</p>
+line: 1056
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let p = createVector(30, 40);
+
+    line(0, 0, p.x, p.y);
+
+
+    let m = p.mag();
+
+    text(m, p.x, p.y);
+
+
+    describe('A diagonal black line extends from the top left corner of a gray
+    square. The number 50 is written at the end of the line.');
+
+    </code>
+
+    </div>
+return:
+  description: magnitude of the vector.
+  type: Number
+chainable: false
+---
+
+
+# mag
diff --git a/src/content/reference/en/p5.Vector/magSq.mdx b/src/content/reference/en/p5.Vector/magSq.mdx
new file mode 100644
index 0000000000..123fad921b
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/magSq.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: magSq
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Returns the magnitude (length) of the vector squared.</p>
+line: 1078
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let p = createVector(30, 40);
+
+    line(0, 0, p.x, p.y);
+
+
+    let m = p.magSq();
+
+    text(m, p.x, p.y);
+
+
+    describe('A diagonal black line extends from the top left corner of a gray
+    square. The number 2500 is written at the end of the line.');
+
+    </code>
+
+    </div>
+return:
+  description: squared magnitude of the vector.
+  type: Number
+chainable: false
+---
+
+
+# magSq
diff --git a/src/content/reference/en/p5.Vector/mult.mdx b/src/content/reference/en/p5.Vector/mult.mdx
new file mode 100644
index 0000000000..7a10d4a812
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/mult.mdx
@@ -0,0 +1,199 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mult
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Multiplies a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+  components by the same number,
+
+  separate numbers, the components of another
+
+  <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers. Calling
+
+  <code>mult()</code> with no arguments has no effect.</p>
+
+  <p>The static version of <code>mult()</code>, as in <code>p5.Vector.mult(v,
+  2)</code>, returns a new
+
+  <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+  originals.</p>
+line: 604
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(25, 25);
+
+    point(p);
+
+
+    p.mult(2);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(25, 25);
+
+    point(p);
+
+
+    p.mult(2, 3);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(25, 25);
+
+    point(p);
+
+
+    let arr = [2, 3];
+
+    p.mult(arr);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(25, 25);
+
+    point(p);
+
+
+    let p2 = createVector(2, 3);
+
+    p.mult(p2);
+
+    point(p);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    let p = createVector(25, 25);
+
+    point(p);
+
+
+    let p2 = createVector(2, 3);
+
+    let p3 = p5.Vector.mult(p, p2);
+
+    point(p3);
+
+
+    describe('Two black dots drawn on a gray square. One dot is in the top left
+    corner and the other is in the bottom center.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function draw() {
+      background(200);
+
+      let origin = createVector(0, 0);
+      let v1 = createVector(25, 25);
+      drawArrow(origin, v1, 'red');
+
+      let v2 = p5.Vector.mult(v1, 2);
+      drawArrow(origin, v2, 'blue');
+
+      describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');
+    }
+
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# mult
diff --git a/src/content/reference/en/p5.Vector/normalize.mdx b/src/content/reference/en/p5.Vector/normalize.mdx
new file mode 100644
index 0000000000..73f5e34fd1
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/normalize.mdx
@@ -0,0 +1,110 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: normalize
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Scales the components of a <a href="#/p5.Vector">p5.Vector</a> object so
+
+  that its magnitude is 1.</p>
+
+  <p>The static version of <code>normalize()</code>,  as in
+  <code>p5.Vector.normalize(v)</code>,
+
+  returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change
+
+  the original.</p>
+line: 1314
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div class="norender">
+
+    <code>
+
+    let v = createVector(10, 20, 2);
+
+    v.normalize();
+
+    // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the
+    console.
+
+    print(v.toString());
+
+    </code>
+
+    </div>
+
+
+    <div class="norender">
+
+    <code>
+
+    let v0 = createVector(10, 20, 2);
+
+    let v1 = p5.Vector.normalize(v0);
+
+    // Prints "p5.Vector Object : [10, 20, 2]" to the console.
+
+    print(v0.toString());
+
+    // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the
+    console.
+
+    print(v1.toString());
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function draw() {
+      background(240);
+
+      let v0 = createVector(50, 50);
+      let v1 = createVector(mouseX - 50, mouseY - 50);
+
+      let r = 25;
+      drawArrow(v0, v1, 'red');
+      v1.normalize();
+      drawArrow(v0, v1.mult(r), 'blue');
+
+      noFill();
+      circle(50, 50, r * 2);
+
+      describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow's length is fixed to the circle's radius.");
+    }
+
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+
+    </code>
+
+    </div>
+return:
+  description: normalized <a href="#/p5.Vector">p5.Vector</a>.
+  type: p5.Vector
+chainable: false
+---
+
+
+# normalize
diff --git a/src/content/reference/en/p5.Vector/random2D.mdx b/src/content/reference/en/p5.Vector/random2D.mdx
new file mode 100644
index 0000000000..b3f1e8e808
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/random2D.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: random2D
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Make a new 2D unit vector with a random heading.</p>
+line: 2465
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v = p5.Vector.random2D();
+    // Prints "p5.Vector Object : [x, y, 0]" to the console
+    // where x and y are small random numbers.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      frameRate(1);
+
+      let v0 = createVector(50, 50);
+      let v1 = p5.Vector.random2D();
+      v1.mult(30);
+      drawArrow(v0, v1, 'black');
+
+      describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# random2D
diff --git a/src/content/reference/en/p5.Vector/random3D.mdx b/src/content/reference/en/p5.Vector/random3D.mdx
new file mode 100644
index 0000000000..3cd00d9eb4
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/random3D.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: random3D
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Make a new 3D unit vector with a random heading.</p>
+line: 2516
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v = p5.Vector.random3D();
+    // Prints "p5.Vector Object : [x, y, z]" to the console
+    // where x, y, and z are small random numbers.
+    print(v.toString());
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# random3D
diff --git a/src/content/reference/en/p5.Vector/reflect.mdx b/src/content/reference/en/p5.Vector/reflect.mdx
new file mode 100644
index 0000000000..1e97a46aa7
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/reflect.mdx
@@ -0,0 +1,85 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: reflect
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Reflects a vector about a line in 2D or a plane in 3D. The orientation of
+
+  the line or plane is described by a normal vector that points away from the
+
+  shape.</p>
+
+  <p>The static version of <code>reflect()</code>, as in
+  <code>p5.Vector.reflect(v, n)</code>,
+
+  returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change
+
+  the original.</p>
+line: 2175
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let n = createVector(0, 1);
+    let v = createVector(4, 6);
+    v.reflect(n);
+    // Prints "p5.Vector Object : [4, -6, 0]" to the console.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let n = createVector(0, 1);
+    let v0 = createVector(4, 6);
+    let v1 = p5.Vector.reflect(v0, n);
+    // Prints "p5.Vector Object : [4, -6, 0]" to the console.
+    print(v1.toString());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      line(50, 0, 50, 100);
+      let n = createVector(1, 0);
+
+      let v0 = createVector(50, 50);
+      let v1 = createVector(30, 40);
+      let v2 = p5.Vector.reflect(v1, n);
+
+      n.setMag(30);
+      drawArrow(v0, n, 'black');
+      drawArrow(v0, v1, 'red');
+      drawArrow(v0, v2, 'blue');
+
+      describe('Three arrows extend from the center of a gray square with a vertical line down its middle. A black arrow points to the right, a blue arrow points to the bottom left, and a red arrow points to the bottom right.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# reflect
diff --git a/src/content/reference/en/p5.Vector/rem.mdx b/src/content/reference/en/p5.Vector/rem.mdx
new file mode 100644
index 0000000000..c9969ee08e
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/rem.mdx
@@ -0,0 +1,72 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rem
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Performs modulo (remainder) division with a vector's <code>x</code>,
+  <code>y</code>, and <code>z</code>
+
+  components using separate numbers, another
+
+  <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.</p>
+
+  <p>The static version of <code>rem()</code> as in <code>p5.Vector.rem(v2,
+  v1)</code>, returns a new
+
+  <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+  originals.</p>
+line: 368
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let v = createVector(3, 4, 5);
+    v.rem(2, 3, 4);
+    // Prints 'p5.Vector Object : [1, 1, 1]'.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    let v1 = createVector(3, 4, 5);
+    let v2 = createVector(2, 3, 4);
+    v1.rem(v2);
+
+    // Prints 'p5.Vector Object : [1, 1, 1]'.
+    print(v1.toString());
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    let v = createVector(3, 4, 5);
+    let arr = [2, 3, 4];
+    v.rem(arr);
+
+    // Prints 'p5.Vector Object : [1, 1, 1]'.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v1 = createVector(3, 4, 5);
+    let v2 = createVector(2, 3, 4);
+    let v3 = p5.Vector.rem(v1, v2);
+
+    // Prints 'p5.Vector Object : [1, 1, 1]'.
+    print(v3.toString());
+    </code>
+    </div>
+chainable: true
+---
+
+
+# rem
diff --git a/src/content/reference/en/p5.Vector/rotate.mdx b/src/content/reference/en/p5.Vector/rotate.mdx
new file mode 100644
index 0000000000..eed636dbe6
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/rotate.mdx
@@ -0,0 +1,117 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotate
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Rotates a 2D vector by an angle without changing its magnitude.
+
+  By convention, the positive x-axis has an angle of 0. Angles increase in
+
+  the clockwise direction.</p>
+
+  <p>If the vector was created with
+
+  <a href="#/p5/createVector">createVector()</a>, <code>rotate()</code> uses
+
+  the units of the current <a href="#/p5/angleMode">angleMode()</a>.</p>
+
+  <p>The static version of <code>rotate()</code>, as in
+  <code>p5.Vector.rotate(v, PI)</code>,
+
+  returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change
+
+  the original.</p>
+line: 1689
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v = createVector(1, 0);
+    // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+    print(v.toString());
+    v.rotate(HALF_PI);
+    // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    angleMode(DEGREES);
+    let v = createVector(1, 0);
+    // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+    print(v.toString());
+    v.rotate(90);
+    // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(1, 0);
+    let v1 = p5.Vector.rotate(v0, HALF_PI);
+    // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+    print(v0.toString());
+    // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+    print(v1.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    angleMode(DEGREES);
+    let v0 = createVector(1, 0);
+    let v1 = p5.Vector.rotate(v0, 90);
+    // Prints "p5.Vector Object : [1, 0, 0]" to the console.
+    print(v0.toString());
+    // Prints "p5.Vector Object : [0, 1, 0]" to the console.
+    print(v1.toString());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let v0;
+    let v1;
+
+    function setup() {
+      v0 = createVector(50, 50);
+      v1 = createVector(30, 0);
+    }
+
+    function draw() {
+      background(240);
+
+      v1.rotate(0.01);
+
+      drawArrow(v0, v1, 'black');
+
+      describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# rotate
diff --git a/src/content/reference/en/p5.Vector/set.mdx b/src/content/reference/en/p5.Vector/set.mdx
new file mode 100644
index 0000000000..f242d8b217
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/set.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Sets the <code>x</code>, <code>y</code>, and <code>z</code> components of
+  the vector using separate numbers,
+
+  a <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.
+
+  Calling <code>set()</code> with no arguments sets the vector's components to
+  0.</p>
+line: 156
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div>
+    <code>
+    strokeWeight(5);
+
+    // Top left.
+    let pos = createVector(25, 25);
+    point(pos);
+
+    // Top right.
+    pos.set(75, 25);
+    point(pos);
+
+    // Bottom right.
+    let p2 = createVector(75, 75);
+    pos.set(p2);
+    point(pos);
+
+    // Bottom left.
+    let arr = [25, 75];
+    pos.set(arr);
+    point(pos);
+
+    describe('Four black dots arranged in a square on a gray background.');
+    </code>
+    </div>
+chainable: true
+---
+
+
+# set
diff --git a/src/content/reference/en/p5.Vector/setHeading.mdx b/src/content/reference/en/p5.Vector/setHeading.mdx
new file mode 100644
index 0000000000..28fa552e51
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/setHeading.mdx
@@ -0,0 +1,85 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setHeading
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Rotates a 2D vector to a specific angle without changing its magnitude.
+  By convention, the positive x-axis has an angle of 0. Angles increase in
+  the clockwise direction.</p>
+  <p>If the vector was created with
+  <a href="#/p5/createVector">createVector()</a>, <code>setHeading()</code> uses
+  the units of the current <a href="#/p5/angleMode">angleMode()</a>.</p>
+line: 1610
+params:
+  - name: angle
+    description: |
+      <p>angle of rotation.</p>
+    type: Number
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v = createVector(0, 1);
+    // Prints "1.570..." to the console.
+    print(v.heading());
+
+    v.setHeading(PI);
+    // Prints "3.141..." to the console.
+    print(v.heading());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    angleMode(DEGREES);
+    let v = createVector(0, 1);
+    // Prints "90" to the console.
+    print(v.heading());
+
+    v.setHeading(180);
+    // Prints "180" to the console.
+    print(v.heading());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let v0 = createVector(50, 50);
+      let v1 = createVector(30, 0);
+
+      drawArrow(v0, v1, 'red');
+
+      v1.setHeading(HALF_PI);
+      drawArrow(v0, v1, 'blue');
+
+      describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# setHeading
diff --git a/src/content/reference/en/p5.Vector/setMag.mdx b/src/content/reference/en/p5.Vector/setMag.mdx
new file mode 100644
index 0000000000..f93a25cd56
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/setMag.mdx
@@ -0,0 +1,80 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setMag
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Sets a vector's magnitude to a given value.</p>
+
+  <p>The static version of <code>setMag()</code>, as in
+  <code>p5.Vector.setMag(v, 10)</code>, returns
+
+  a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+  original.</p>
+line: 1460
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v = createVector(3, 4, 0);
+    // Prints "5" to the console.
+    print(v.mag());
+
+    v.setMag(10);
+    // Prints "p5.Vector Object : [6, 8, 0]" to the console.
+    print(v.toString());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(3, 4, 0);
+    let v1 = p5.Vector.setMag(v0, 10);
+    // Prints "5" to the console.
+    print(v0.mag());
+    // Prints "p5.Vector Object : [6, 8, 0]" to the console.
+    print(v1.toString());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(240);
+
+      let origin = createVector(0, 0);
+      let v = createVector(50, 50);
+
+      drawArrow(origin, v, 'red');
+
+      v.setMag(30);
+      drawArrow(origin, v, 'blue');
+
+      describe('Two arrows extend from the top left corner of a square toward its center. The red arrow reaches the center and the blue arrow only extends part of the way.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# setMag
diff --git a/src/content/reference/en/p5.Vector/slerp.mdx b/src/content/reference/en/p5.Vector/slerp.mdx
new file mode 100644
index 0000000000..22ad10fb6c
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/slerp.mdx
@@ -0,0 +1,125 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: slerp
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Calculates a new heading and magnitude that are between two vectors. The
+
+  <code>amt</code> parameter is the amount to interpolate between the old vector
+  and
+
+  the new vector. 0.0 keeps the heading and magnitude equal to the old
+
+  vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
+
+  magnitude equal to the new vector's.</p>
+
+  <p><code>slerp()</code> differs from <a href="#/p5.Vector/lerp">lerp()</a>
+  because
+
+  it interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets
+  <code>v0</code>'s
+
+  magnitude to a value halfway between its original magnitude and
+  <code>v1</code>'s.
+
+  Calling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>
+
+  <p>The static version of <code>slerp()</code>, as in <code>p5.Vector.slerp(v0,
+  v1, 0.5)</code>,
+
+  returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change
+
+  the original.</p>
+line: 2009
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(3, 0);
+    // Prints "3" to the console.
+    print(v0.mag());
+    // Prints "0" to the console.
+    print(v0.heading());
+
+    let v1 = createVector(0, 1);
+    // Prints "1" to the console.
+    print(v1.mag());
+    // Prints "1.570..." to the console.
+    print(v1.heading());
+
+    v0.slerp(v1, 0.5);
+    // Prints "2" to the console.
+    print(v0.mag());
+    // Prints "0.785..." to the console.
+    print(v0.heading());
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    let v0 = createVector(3, 0);
+    // Prints "3" to the console.
+    print(v0.mag());
+    // Prints "0" to the console.
+    print(v0.heading());
+
+    let v1 = createVector(0, 1);
+    // Prints "1" to the console.
+    print(v1.mag());
+    // Prints "1.570..." to the console.
+    print(v1.heading());
+
+    let v3 = p5.Vector.slerp(v0, v1, 0.5);
+    // Prints "2" to the console.
+    print(v3.mag());
+    // Prints "0.785..." to the console.
+    print(v3.heading());
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let v0 = createVector(50, 50);
+      let v1 = createVector(20, 0);
+      let v2 = createVector(-40, 0);
+      let v3 = p5.Vector.slerp(v1, v2, 0.5);
+
+      drawArrow(v0, v1, 'red');
+      drawArrow(v0, v2, 'blue');
+      drawArrow(v0, v3, 'purple');
+
+      describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points to the left, and a purple arrow points down.');
+    }
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: p5.Vector
+chainable: false
+---
+
+
+# slerp
diff --git a/src/content/reference/en/p5.Vector/sub.mdx b/src/content/reference/en/p5.Vector/sub.mdx
new file mode 100644
index 0000000000..9f8cb826b9
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/sub.mdx
@@ -0,0 +1,151 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sub
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>Subtracts from a vector's <code>x</code>, <code>y</code>, and
+  <code>z</code> components using separate
+
+  numbers, another <a href="#/p5.Vector">p5.Vector</a> object, or an array of
+
+  numbers. Calling <code>sub()</code> with no arguments has no effect.</p>
+
+  <p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2,
+  v1)</code>, returns a new
+
+  <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+  originals.</p>
+line: 485
+itemtype: method
+class: p5.Vector
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    strokeWeight(5);
+
+
+    // Bottom right.
+
+    let pos = createVector(75, 75);
+
+    point(pos);
+
+
+    // Top right.
+
+    pos.sub(0, 50);
+
+    point(pos);
+
+
+    // Top left.
+
+    let p2 = createVector(50, 0);
+
+    pos.sub(p2);
+
+    point(pos);
+
+
+    // Bottom left.
+
+    let arr = [0, -50];
+
+    pos.sub(arr);
+
+    point(pos);
+
+
+    describe('Four black dots arranged in a square on a gray background.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Bottom right.
+
+    let p1 = createVector(75, 75);
+
+
+    // Center.
+
+    let p2 = createVector(50, 50);
+
+
+    // Top left.
+
+    let p3 = p5.Vector.sub(p1, p2);
+
+
+    strokeWeight(5);
+
+    point(p1);
+
+    point(p2);
+
+    point(p3);
+
+
+    describe('Three black dots in a diagonal line from top left to bottom
+    right.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function draw() {
+      background(200);
+
+      let origin = createVector(0, 0);
+      let v1 = createVector(50, 50);
+      drawArrow(origin, v1, 'red');
+
+      let v2 = createVector(20, 70);
+      drawArrow(origin, v2, 'blue');
+
+      let v3 = p5.Vector.sub(v2, v1);
+      drawArrow(v1, v3, 'purple');
+
+      describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow.');
+    }
+
+
+    function drawArrow(base, vec, myColor) {
+      push();
+      stroke(myColor);
+      strokeWeight(3);
+      fill(myColor);
+      translate(base.x, base.y);
+      line(0, 0, vec.x, vec.y);
+      rotate(vec.heading());
+      let arrowSize = 7;
+      translate(vec.mag() - arrowSize, 0);
+      triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
+      pop();
+    }
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# sub
diff --git a/src/content/reference/en/p5.Vector/toString.mdx b/src/content/reference/en/p5.Vector/toString.mdx
new file mode 100644
index 0000000000..ce44cd0f77
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/toString.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: toString
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>Returns a string representation of a vector. This method is useful for
+  printing vectors to the console while debugging.</p>
+line: 136
+itemtype: method
+class: p5.Vector
+example:
+  - |-
+
+    <div class = "norender">
+    <code>
+    function setup() {
+      let v = createVector(20, 30);
+      // Prints 'p5.Vector Object : [20, 30, 0]'.
+      print(v.toString());
+    }
+    </code>
+    </div>
+return:
+  description: string representation of the vector.
+  type: String
+chainable: false
+---
+
+
+# toString
diff --git a/src/content/reference/en/p5.Vector/x.mdx b/src/content/reference/en/p5.Vector/x.mdx
new file mode 100644
index 0000000000..da989c4a5d
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/x.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: x
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>The x component of the vector</p>
+line: 113
+itemtype: property
+class: p5.Vector
+chainable: false
+---
+
+
+# x
diff --git a/src/content/reference/en/p5.Vector/y.mdx b/src/content/reference/en/p5.Vector/y.mdx
new file mode 100644
index 0000000000..d1b3fb6dc6
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/y.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: 'y'
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>The y component of the vector</p>
+line: 120
+itemtype: property
+class: p5.Vector
+chainable: false
+---
+
+
+# y
diff --git a/src/content/reference/en/p5.Vector/z.mdx b/src/content/reference/en/p5.Vector/z.mdx
new file mode 100644
index 0000000000..4717e00dbf
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/z.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: z
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: |
+  <p>The z component of the vector</p>
+line: 127
+itemtype: property
+class: p5.Vector
+chainable: false
+---
+
+
+# z
diff --git a/src/content/reference/en/p5.XML/addChild.mdx b/src/content/reference/en/p5.XML/addChild.mdx
new file mode 100644
index 0000000000..2511694261
--- /dev/null
+++ b/src/content/reference/en/p5.XML/addChild.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: addChild
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: >
+  <p>Appends a new child to the element. The child can be specified with
+
+  either a String, which will be used as the new tag's name, or as a
+
+  reference to an existing <a href="#/p5.XML">p5.XML</a> object.
+
+  A reference to the newly created child is returned as an <a
+  href="#/p5.XML">p5.XML</a> object.</p>
+line: 368
+params:
+  - name: node
+    description: >
+      <p>a <a href="#/p5.XML">p5.XML</a> Object which will be the child to be
+      added</p>
+    type: p5.XML
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let child = new p5.XML();
+      child.setName('animal');
+      child.setAttribute('id', '3');
+      child.setAttribute('species', 'Ornithorhynchus anatinus');
+      child.setContent('Platypus');
+      xml.addChild(child);
+
+      let animals = xml.getChildren('animal');
+      print(animals[animals.length - 1].getContent());
+    }
+
+    // Sketch prints:
+    // "Goat"
+    // "Leopard"
+    // "Zebra"
+    </code></div>
+chainable: false
+---
+
+
+# addChild
diff --git a/src/content/reference/en/p5.XML/getAttributeCount.mdx b/src/content/reference/en/p5.XML/getAttributeCount.mdx
new file mode 100644
index 0000000000..d911f4c1e3
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getAttributeCount.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getAttributeCount
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: >
+  <p>Counts the specified element's number of attributes, returned as an
+  Number.</p>
+line: 492
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.getAttributeCount());
+    }
+
+    // Sketch prints:
+    // 2
+    </code></div>
+return:
+  description: ''
+  type: Integer
+chainable: false
+---
+
+
+# getAttributeCount
diff --git a/src/content/reference/en/p5.XML/getChild.mdx b/src/content/reference/en/p5.XML/getChild.mdx
new file mode 100644
index 0000000000..8f44c66f0f
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getChild.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getChild
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Returns the first of the element's children that matches the name parameter
+  or the child of the given index.It returns undefined if no matching
+  child is found.</p>
+line: 308
+params:
+  - name: name
+    description: |
+      <p>element name or index</p>
+    type: String|Integer
+itemtype: method
+class: p5.XML
+example:
+  - |-
+    &lt;animal
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.getContent());
+    }
+
+    // Sketch prints:
+    // "Goat"
+    </code></div>
+    <div class='norender'><code>
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let secondChild = xml.getChild(1);
+      print(secondChild.getContent());
+    }
+
+    // Sketch prints:
+    // "Leopard"
+    </code></div>
+return:
+  description: ''
+  type: p5.XML
+chainable: false
+---
+
+
+# getChild
diff --git a/src/content/reference/en/p5.XML/getChildren.mdx b/src/content/reference/en/p5.XML/getChildren.mdx
new file mode 100644
index 0000000000..4725a00d69
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getChildren.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getChildren
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: >
+  <p>Returns all of the element's children as an array of <a
+  href="#/p5.XML">p5.XML</a> objects. When
+
+  the name parameter is specified, then it will return all children that match
+
+  that name.</p>
+line: 258
+params:
+  - name: name
+    description: |
+      <p>element name</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.XML
+example:
+  - |-
+    &lt;animal
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let animals = xml.getChildren('animal');
+
+      for (let i = 0; i < animals.length; i++) {
+        print(animals[i].getContent());
+      }
+    }
+
+    // Sketch prints:
+    // "Goat"
+    // "Leopard"
+    // "Zebra"
+    </code></div>
+return:
+  description: children of the element
+  type: 'p5.XML[]'
+chainable: false
+---
+
+
+# getChildren
diff --git a/src/content/reference/en/p5.XML/getContent.mdx b/src/content/reference/en/p5.XML/getContent.mdx
new file mode 100644
index 0000000000..ae2d255c4f
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getContent.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getContent
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Returns the content of an element. If there is no such content,
+  defaultValue is returned if specified, otherwise null is returned.</p>
+line: 751
+params:
+  - name: defaultValue
+    description: |
+      <p>value returned if no content is found</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.getContent());
+    }
+
+    // Sketch prints:
+    // "Goat"
+    </code></div>
+return:
+  description: ''
+  type: String
+chainable: false
+---
+
+
+# getContent
diff --git a/src/content/reference/en/p5.XML/getName.mdx b/src/content/reference/en/p5.XML/getName.mdx
new file mode 100644
index 0000000000..ab1fb7ae79
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getName.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getName
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Gets the element's full name, which is returned as a String.</p>
+line: 100
+itemtype: method
+class: p5.XML
+example:
+  - |-
+    &lt;animal
+     <div class='norender'><code>
+     // The following short XML file called "mammals.xml" is parsed
+     // in the code below.
+     //
+     // <?xml version="1.0"?>
+     // &lt;mammals&gt;
+     //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+     //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+     //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+     // &lt;/mammals&gt;
+
+     let xml;
+
+     function preload() {
+     xml = loadXML('assets/mammals.xml');
+     }
+
+     function setup() {
+     print(xml.getName());
+     }
+
+     // Sketch prints:
+     // mammals
+     </code></div>
+return:
+  description: the name of the node
+  type: String
+chainable: false
+---
+
+
+# getName
diff --git a/src/content/reference/en/p5.XML/getNum.mdx b/src/content/reference/en/p5.XML/getNum.mdx
new file mode 100644
index 0000000000..b9eb5a10ea
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getNum.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getNum
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Returns an attribute value of the element as an Number. If the defaultValue
+  parameter is specified and the attribute doesn't exist, then defaultValue
+  is returned. If no defaultValue is specified and the attribute doesn't
+  exist, the value 0 is returned.</p>
+line: 616
+params:
+  - name: name
+    description: |
+      <p>the non-null full name of the attribute</p>
+    type: String
+  - name: defaultValue
+    description: |
+      <p>the default value of the attribute</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.getNum('id'));
+    }
+
+    // Sketch prints:
+    // 0
+    </code></div>
+return:
+  description: ''
+  type: Number
+chainable: false
+---
+
+
+# getNum
diff --git a/src/content/reference/en/p5.XML/getParent.mdx b/src/content/reference/en/p5.XML/getParent.mdx
new file mode 100644
index 0000000000..535e5f2403
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getParent.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getParent
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Gets a copy of the element's parent. Returns the parent as another
+  <a href="#/p5.XML">p5.XML</a> object.</p>
+line: 62
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let children = xml.getChildren('animal');
+      let parent = children[1].getParent();
+      print(parent.getName());
+    }
+
+    // Sketch prints:
+    // mammals
+    </code></div>
+return:
+  description: element parent
+  type: p5.XML
+chainable: false
+---
+
+
+# getParent
diff --git a/src/content/reference/en/p5.XML/getString.mdx b/src/content/reference/en/p5.XML/getString.mdx
new file mode 100644
index 0000000000..ede8e4f6ea
--- /dev/null
+++ b/src/content/reference/en/p5.XML/getString.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getString
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Returns an attribute value of the element as an String. If the defaultValue
+  parameter is specified and the attribute doesn't exist, then defaultValue
+  is returned. If no defaultValue is specified and the attribute doesn't
+  exist, null is returned.</p>
+line: 663
+params:
+  - name: name
+    description: |
+      <p>the non-null full name of the attribute</p>
+    type: String
+  - name: defaultValue
+    description: |
+      <p>the default value of the attribute</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.getString('species'));
+    }
+
+    // Sketch prints:
+    // "Capra hircus"
+    </code></div>
+return:
+  description: ''
+  type: String
+chainable: false
+---
+
+
+# getString
diff --git a/src/content/reference/en/p5.XML/hasAttribute.mdx b/src/content/reference/en/p5.XML/hasAttribute.mdx
new file mode 100644
index 0000000000..b839a09110
--- /dev/null
+++ b/src/content/reference/en/p5.XML/hasAttribute.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hasAttribute
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Checks whether or not an element has the specified attribute.</p>
+line: 571
+params:
+  - name: the
+    description: |
+      <p>attribute to be checked</p>
+    type: String
+itemtype: method
+class: p5.XML
+example:
+  - |2-
+
+     <div class='norender'><code>
+     // The following short XML file called "mammals.xml" is parsed
+     // in the code below.
+     //
+     // <?xml version="1.0"?>
+     // &lt;mammals&gt;
+     //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+     //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+     //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+     // &lt;/mammals&gt;
+
+     let xml;
+
+     function preload() {
+     xml = loadXML('assets/mammals.xml');
+     }
+
+     function setup() {
+     let firstChild = xml.getChild('animal');
+     print(firstChild.hasAttribute('species'));
+     print(firstChild.hasAttribute('color'));
+     }
+
+     // Sketch prints:
+     // true
+     // false
+     </code></div>
+return:
+  description: true if attribute found else false
+  type: Boolean
+chainable: false
+---
+
+
+# hasAttribute
diff --git a/src/content/reference/en/p5.XML/hasChildren.mdx b/src/content/reference/en/p5.XML/hasChildren.mdx
new file mode 100644
index 0000000000..d211d32599
--- /dev/null
+++ b/src/content/reference/en/p5.XML/hasChildren.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hasChildren
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Checks whether or not the element has any children, and returns the result
+  as a boolean.</p>
+line: 181
+itemtype: method
+class: p5.XML
+example:
+  - |-
+    &lt;animal
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      print(xml.hasChildren());
+    }
+
+    // Sketch prints:
+    // true
+    </code></div>
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# hasChildren
diff --git a/src/content/reference/en/p5.XML/listAttributes.mdx b/src/content/reference/en/p5.XML/listAttributes.mdx
new file mode 100644
index 0000000000..829ae03e25
--- /dev/null
+++ b/src/content/reference/en/p5.XML/listAttributes.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: listAttributes
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Gets all of the specified element's attributes, and returns them as an
+  array of Strings.</p>
+line: 528
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.listAttributes());
+    }
+
+    // Sketch prints:
+    // ["id", "species"]
+    </code></div>
+return:
+  description: an array of strings containing the names of attributes
+  type: 'String[]'
+chainable: false
+---
+
+
+# listAttributes
diff --git a/src/content/reference/en/p5.XML/listChildren.mdx b/src/content/reference/en/p5.XML/listChildren.mdx
new file mode 100644
index 0000000000..7e6e9f3499
--- /dev/null
+++ b/src/content/reference/en/p5.XML/listChildren.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: listChildren
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: >
+  <p>Get the names of all of the element's children, and returns the names as an
+
+  array of Strings. This is the same as looping through and calling <a
+  href="#/p5.XML/getName">getName()</a>
+
+  on each child element individually.</p>
+line: 217
+itemtype: method
+class: p5.XML
+example:
+  - |-
+    &lt;animal
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      print(xml.listChildren());
+    }
+
+    // Sketch prints:
+    // ["animal", "animal", "animal"]
+    </code></div>
+return:
+  description: names of the children of the element
+  type: 'String[]'
+chainable: false
+---
+
+
+# listChildren
diff --git a/src/content/reference/en/p5.XML/removeChild.mdx b/src/content/reference/en/p5.XML/removeChild.mdx
new file mode 100644
index 0000000000..c88d23fe55
--- /dev/null
+++ b/src/content/reference/en/p5.XML/removeChild.mdx
@@ -0,0 +1,72 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeChild
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Removes the element specified by name or index.</p>
+line: 420
+params:
+  - name: name
+    description: |
+      <p>element name or index</p>
+    type: String|Integer
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      xml.removeChild('animal');
+      let children = xml.getChildren();
+      for (let i = 0; i < children.length; i++) {
+        print(children[i].getContent());
+      }
+    }
+
+    // Sketch prints:
+    // "Leopard"
+    // "Zebra"
+    </code></div>
+    <div class='norender'><code>
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      xml.removeChild(1);
+      let children = xml.getChildren();
+      for (let i = 0; i < children.length; i++) {
+        print(children[i].getContent());
+      }
+    }
+
+    // Sketch prints:
+    // "Goat"
+    // "Zebra"
+    </code></div>
+chainable: false
+---
+
+
+# removeChild
diff --git a/src/content/reference/en/p5.XML/serialize.mdx b/src/content/reference/en/p5.XML/serialize.mdx
new file mode 100644
index 0000000000..5ec5f46ea2
--- /dev/null
+++ b/src/content/reference/en/p5.XML/serialize.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: serialize
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Serializes the element into a string. This function is useful for preparing
+  the content to be sent over a http request or saved to file.</p>
+line: 833
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      print(xml.serialize());
+    }
+
+    // Sketch prints:
+    // <mammals>
+    //   <animal id="0" species="Capra hircus">Goat</animal>
+    //   <animal id="1" species="Panthera pardus">Leopard</animal>
+    //   <animal id="2" species="Equus zebra">Zebra</animal>
+    // </mammals>
+    </code></div>
+return:
+  description: Serialized string of the element
+  type: String
+chainable: false
+---
+
+
+# serialize
diff --git a/src/content/reference/en/p5.XML/setAttribute.mdx b/src/content/reference/en/p5.XML/setAttribute.mdx
new file mode 100644
index 0000000000..5f906a7076
--- /dev/null
+++ b/src/content/reference/en/p5.XML/setAttribute.mdx
@@ -0,0 +1,57 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setAttribute
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Sets the content of an element's attribute. The first parameter specifies
+  the attribute name, while the second specifies the new content.</p>
+line: 710
+params:
+  - name: name
+    description: |
+      <p>the full name of the attribute</p>
+    type: String
+  - name: value
+    description: |
+      <p>the value of the attribute</p>
+    type: Number|String|Boolean
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.getString('species'));
+      firstChild.setAttribute('species', 'Jamides zebra');
+      print(firstChild.getString('species'));
+    }
+
+    // Sketch prints:
+    // "Capra hircus"
+    // "Jamides zebra"
+    </code></div>
+chainable: false
+---
+
+
+# setAttribute
diff --git a/src/content/reference/en/p5.XML/setContent.mdx b/src/content/reference/en/p5.XML/setContent.mdx
new file mode 100644
index 0000000000..abc7a439f0
--- /dev/null
+++ b/src/content/reference/en/p5.XML/setContent.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setContent
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Sets the element's content.</p>
+line: 792
+params:
+  - name: text
+    description: |
+      <p>the new content</p>
+    type: String
+itemtype: method
+class: p5.XML
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let firstChild = xml.getChild('animal');
+      print(firstChild.getContent());
+      firstChild.setContent('Mountain Goat');
+      print(firstChild.getContent());
+    }
+
+    // Sketch prints:
+    // "Goat"
+    // "Mountain Goat"
+    </code></div>
+chainable: false
+---
+
+
+# setContent
diff --git a/src/content/reference/en/p5.XML/setName.mdx b/src/content/reference/en/p5.XML/setName.mdx
new file mode 100644
index 0000000000..f29834dcb2
--- /dev/null
+++ b/src/content/reference/en/p5.XML/setName.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setName
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: |
+  <p>Sets the element's name, which is specified as a String.</p>
+line: 135
+params:
+  - name: the
+    description: |
+      <p>new name of the node</p>
+    type: String
+itemtype: method
+class: p5.XML
+example:
+  - |-
+    &lt;animal
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      print(xml.getName());
+      xml.setName('fish');
+      print(xml.getName());
+    }
+
+    // Sketch prints:
+    // mammals
+    // fish
+    </code></div>
+chainable: false
+---
+
+
+# setName
diff --git a/src/content/reference/en/p5.sound/p5.Amplitude.mdx b/src/content/reference/en/p5.sound/p5.Amplitude.mdx
new file mode 100644
index 0000000000..9c6f7e4a39
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Amplitude.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Amplitude
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Amplitude measures volume between 0.0 and 1.0.
+  Listens to all p5sound by default, or use setInput()
+  to listen to a specific sound source. Accepts an optional
+  smoothing value, which defaults to 0.</p>
+isConstructor: true
+line: 3022
+params:
+  - name: smoothing
+    description: |
+      <p>between 0.0 and .999 to smooth
+                                 amplitude readings (defaults to 0)</p>
+    type: Number
+    optional: true
+memberMethodPreviews:
+  setInput:
+    description: |
+      <p>Connects to the p5sound instance (main output) by default.
+      Optionally, you can pass in a specific source (i.e. a soundfile).</p>
+    path: .././src/content/reference/en//p5.Amplitude/setInput
+  getLevel:
+    description: |
+      <p>Returns a single Amplitude reading at the moment it is called.
+      For continuous readings, run in the draw loop.</p>
+    path: .././src/content/reference/en//p5.Amplitude/getLevel
+  toggleNormalize:
+    description: |
+      <p>Determines whether the results of Amplitude.process() will be
+      Normalized. To normalize, Amplitude finds the difference the
+      loudest reading it has processed and the maximum amplitude of
+      1.0. Amplitude adds this difference to all values to produce
+      results that will reliably map between 0.0 and 1.0. However,
+      if a louder moment occurs, the amount that Normalize adds to
+      all the values will change. Accepts an optional boolean parameter
+      (true or false). Normalizing is off by default.</p>
+    path: .././src/content/reference/en//p5.Amplitude/toggleNormalize
+  smooth:
+    description: |
+      <p>Smooth Amplitude analysis by averaging with the last analysis
+      frame. Off by default.</p>
+    path: .././src/content/reference/en//p5.Amplitude/smooth
+---
+
+
+# p5.Amplitude
diff --git a/src/content/reference/en/p5.sound/p5.AudioIn.mdx b/src/content/reference/en/p5.sound/p5.AudioIn.mdx
new file mode 100644
index 0000000000..00c32467f0
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.AudioIn.mdx
@@ -0,0 +1,112 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.AudioIn
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >-
+  <p>Get audio from an input, i.e. your computer's microphone.</p>
+
+
+  <p>Turn the mic on/off with the start() and stop() methods. When the mic
+
+  is on, its volume can be measured with getLevel or by connecting an
+
+  FFT object.</p>
+
+
+  <p>If you want to hear the AudioIn, use the .connect() method.
+
+  AudioIn does not connect to p5.sound output by default to prevent
+
+  feedback.</p>
+
+
+  <p><em>Note: This uses the <a href="http://caniuse.com/stream">getUserMedia/
+
+  Stream</a> API, which is not supported by certain browsers. Access in Chrome
+  browser
+
+  is limited to localhost and https, but access over http may be
+  limited.</em></p>
+isConstructor: true
+line: 6015
+params:
+  - name: errorCallback
+    description: |
+      <p>A function to call if there is an error
+                                        accessing the AudioIn. For example,
+                                        Safari and iOS devices do not
+                                        currently allow microphone access.</p>
+    type: Function
+    optional: true
+memberMethodPreviews:
+  enabled:
+    description: |
+      <p>Client must allow browser to access their microphone / audioin source.
+      Default: false. Will become true when the client enables access.</p>
+    path: .././src/content/reference/en//p5.AudioIn/enabled
+  amplitude:
+    description: |
+      <p>Input amplitude, connect to it by default but not to master out</p>
+    path: .././src/content/reference/en//p5.AudioIn/amplitude
+  start:
+    description: |
+      <p>Start processing audio input. This enables the use of other
+      AudioIn methods like getLevel(). Note that by default, AudioIn
+      is not connected to p5.sound's output. So you won't hear
+      anything unless you use the connect() method.<br/></p>
+      <p>Certain browsers limit access to the user's microphone. For example,
+      Chrome only allows access from localhost and over https. For this reason,
+      you may want to include an errorCallback—a function that is called in case
+      the browser won't provide mic access.</p>
+    path: .././src/content/reference/en//p5.AudioIn/start
+  stop:
+    description: |
+      <p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().
+      If re-starting, the user may be prompted for permission access.</p>
+    path: .././src/content/reference/en//p5.AudioIn/stop
+  connect:
+    description: |
+      <p>Connect to an audio unit. If no parameter is provided, will
+      connect to the main output (i.e. your speakers).<br/></p>
+    path: .././src/content/reference/en//p5.AudioIn/connect
+  disconnect:
+    description: |
+      <p>Disconnect the AudioIn from all audio units. For example, if
+      connect() had been called, disconnect() will stop sending
+      signal to your speakers.<br/></p>
+    path: .././src/content/reference/en//p5.AudioIn/disconnect
+  getLevel:
+    description: |
+      <p>Read the Amplitude (volume level) of an AudioIn. The AudioIn
+      class contains its own instance of the Amplitude class to help
+      make it easy to get a microphone's volume level. Accepts an
+      optional smoothing value (0.0 < 1.0). <em>NOTE: AudioIn must
+      .start() before using .getLevel().</em><br/></p>
+    path: .././src/content/reference/en//p5.AudioIn/getLevel
+  amp:
+    description: |
+      <p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>
+    path: .././src/content/reference/en//p5.AudioIn/amp
+  getSources:
+    description: |
+      <p>Returns a list of available input sources. This is a wrapper
+      for <a href="https://developer.mozilla.org/
+      en-US/docs/Web/API/MediaDevices/enumerateDevices" target="_blank">
+      MediaDevices.enumerateDevices() - Web APIs | MDN</a>
+      and it returns a Promise.</p>
+    path: .././src/content/reference/en//p5.AudioIn/getSources
+  setSource:
+    description: |
+      <p>Set the input source. Accepts a number representing a
+      position in the array returned by getSources().
+      This is only available in browsers that support
+       <a href="https://developer.mozilla.org/
+       en-US/docs/Web/API/MediaDevices/enumerateDevices" target="_blank">
+       navigator.mediaDevices.enumerateDevices()</a></p>
+    path: .././src/content/reference/en//p5.AudioIn/setSource
+---
+
+
+# p5.AudioIn
diff --git a/src/content/reference/en/p5.sound/p5.AudioVoice.mdx b/src/content/reference/en/p5.sound/p5.AudioVoice.mdx
new file mode 100644
index 0000000000..cf2b0529c9
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.AudioVoice.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.AudioVoice
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Base class for monophonic synthesizers. Any extensions of this class
+  should follow the API and implement the methods below in order to
+  remain compatible with p5.PolySynth();</p>
+isConstructor: true
+line: 11149
+memberMethodPreviews:
+  connect:
+    description: |
+      <p>Connect to p5 objects or Web Audio Nodes</p>
+    path: .././src/content/reference/en//p5.AudioVoice/connect
+  disconnect:
+    description: |
+      <p>Disconnect from soundOut</p>
+    path: .././src/content/reference/en//p5.AudioVoice/disconnect
+---
+
+
+# p5.AudioVoice
diff --git a/src/content/reference/en/p5.sound/p5.BandPass.mdx b/src/content/reference/en/p5.sound/p5.BandPass.mdx
new file mode 100644
index 0000000000..2350e9ef15
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.BandPass.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.BandPass
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Constructor: <code>new p5.BandPass()</code> Filter.
+  This is the same as creating a p5.Filter and then calling
+  its method <code>setType('bandpass')</code>.
+  See p5.Filter for methods.</p>
+isConstructor: true
+line: 6962
+---
+
+
+# p5.BandPass
diff --git a/src/content/reference/en/p5.sound/p5.Compressor.mdx b/src/content/reference/en/p5.sound/p5.Compressor.mdx
new file mode 100644
index 0000000000..2e72d8c1a4
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Compressor.mdx
@@ -0,0 +1,80 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Compressor
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Compressor is an audio effect class that performs dynamics compression
+
+  on an audio input source. This is a very commonly used technique in music
+
+  and sound production. Compression creates an overall louder, richer,
+
+  and fuller sound by lowering the volume of louds and raising that of softs.
+
+  Compression can be used to avoid clipping (sound distortion due to
+
+  peaks in volume) and is especially useful when many sounds are played
+
+  at once. Compression can be used on indivudal sound sources in addition
+
+  to the main output.</p>
+
+  <p>This class extends <a href = "/reference/#/p5.Effect">p5.Effect</a>.
+
+  Methods <a href = "/reference/#/p5.Effect/amp">amp()</a>, <a href =
+  "/reference/#/p5.Effect/chain">chain()</a>,
+
+  <a href = "/reference/#/p5.Effect/drywet">drywet()</a>, <a href =
+  "/reference/#/p5.Effect/connect">connect()</a>, and
+
+  <a href = "/reference/#/p5.Effect/disconnect">disconnect()</a> are
+  available.</p>
+isConstructor: true
+line: 10036
+memberMethodPreviews:
+  compressor:
+    description: >
+      <p>The p5.Compressor is built with a <a
+      href="https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface"
+         target="_blank" title="W3 spec for Dynamics Compressor Node">Web Audio Dynamics Compressor Node
+         </a></p>
+    path: .././src/content/reference/en//p5.Compressor/compressor
+  process:
+    description: |
+      <p>Performs the same function as .connect, but also accepts
+      optional parameters to set compressor's audioParams</p>
+    path: .././src/content/reference/en//p5.Compressor/process
+  set:
+    description: |
+      <p>Set the paramters of a compressor.</p>
+    path: .././src/content/reference/en//p5.Compressor/set
+  attack:
+    description: |
+      <p>Get current attack or set value w/ time ramp</p>
+    path: .././src/content/reference/en//p5.Compressor/attack
+  knee:
+    description: |
+      <p>Get current knee or set value w/ time ramp</p>
+    path: .././src/content/reference/en//p5.Compressor/knee
+  ratio:
+    description: |
+      <p>Get current ratio or set value w/ time ramp</p>
+    path: .././src/content/reference/en//p5.Compressor/ratio
+  threshold:
+    description: |
+      <p>Get current threshold or set value w/ time ramp</p>
+    path: .././src/content/reference/en//p5.Compressor/threshold
+  release:
+    description: |
+      <p>Get current release or set value w/ time ramp</p>
+    path: .././src/content/reference/en//p5.Compressor/release
+  reduction:
+    description: |
+      <p>Return the current reduction value</p>
+    path: .././src/content/reference/en//p5.Compressor/reduction
+---
+
+
+# p5.Compressor
diff --git a/src/content/reference/en/p5.sound/p5.Convolver.mdx b/src/content/reference/en/p5.sound/p5.Convolver.mdx
new file mode 100644
index 0000000000..6493f59e00
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Convolver.mdx
@@ -0,0 +1,90 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Convolver
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>p5.Convolver extends p5.Reverb. It can emulate the sound of real
+  physical spaces through a process called <a href="
+  https://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation">
+  convolution</a>.</p>
+
+  <p>Convolution multiplies any audio input by an "impulse response"
+  to simulate the dispersion of sound over time. The impulse response is
+  generated from an audio file that you provide. One way to
+  generate an impulse response is to pop a balloon in a reverberant space
+  and record the echo. Convolution can also be used to experiment with
+  sound.</p>
+
+  <p>Use the method <code>createConvolution(path)</code> to instantiate a
+  p5.Convolver with a path to your impulse response audio file.</p>
+isConstructor: true
+line: 8549
+params:
+  - name: path
+    description: |
+      <p>path to a sound file</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to call when loading succeeds</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if loading fails.
+                                         This function will receive an error or
+                                         XMLHttpRequest object with information
+                                         about what went wrong.</p>
+    type: Function
+    optional: true
+memberMethodPreviews:
+  convolverNode:
+    description: |
+      <p>Internally, the p5.Convolver uses the a
+      <a href="http://www.w3.org/TR/webaudio/#ConvolverNode">
+      Web Audio Convolver Node</a>.</p>
+    path: .././src/content/reference/en//p5.Convolver/convolverNode
+  impulses:
+    description: |
+      <p>If you load multiple impulse files using the .addImpulse method,
+      they will be stored as Objects in this Array. Toggle between them
+      with the <code>toggleImpulse(id)</code> method.</p>
+    path: .././src/content/reference/en//p5.Convolver/impulses
+  process:
+    description: |
+      <p>Connect a source to the convolver.</p>
+    path: .././src/content/reference/en//p5.Convolver/process
+  addImpulse:
+    description: |
+      <p>Load and assign a new Impulse Response to the p5.Convolver.
+      The impulse is added to the <code>.impulses</code> array. Previous
+      impulses can be accessed with the <code>.toggleImpulse(id)</code>
+      method.</p>
+    path: .././src/content/reference/en//p5.Convolver/addImpulse
+  resetImpulse:
+    description: |
+      <p>Similar to .addImpulse, except that the <code>.impulses</code>
+      Array is reset to save memory. A new <code>.impulses</code>
+      array is created with this impulse as the only item.</p>
+    path: .././src/content/reference/en//p5.Convolver/resetImpulse
+  toggleImpulse:
+    description: |
+      <p>If you have used <code>.addImpulse()</code> to add multiple impulses
+      to a p5.Convolver, then you can use this method to toggle between
+      the items in the <code>.impulses</code> Array. Accepts a parameter
+      to identify which impulse you wish to use, identified either by its
+      original filename (String) or by its position in the <code>.impulses
+      </code> Array (Number).<br/>
+      You can access the objects in the .impulses Array directly. Each
+      Object has two attributes: an <code>.audioBuffer</code> (type:
+      Web Audio <a href="
+      http://webaudio.github.io/web-audio-api/#the-audiobuffer-interface">
+      AudioBuffer)</a> and a <code>.name</code>, a String that corresponds
+      with the original filename.</p>
+    path: .././src/content/reference/en//p5.Convolver/toggleImpulse
+---
+
+
+# p5.Convolver
diff --git a/src/content/reference/en/p5.sound/p5.Delay.mdx b/src/content/reference/en/p5.sound/p5.Delay.mdx
new file mode 100644
index 0000000000..1a41382749
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Delay.mdx
@@ -0,0 +1,98 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Delay
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Delay is an echo effect. It processes an existing sound source,
+
+  and outputs a delayed version of that sound. The p5.Delay can
+
+  produce different effects depending on the delayTime, feedback,
+
+  filter, and type. In the example below, a feedback of 0.5 (the
+
+  default value) will produce a looping delay that decreases in
+
+  volume by 50% each repeat. A filter will cut out the high
+
+  frequencies so that the delay does not sound as piercing as the
+
+  original source.</p>
+
+  <p>This class extends <a href = "/reference/#/p5.Effect">p5.Effect</a>.
+
+  Methods <a href = "/reference/#/p5.Effect/amp">amp()</a>, <a href =
+  "/reference/#/p5.Effect/chain">chain()</a>,
+
+  <a href = "/reference/#/p5.Effect/drywet">drywet()</a>, <a href =
+  "/reference/#/p5.Effect/connect">connect()</a>, and
+
+  <a href = "/reference/#/p5.Effect/disconnect">disconnect()</a> are
+  available.</p>
+isConstructor: true
+line: 7926
+memberMethodPreviews:
+  leftDelay:
+    description: |
+      <p>The p5.Delay is built with two
+      <a href="http://www.w3.org/TR/webaudio/#DelayNode">
+      Web Audio Delay Nodes</a>, one for each stereo channel.</p>
+    path: .././src/content/reference/en//p5.Delay/leftDelay
+  rightDelay:
+    description: |
+      <p>The p5.Delay is built with two
+      <a href="http://www.w3.org/TR/webaudio/#DelayNode">
+      Web Audio Delay Nodes</a>, one for each stereo channel.</p>
+    path: .././src/content/reference/en//p5.Delay/rightDelay
+  process:
+    description: |
+      <p>Add delay to an audio signal according to a set
+      of delay parameters.</p>
+    path: .././src/content/reference/en//p5.Delay/process
+  delayTime:
+    description: |
+      <p>Set the delay (echo) time, in seconds. Usually this value will be
+      a floating point number between 0.0 and 1.0.</p>
+    path: .././src/content/reference/en//p5.Delay/delayTime
+  feedback:
+    description: >
+      <p>Feedback occurs when Delay sends its signal back through its input
+
+      in a loop. The feedback amount determines how much signal to send each
+
+      time through the loop. A feedback greater than 1.0 is not desirable
+      because
+
+      it will increase the overall output each time through the loop,
+
+      creating an infinite feedback loop. The default value is 0.5</p>
+    path: .././src/content/reference/en//p5.Delay/feedback
+  filter:
+    description: |
+      <p>Set a lowpass filter frequency for the delay. A lowpass filter
+      will cut off any frequencies higher than the filter frequency.</p>
+    path: .././src/content/reference/en//p5.Delay/filter
+  setType:
+    description: |
+      <p>Choose a preset type of delay. 'pingPong' bounces the signal
+      from the left to the right channel to produce a stereo effect.
+      Any other parameter will revert to the default delay setting.</p>
+    path: .././src/content/reference/en//p5.Delay/setType
+  amp:
+    description: |
+      <p>Set the output level of the delay effect.</p>
+    path: .././src/content/reference/en//p5.Delay/amp
+  connect:
+    description: |
+      <p>Send output to a p5.sound or web audio object</p>
+    path: .././src/content/reference/en//p5.Delay/connect
+  disconnect:
+    description: |
+      <p>Disconnect all output.</p>
+    path: .././src/content/reference/en//p5.Delay/disconnect
+---
+
+
+# p5.Delay
diff --git a/src/content/reference/en/p5.sound/p5.Distortion.mdx b/src/content/reference/en/p5.sound/p5.Distortion.mdx
new file mode 100644
index 0000000000..5febdc7086
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Distortion.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Distortion
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>A Distortion effect created with a Waveshaper Node,
+
+  with an approach adapted from
+
+  <a
+  href="http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion">Kevin
+  Ennis</a></p>
+
+  <p>This class extends <a href = "/reference/#/p5.Effect">p5.Effect</a>.
+
+  Methods <a href = "/reference/#/p5.Effect/amp">amp()</a>, <a href =
+  "/reference/#/p5.Effect/chain">chain()</a>,
+
+  <a href = "/reference/#/p5.Effect/drywet">drywet()</a>, <a href =
+  "/reference/#/p5.Effect/connect">connect()</a>, and
+
+  <a href = "/reference/#/p5.Effect/disconnect">disconnect()</a> are
+  available.</p>
+isConstructor: true
+line: 10816
+params:
+  - name: amount
+    description: |
+      <p>Unbounded distortion amount.
+                                     Normal values range from 0-1.</p>
+    type: Number
+    optional: true
+    optdefault: '0.25'
+  - name: oversample
+    description: |
+      <p>'none', '2x', or '4x'.</p>
+    type: String
+    optional: true
+    optdefault: '''none'''
+memberMethodPreviews:
+  WaveShaperNode:
+    description: |
+      <p>The p5.Distortion is built with a
+      <a href="http://www.w3.org/TR/webaudio/#WaveShaperNode">
+      Web Audio WaveShaper Node</a>.</p>
+    path: .././src/content/reference/en//p5.Distortion/WaveShaperNode
+  process:
+    description: >
+      <p>Process a sound source, optionally specify amount and oversample
+      values.</p>
+    path: .././src/content/reference/en//p5.Distortion/process
+  set:
+    description: |
+      <p>Set the amount and oversample of the waveshaper distortion.</p>
+    path: .././src/content/reference/en//p5.Distortion/set
+  getAmount:
+    description: |
+      <p>Return the distortion amount, typically between 0-1.</p>
+    path: .././src/content/reference/en//p5.Distortion/getAmount
+  getOversample:
+    description: |
+      <p>Return the oversampling.</p>
+    path: .././src/content/reference/en//p5.Distortion/getOversample
+---
+
+
+# p5.Distortion
diff --git a/src/content/reference/en/p5.sound/p5.EQ.mdx b/src/content/reference/en/p5.sound/p5.EQ.mdx
new file mode 100644
index 0000000000..ccfba9f5ca
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.EQ.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.EQ
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>p5.EQ is an audio effect that performs the function of a multiband
+
+  audio equalizer. Equalization is used to adjust the balance of
+
+  frequency compoenents of an audio signal. This process is commonly used
+
+  in sound production and recording to change the waveform before it reaches
+
+  a sound output device. EQ can also be used as an audio effect to create
+
+  interesting distortions by filtering out parts of the spectrum. p5.EQ is
+
+  built using a chain of Web Audio Biquad Filter Nodes and can be
+
+  instantiated with 3 or 8 bands. Bands can be added or removed from
+
+  the EQ by directly modifying p5.EQ.bands (the array that stores filters).</p>
+
+  <p>This class extends <a href = "/reference/#/p5.Effect">p5.Effect</a>.
+
+  Methods <a href = "/reference/#/p5.Effect/amp">amp()</a>, <a href =
+  "/reference/#/p5.Effect/chain">chain()</a>,
+
+  <a href = "/reference/#/p5.Effect/drywet">drywet()</a>, <a href =
+  "/reference/#/p5.Effect/connect">connect()</a>, and
+
+  <a href = "/reference/#/p5.Effect/disconnect">disconnect()</a> are
+  available.</p>
+isConstructor: true
+line: 7105
+params:
+  - name: _eqsize
+    description: |
+      <p>Constructor will accept 3 or 8, defaults to 3</p>
+    type: Number
+    optional: true
+return:
+  description: p5.EQ object
+  type: Object
+memberMethodPreviews:
+  bands:
+    description: |
+      <p>The p5.EQ is built with abstracted p5.Filter objects.
+      To modify any bands, use methods of the <a
+      href="/reference/#/p5.Filter" title="p5.Filter reference">
+      p5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.
+      Bands are stored in an array, with indices 0 - 3, or 0 - 7</p>
+    path: .././src/content/reference/en//p5.EQ/bands
+  process:
+    description: |
+      <p>Process an input by connecting it to the EQ</p>
+    path: .././src/content/reference/en//p5.EQ/process
+---
+
+
+# p5.EQ
diff --git a/src/content/reference/en/p5.sound/p5.Effect.mdx b/src/content/reference/en/p5.sound/p5.Effect.mdx
new file mode 100644
index 0000000000..4a36b220b2
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Effect.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Effect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Effect is a base class for audio effects in p5. <br>
+
+  This module handles the nodes and methods that are
+
+  common and useful for current and future effects.</p>
+
+  <p>This class is extended by <a
+  href="/reference/#/p5.Distortion">p5.Distortion</a>,
+
+  <a href="/reference/#/p5.Compressor">p5.Compressor</a>,
+
+  <a href="/reference/#/p5.Delay">p5.Delay</a>,
+
+  <a href="/reference/#/p5.Filter">p5.Filter</a>,
+
+  <a href="/reference/#/p5.Reverb">p5.Reverb</a>.</p>
+isConstructor: true
+line: 6423
+params:
+  - name: ac
+    description: |
+      <p>Reference to the audio context of the p5 object</p>
+    type: Object
+    optional: true
+  - name: input
+    description: |
+      <p>Gain Node effect wrapper</p>
+    type: AudioNode
+    optional: true
+  - name: output
+    description: |
+      <p>Gain Node effect wrapper</p>
+    type: AudioNode
+    optional: true
+  - name: _drywet
+    description: |
+      <p>Tone.JS CrossFade node (defaults to value: 1)</p>
+    type: Object
+    optional: true
+  - name: wet
+    description: |
+      <p>Effects that extend this class should connect
+                                   to the wet signal to this gain node, so that dry and wet
+                                   signals are mixed properly.</p>
+    type: AudioNode
+    optional: true
+memberMethodPreviews:
+  amp:
+    description: |
+      <p>Set the output volume of the filter.</p>
+    path: .././src/content/reference/en//p5.Effect/amp
+  chain:
+    description: |
+      <p>Link effects together in a chain
+      Example usage: filter.chain(reverb, delay, panner);
+      May be used with an open-ended number of arguments</p>
+    path: .././src/content/reference/en//p5.Effect/chain
+  drywet:
+    description: |
+      <p>Adjust the dry/wet value.</p>
+    path: .././src/content/reference/en//p5.Effect/drywet
+  connect:
+    description: |
+      <p>Send output to a p5.js-sound, Web Audio Node, or use signal to
+      control an AudioParam</p>
+    path: .././src/content/reference/en//p5.Effect/connect
+  disconnect:
+    description: |
+      <p>Disconnect all output.</p>
+    path: .././src/content/reference/en//p5.Effect/disconnect
+---
+
+
+# p5.Effect
diff --git a/src/content/reference/en/p5.sound/p5.Envelope.mdx b/src/content/reference/en/p5.sound/p5.Envelope.mdx
new file mode 100644
index 0000000000..153ef64bab
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Envelope.mdx
@@ -0,0 +1,160 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Envelope
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >-
+  <p>Envelopes are pre-defined amplitude distribution over time.
+
+  Typically, envelopes are used to control the output volume
+
+  of an object, a series of fades referred to as Attack, Decay,
+
+  Sustain and Release (
+
+  <a
+  href="https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg">ADSR</a>
+
+  ). Envelopes can also control other Web Audio Parameters—for example, a
+  p5.Envelope can
+
+  control an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>
+
+  <p>Use <code><a href="#/p5.Envelope/setRange">setRange</a></code> to change
+  the attack/release level.
+
+  Use <code><a href="#/p5.Envelope/setADSR">setADSR</a></code> to change
+  attackTime, decayTime, sustainPercent and releaseTime.</p>
+
+  <p>Use the <code><a href="#/p5.Envelope/play">play</a></code> method to play
+  the entire envelope,
+
+  the <code><a href="#/p5.Envelope/ramp">ramp</a></code> method for a pingable
+  trigger,
+
+  or <code><a href="#/p5.Envelope/triggerAttack">triggerAttack</a></code>/
+
+  <code><a href="#/p5.Envelope/triggerRelease">triggerRelease</a></code> to
+  trigger noteOn/noteOff.</p>
+isConstructor: true
+line: 4721
+memberMethodPreviews:
+  attackTime:
+    description: |
+      <p>Time until envelope reaches attackLevel</p>
+    path: .././src/content/reference/en//p5.Envelope/attackTime
+  attackLevel:
+    description: |
+      <p>Level once attack is complete.</p>
+    path: .././src/content/reference/en//p5.Envelope/attackLevel
+  decayTime:
+    description: |
+      <p>Time until envelope reaches decayLevel.</p>
+    path: .././src/content/reference/en//p5.Envelope/decayTime
+  decayLevel:
+    description: >
+      <p>Level after decay. The envelope will sustain here until it is
+      released.</p>
+    path: .././src/content/reference/en//p5.Envelope/decayLevel
+  releaseTime:
+    description: |
+      <p>Duration of the release portion of the envelope.</p>
+    path: .././src/content/reference/en//p5.Envelope/releaseTime
+  releaseLevel:
+    description: |
+      <p>Level at the end of the release.</p>
+    path: .././src/content/reference/en//p5.Envelope/releaseLevel
+  set:
+    description: |
+      <p>Reset the envelope with a series of time/value pairs.</p>
+    path: .././src/content/reference/en//p5.Envelope/set
+  setADSR:
+    description: >
+      <p>Set values like a traditional
+
+      <a
+      href="https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg">
+
+      ADSR envelope
+
+      </a>.</p>
+    path: .././src/content/reference/en//p5.Envelope/setADSR
+  setRange:
+    description: |
+      <p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>
+    path: .././src/content/reference/en//p5.Envelope/setRange
+  setInput:
+    description: |
+      <p>Assign a parameter to be controlled by this envelope.
+      If a p5.Sound object is given, then the p5.Envelope will control its
+      output gain. If multiple inputs are provided, the env will
+      control all of them.</p>
+    path: .././src/content/reference/en//p5.Envelope/setInput
+  setExp:
+    description: |
+      <p>Set whether the envelope ramp is linear (default) or exponential.
+      Exponential ramps can be useful because we perceive amplitude
+      and frequency logarithmically.</p>
+    path: .././src/content/reference/en//p5.Envelope/setExp
+  play:
+    description: |-
+      <p>Play tells the envelope to start acting on a given input.
+      If the input is a p5.sound object (i.e. AudioIn, Oscillator,
+      SoundFile), then Envelope will control its output volume.
+      Envelopes can also be used to control any <a href="
+      http://docs.webplatform.org/wiki/apis/webaudio/AudioParam">
+      Web Audio Audio Param.</a></p>
+    path: .././src/content/reference/en//p5.Envelope/play
+  triggerAttack:
+    description: |
+      <p>Trigger the Attack, and Decay portion of the Envelope.
+      Similar to holding down a key on a piano, but it will
+      hold the sustain level until you let go. Input can be
+      any p5.sound object, or a <a href="
+      http://docs.webplatform.org/wiki/apis/webaudio/AudioParam">
+      Web Audio Param</a>.</p>
+    path: .././src/content/reference/en//p5.Envelope/triggerAttack
+  triggerRelease:
+    description: |
+      <p>Trigger the Release of the Envelope. This is similar to releasing
+      the key on a piano and letting the sound fade according to the
+      release level and release time.</p>
+    path: .././src/content/reference/en//p5.Envelope/triggerRelease
+  ramp:
+    description: >
+      <p>Exponentially ramp to a value using the first two
+
+      values from <code><a href="#/p5.Envelope/setADSR">setADSR(attackTime,
+      decayTime)</a></code>
+
+      as <a href="https://en.wikipedia.org/wiki/RC_time_constant">
+
+      time constants</a> for simple exponential ramps.
+
+      If the value is higher than current value, it uses attackTime,
+
+      while a decrease uses decayTime.</p>
+    path: .././src/content/reference/en//p5.Envelope/ramp
+  add:
+    description: |
+      <p>Add a value to the p5.Oscillator's output amplitude,
+      and return the oscillator. Calling this method
+      again will override the initial add() with new values.</p>
+    path: .././src/content/reference/en//p5.Envelope/add
+  mult:
+    description: |
+      <p>Multiply the p5.Envelope's output amplitude
+      by a fixed value. Calling this method
+      again will override the initial mult() with new values.</p>
+    path: .././src/content/reference/en//p5.Envelope/mult
+  scale:
+    description: |
+      <p>Scale this envelope's amplitude values to a given
+      range, and return the envelope. Calling this method
+      again will override the initial scale() with new values.</p>
+    path: .././src/content/reference/en//p5.Envelope/scale
+---
+
+
+# p5.Envelope
diff --git a/src/content/reference/en/p5.sound/p5.FFT.mdx b/src/content/reference/en/p5.sound/p5.FFT.mdx
new file mode 100644
index 0000000000..a04f845d8a
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.FFT.mdx
@@ -0,0 +1,148 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.FFT
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>FFT (Fast Fourier Transform) is an analysis algorithm that
+  isolates individual
+  <a href="https://en.wikipedia.org/wiki/Audio_frequency">
+  audio frequencies</a> within a waveform.</p>
+
+  <p>Once instantiated, a p5.FFT object can return an array based on
+  two types of analyses: <br> • <code>FFT.waveform()</code> computes
+  amplitude values along the time domain. The array indices correspond
+  to samples across a brief moment in time. Each value represents
+  amplitude of the waveform at that sample of time.<br>
+  • <code>FFT.analyze() </code> computes amplitude values along the
+  frequency domain. The array indices correspond to frequencies (i.e.
+  pitches), from the lowest to the highest that humans can hear. Each
+  value represents amplitude at that slice of the frequency spectrum.
+  Use with <code>getEnergy()</code> to measure amplitude at specific
+  frequencies, or within a range of frequencies. </p>
+
+  <p>FFT analyzes a very short snapshot of sound called a sample
+  buffer. It returns an array of amplitude measurements, referred
+  to as <code>bins</code>. The array is 1024 bins long by default.
+  You can change the bin array length, but it must be a power of 2
+  between 16 and 1024 in order for the FFT algorithm to function
+  correctly. The actual size of the FFT buffer is twice the
+  number of bins, so given a standard sample rate, the buffer is
+  2048/44100 seconds long.</p>
+isConstructor: true
+line: 3347
+params:
+  - name: smoothing
+    description: |
+      <p>Smooth results of Freq Spectrum.
+                                    0.0 < smoothing < 1.0.
+                                    Defaults to 0.8.</p>
+    type: Number
+    optional: true
+  - name: bins
+    description: |
+      <p>Length of resulting array.
+                                Must be a power of two between
+                                16 and 1024. Defaults to 1024.</p>
+    type: Number
+    optional: true
+memberMethodPreviews:
+  setInput:
+    description: |
+      <p>Set the input source for the FFT analysis. If no source is
+      provided, FFT will analyze all sound in the sketch.</p>
+    path: .././src/content/reference/en//p5.FFT/setInput
+  waveform:
+    description: >
+      <p>Returns an array of amplitude values (between -1.0 and +1.0) that
+      represent
+
+      a snapshot of amplitude readings in a single buffer. Length will be
+
+      equal to bins (defaults to 1024). Can be used to draw the waveform
+
+      of a sound.</p>
+    path: .././src/content/reference/en//p5.FFT/waveform
+  analyze:
+    description: |
+      <p>Returns an array of amplitude values (between 0 and 255)
+      across the frequency spectrum. Length is equal to FFT bins
+      (1024 by default). The array indices correspond to frequencies
+      (i.e. pitches), from the lowest to the highest that humans can
+      hear. Each value represents amplitude at that slice of the
+      frequency spectrum. Must be called prior to using
+      <code>getEnergy()</code>.</p>
+    path: .././src/content/reference/en//p5.FFT/analyze
+  getEnergy:
+    description: |
+      <p>Returns the amount of energy (volume) at a specific
+      <a href="https://en.wikipedia.org/wiki/Audio_frequency" target="_blank">
+      frequency</a>, or the average amount of energy between two
+      frequencies. Accepts Number(s) corresponding
+      to frequency (in Hz), or a "string" corresponding to predefined
+      frequency ranges ("bass", "lowMid", "mid", "highMid", "treble").
+      Returns a range between 0 (no energy/volume at that frequency) and
+      255 (maximum energy).
+      <em>NOTE: analyze() must be called prior to getEnergy(). analyze()
+      tells the FFT to analyze frequency data, and getEnergy() uses
+      the results to determine the value at a specific frequency or
+      range of frequencies.</em></p></p>
+    path: .././src/content/reference/en//p5.FFT/getEnergy
+  getCentroid:
+    description: |
+      <p>Returns the
+      <a href="http://en.wikipedia.org/wiki/Spectral_centroid" target="_blank">
+      spectral centroid</a> of the input signal.
+      <em>NOTE: analyze() must be called prior to getCentroid(). Analyze()
+      tells the FFT to analyze frequency data, and getCentroid() uses
+      the results determine the spectral centroid.</em></p></p>
+    path: .././src/content/reference/en//p5.FFT/getCentroid
+  smooth:
+    description: |
+      <p>Smooth FFT analysis by averaging with the last analysis frame.</p>
+    path: .././src/content/reference/en//p5.FFT/smooth
+  linAverages:
+    description: |
+      <p>Returns an array of average amplitude values for a given number
+      of frequency bands split equally. N defaults to 16.
+      <em>NOTE: analyze() must be called prior to linAverages(). Analyze()
+      tells the FFT to analyze frequency data, and linAverages() uses
+      the results to group them into a smaller set of averages.</em></p></p>
+    path: .././src/content/reference/en//p5.FFT/linAverages
+  logAverages:
+    description: >
+      <p>Returns an array of average amplitude values of the spectrum, for a
+      given
+
+      set of <a href="https://en.wikipedia.org/wiki/Octave_band"
+      target="_blank">
+
+      Octave Bands</a>
+
+      <em>NOTE: analyze() must be called prior to logAverages(). Analyze()
+
+      tells the FFT to analyze frequency data, and logAverages() uses
+
+      the results to group them into a smaller set of averages.</em></p></p>
+    path: .././src/content/reference/en//p5.FFT/logAverages
+  getOctaveBands:
+    description: >
+      <p>Calculates and Returns the 1/N
+
+      <a href="https://en.wikipedia.org/wiki/Octave_band" target="_blank">Octave
+      Bands</a>
+
+      N defaults to 3 and minimum central frequency to 15.625Hz.
+
+      (1/3 Octave Bands ~= 31 Frequency Bands)
+
+      Setting fCtr0 to a central value of a higher octave will ignore the lower
+      bands
+
+      and produce less frequency groups.</p>
+    path: .././src/content/reference/en//p5.FFT/getOctaveBands
+---
+
+
+# p5.FFT
diff --git a/src/content/reference/en/p5.sound/p5.Filter.mdx b/src/content/reference/en/p5.sound/p5.Filter.mdx
new file mode 100644
index 0000000000..c56837d670
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Filter.mdx
@@ -0,0 +1,101 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Filter
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>A p5.Filter uses a Web Audio Biquad Filter to filter
+
+  the frequency response of an input source. Subclasses
+
+  include:</p>
+
+  <a href="/reference/#/p5.LowPass"><code>p5.LowPass</code></a>:
+
+  Allows frequencies below the cutoff frequency to pass through,
+
+  and attenuates frequencies above the cutoff.<br/>
+
+  <a href="/reference/#/p5.HighPass"><code>p5.HighPass</code></a>:
+
+  The opposite of a lowpass filter. <br/>
+
+  <a href="/reference/#/p5.BandPass"><code>p5.BandPass</code></a>:
+
+  Allows a range of frequencies to pass through and attenuates
+
+  the frequencies below and above this frequency range.<br/>
+
+
+  <p>The <code>.res()</code> method controls either width of the
+
+  bandpass, or resonance of the low/highpass cutoff frequency.</p>
+
+  <p>This class extends <a href = "/reference/#/p5.Effect">p5.Effect</a>.
+
+  Methods <a href = "/reference/#/p5.Effect/amp">amp()</a>, <a href =
+  "/reference/#/p5.Effect/chain">chain()</a>,
+
+  <a href = "/reference/#/p5.Effect/drywet">drywet()</a>, <a href =
+  "/reference/#/p5.Effect/connect">connect()</a>, and
+
+  <a href = "/reference/#/p5.Effect/disconnect">disconnect()</a> are
+  available.</p>
+isConstructor: true
+line: 6628
+params:
+  - name: type
+    description: |
+      <p>'lowpass' (default), 'highpass', 'bandpass'</p>
+    type: String
+    optional: true
+memberMethodPreviews:
+  biquadFilter:
+    description: |
+      <p>The p5.Filter is built with a
+      <a href="http://www.w3.org/TR/webaudio/#BiquadFilterNode">
+      Web Audio BiquadFilter Node</a>.</p>
+    path: .././src/content/reference/en//p5.Filter/biquadFilter
+  process:
+    description: |
+      <p>Filter an audio signal according to a set
+      of filter parameters.</p>
+    path: .././src/content/reference/en//p5.Filter/process
+  set:
+    description: |
+      <p>Set the frequency and the resonance of the filter.</p>
+    path: .././src/content/reference/en//p5.Filter/set
+  freq:
+    description: |
+      <p>Set the filter frequency, in Hz, from 10 to 22050 (the range of
+      human hearing, although in reality most people hear in a narrower
+      range).</p>
+    path: .././src/content/reference/en//p5.Filter/freq
+  res:
+    description: |
+      <p>Controls either width of a bandpass frequency,
+      or the resonance of a low/highpass cutoff frequency.</p>
+    path: .././src/content/reference/en//p5.Filter/res
+  gain:
+    description: |
+      <p>Controls the gain attribute of a Biquad Filter.
+      This is distinctly different from .amp() which is inherited from p5.Effect
+      .amp() controls the volume via the output gain node
+      p5.Filter.gain() controls the gain parameter of a Biquad Filter node.</p>
+    path: .././src/content/reference/en//p5.Filter/gain
+  toggle:
+    description: |
+      <p>Toggle function. Switches between the specified type and allpass</p>
+    path: .././src/content/reference/en//p5.Filter/toggle
+  setType:
+    description: |
+      <p>Set the type of a p5.Filter. Possible types include:
+      "lowpass" (default), "highpass", "bandpass",
+      "lowshelf", "highshelf", "peaking", "notch",
+      "allpass".</p>
+    path: .././src/content/reference/en//p5.Filter/setType
+---
+
+
+# p5.Filter
diff --git a/src/content/reference/en/p5.sound/p5.Gain.mdx b/src/content/reference/en/p5.sound/p5.Gain.mdx
new file mode 100644
index 0000000000..bf20150900
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Gain.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Gain
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>A gain node is usefull to set the relative volume of sound.
+  It's typically used to build mixers.</p>
+isConstructor: true
+line: 10973
+memberMethodPreviews:
+  setInput:
+    description: |
+      <p>Connect a source to the gain node.</p>
+    path: .././src/content/reference/en//p5.Gain/setInput
+  connect:
+    description: |
+      <p>Send output to a p5.sound or web audio object</p>
+    path: .././src/content/reference/en//p5.Gain/connect
+  disconnect:
+    description: |
+      <p>Disconnect all output.</p>
+    path: .././src/content/reference/en//p5.Gain/disconnect
+  amp:
+    description: |
+      <p>Set the output level of the gain node.</p>
+    path: .././src/content/reference/en//p5.Gain/amp
+---
+
+
+# p5.Gain
diff --git a/src/content/reference/en/p5.sound/p5.HighPass.mdx b/src/content/reference/en/p5.sound/p5.HighPass.mdx
new file mode 100644
index 0000000000..8602ba55e1
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.HighPass.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.HighPass
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Constructor: <code>new p5.HighPass()</code> Filter.
+  This is the same as creating a p5.Filter and then calling
+  its method <code>setType('highpass')</code>.
+  See p5.Filter for methods.</p>
+isConstructor: true
+line: 6938
+---
+
+
+# p5.HighPass
diff --git a/src/content/reference/en/p5.sound/p5.LowPass.mdx b/src/content/reference/en/p5.sound/p5.LowPass.mdx
new file mode 100644
index 0000000000..671312bb3b
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.LowPass.mdx
@@ -0,0 +1,17 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.LowPass
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Constructor: <code>new p5.LowPass()</code> Filter.
+  This is the same as creating a p5.Filter and then calling
+  its method <code>setType('lowpass')</code>.
+  See p5.Filter for methods.</p>
+isConstructor: true
+line: 6914
+---
+
+
+# p5.LowPass
diff --git a/src/content/reference/en/p5.sound/p5.MonoSynth.mdx b/src/content/reference/en/p5.sound/p5.MonoSynth.mdx
new file mode 100644
index 0000000000..15ae444ae7
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.MonoSynth.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.MonoSynth
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>A MonoSynth is used as a single voice for sound synthesis.
+  This is a class to be used in conjunction with the PolySynth
+  class. Custom synthetisers should be built inheriting from
+  this class.</p>
+isConstructor: true
+line: 11247
+memberMethodPreviews:
+  attack:
+    description: |
+      <p>Getters and Setters</p>
+    path: .././src/content/reference/en//p5.MonoSynth/attack
+  play:
+    description: |
+      <p>Play tells the MonoSynth to start playing a note. This method schedules
+      the calling of .triggerAttack and .triggerRelease.</p>
+    path: .././src/content/reference/en//p5.MonoSynth/play
+  triggerAttack:
+    description: |
+      <p>Trigger the Attack, and Decay portion of the Envelope.
+      Similar to holding down a key on a piano, but it will
+      hold the sustain level until you let go.</p>
+    path: .././src/content/reference/en//p5.MonoSynth/triggerAttack
+  triggerRelease:
+    description: |
+      <p>Trigger the release of the Envelope. This is similar to releasing
+      the key on a piano and letting the sound fade according to the
+      release level and release time.</p>
+    path: .././src/content/reference/en//p5.MonoSynth/triggerRelease
+  setADSR:
+    description: >
+      <p>Set values like a traditional
+
+      <a
+      href="https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg">
+
+      ADSR envelope
+
+      </a>.</p>
+    path: .././src/content/reference/en//p5.MonoSynth/setADSR
+  amp:
+    description: |
+      <p>MonoSynth amp</p>
+    path: .././src/content/reference/en//p5.MonoSynth/amp
+  connect:
+    description: |
+      <p>Connect to a p5.sound / Web Audio object.</p>
+    path: .././src/content/reference/en//p5.MonoSynth/connect
+  disconnect:
+    description: |
+      <p>Disconnect all outputs</p>
+    path: .././src/content/reference/en//p5.MonoSynth/disconnect
+  dispose:
+    description: |
+      <p>Get rid of the MonoSynth and free up its resources / memory.</p>
+    path: .././src/content/reference/en//p5.MonoSynth/dispose
+---
+
+
+# p5.MonoSynth
diff --git a/src/content/reference/en/p5.sound/p5.Noise.mdx b/src/content/reference/en/p5.sound/p5.Noise.mdx
new file mode 100644
index 0000000000..7902936da6
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Noise.mdx
@@ -0,0 +1,27 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Noise
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Noise is a type of oscillator that generates a buffer with random
+  values.</p>
+isConstructor: true
+line: 5620
+params:
+  - name: type
+    description: |
+      <p>Type of noise can be 'white' (default),
+                           'brown' or 'pink'.</p>
+    type: String
+memberMethodPreviews:
+  setType:
+    description: |
+      <p>Set type of noise to 'white', 'pink' or 'brown'.
+      White is the default.</p>
+    path: .././src/content/reference/en//p5.Noise/setType
+---
+
+
+# p5.Noise
diff --git a/src/content/reference/en/p5.sound/p5.OnsetDetect.mdx b/src/content/reference/en/p5.sound/p5.OnsetDetect.mdx
new file mode 100644
index 0000000000..4cf6a28d36
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.OnsetDetect.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.OnsetDetect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Listen for onsets (a sharp increase in volume) within a given
+  frequency range.</p>
+isConstructor: true
+line: 11624
+params:
+  - name: freqLow
+    description: |
+      <p>Low frequency</p>
+    type: Number
+  - name: freqHigh
+    description: |
+      <p>High frequency</p>
+    type: Number
+  - name: threshold
+    description: |
+      <p>Amplitude threshold between 0 (no energy) and 1 (maximum)</p>
+    type: Number
+  - name: callback
+    description: |
+      <p>Function to call when an onset is detected</p>
+    type: Function
+---
+
+
+# p5.OnsetDetect
diff --git a/src/content/reference/en/p5.sound/p5.Oscillator.mdx b/src/content/reference/en/p5.sound/p5.Oscillator.mdx
new file mode 100644
index 0000000000..e097ea9730
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Oscillator.mdx
@@ -0,0 +1,121 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Oscillator
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>Creates a signal that oscillates between -1.0 and 1.0.
+  By default, the oscillation takes the form of a sinusoidal
+  shape ('sine'). Additional types include 'triangle',
+  'sawtooth' and 'square'. The frequency defaults to
+  440 oscillations per second (440Hz, equal to the pitch of an
+  'A' note).</p>
+
+  <p>Set the type of oscillation with setType(), or by instantiating a
+  specific oscillator: <a href="/reference/#/p5.SinOsc">p5.SinOsc</a>, <a
+  href="/reference/#/p5.TriOsc">p5.TriOsc</a>, <a
+  href="/reference/#/p5.SqrOsc">p5.SqrOsc</a>, or <a
+  href="/reference/#/p5.SawOsc">p5.SawOsc</a>.
+  </p>
+isConstructor: true
+line: 4060
+params:
+  - name: freq
+    description: |
+      <p>frequency defaults to 440Hz</p>
+    type: Number
+    optional: true
+  - name: type
+    description: |
+      <p>type of oscillator. Options:
+                             'sine' (default), 'triangle',
+                             'sawtooth', 'square'</p>
+    type: String
+    optional: true
+memberMethodPreviews:
+  start:
+    description: |
+      <p>Start an oscillator.</p>
+      <p>Starting an oscillator on a user gesture will enable audio in browsers
+      that have a strict autoplay policy, including Chrome and most mobile
+      devices. See also: <code>userStartAudio()</code>.</p>
+    path: .././src/content/reference/en//p5.Oscillator/start
+  stop:
+    description: |
+      <p>Stop an oscillator. Accepts an optional parameter
+      to determine how long (in seconds from now) until the
+      oscillator stops.</p>
+    path: .././src/content/reference/en//p5.Oscillator/stop
+  amp:
+    description: |
+      <p>Set the amplitude between 0 and 1.0. Or, pass in an object
+      such as an oscillator to modulate amplitude with an audio signal.</p>
+    path: .././src/content/reference/en//p5.Oscillator/amp
+  getAmp:
+    description: |
+      <p>Returns the value of output gain</p>
+    path: .././src/content/reference/en//p5.Oscillator/getAmp
+  freq:
+    description: |
+      <p>Set frequency of an oscillator to a value. Or, pass in an object
+      such as an oscillator to modulate the frequency with an audio signal.</p>
+    path: .././src/content/reference/en//p5.Oscillator/freq
+  getFreq:
+    description: |
+      <p>Returns the value of frequency of oscillator</p>
+    path: .././src/content/reference/en//p5.Oscillator/getFreq
+  setType:
+    description: |
+      <p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>
+    path: .././src/content/reference/en//p5.Oscillator/setType
+  getType:
+    description: >
+      <p>Returns  current type of oscillator eg. 'sine', 'triangle', 'sawtooth'
+      or 'square'.</p>
+    path: .././src/content/reference/en//p5.Oscillator/getType
+  connect:
+    description: |
+      <p>Connect to a p5.sound / Web Audio object.</p>
+    path: .././src/content/reference/en//p5.Oscillator/connect
+  disconnect:
+    description: |
+      <p>Disconnect all outputs</p>
+    path: .././src/content/reference/en//p5.Oscillator/disconnect
+  pan:
+    description: |
+      <p>Pan between Left (-1) and Right (1)</p>
+    path: .././src/content/reference/en//p5.Oscillator/pan
+  getPan:
+    description: >
+      <p>Returns the current value of panPosition , between Left (-1) and Right
+      (1)</p>
+    path: .././src/content/reference/en//p5.Oscillator/getPan
+  phase:
+    description: |
+      <p>Set the phase of an oscillator between 0.0 and 1.0.
+      In this implementation, phase is a delay time
+      based on the oscillator's current frequency.</p>
+    path: .././src/content/reference/en//p5.Oscillator/phase
+  add:
+    description: |
+      <p>Add a value to the p5.Oscillator's output amplitude,
+      and return the oscillator. Calling this method again
+      will override the initial add() with a new value.</p>
+    path: .././src/content/reference/en//p5.Oscillator/add
+  mult:
+    description: |
+      <p>Multiply the p5.Oscillator's output amplitude
+      by a fixed value (i.e. turn it up!). Calling this method
+      again will override the initial mult() with a new value.</p>
+    path: .././src/content/reference/en//p5.Oscillator/mult
+  scale:
+    description: |
+      <p>Scale this oscillator's amplitude values to a given
+      range, and return the oscillator. Calling this method
+      again will override the initial scale() with new values.</p>
+    path: .././src/content/reference/en//p5.Oscillator/scale
+---
+
+
+# p5.Oscillator
diff --git a/src/content/reference/en/p5.sound/p5.Panner3D.mdx b/src/content/reference/en/p5.sound/p5.Panner3D.mdx
new file mode 100644
index 0000000000..c4dda39ec5
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Panner3D.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Panner3D
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Panner3D is based on the <a title="Web Audio Panner docs"  href=
+  "https://developer.mozilla.org/en-US/docs/Web/API/PannerNode">
+  Web Audio Spatial Panner Node</a>.
+  This panner is a spatial processing node that allows audio to be positioned
+  and oriented in 3D space.</p>
+  <p>The position is relative to an <a title="Web Audio Listener docs" href=
+  "https://developer.mozilla.org/en-US/docs/Web/API/AudioListener">
+  Audio Context Listener</a>, which can be accessed
+  by <code>p5.soundOut.audiocontext.listener</code></p>
+isConstructor: true
+line: 7602
+memberMethodPreviews:
+  panner:
+    description: |
+      <p><a title="Web Audio Panner docs"  href=
+      "https://developer.mozilla.org/en-US/docs/Web/API/PannerNode">
+      Web Audio Spatial Panner Node</a></p>
+      <p>Properties include<br>
+       <a href="https://www.w3.org/TR/webaudio/#idl-def-PanningModelType">Panning Model</a>
+       : "equal power" or "HRTF"<br>
+       <a href="https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType">DistanceModel</a>
+      : "linear", "inverse", or "exponential"</p>
+    path: .././src/content/reference/en//p5.Panner3D/panner
+  process:
+    description: |
+      <p>Connect an audio sorce</p>
+    path: .././src/content/reference/en//p5.Panner3D/process
+  set:
+    description: |
+      <p>Set the X,Y,Z position of the Panner</p>
+    path: .././src/content/reference/en//p5.Panner3D/set
+  positionX:
+    description: |
+      <p>Getter and setter methods for position coordinates</p>
+    path: .././src/content/reference/en//p5.Panner3D/positionX
+  positionY:
+    description: |
+      <p>Getter and setter methods for position coordinates</p>
+    path: .././src/content/reference/en//p5.Panner3D/positionY
+  positionZ:
+    description: |
+      <p>Getter and setter methods for position coordinates</p>
+    path: .././src/content/reference/en//p5.Panner3D/positionZ
+  orient:
+    description: |
+      <p>Set the X,Y,Z position of the Panner</p>
+    path: .././src/content/reference/en//p5.Panner3D/orient
+  orientX:
+    description: |
+      <p>Getter and setter methods for orient coordinates</p>
+    path: .././src/content/reference/en//p5.Panner3D/orientX
+  orientY:
+    description: |
+      <p>Getter and setter methods for orient coordinates</p>
+    path: .././src/content/reference/en//p5.Panner3D/orientY
+  orientZ:
+    description: |
+      <p>Getter and setter methods for orient coordinates</p>
+    path: .././src/content/reference/en//p5.Panner3D/orientZ
+  setFalloff:
+    description: |
+      <p>Set the rolloff factor and max distance</p>
+    path: .././src/content/reference/en//p5.Panner3D/setFalloff
+  maxDist:
+    description: |
+      <p>Maxium distance between the source and the listener</p>
+    path: .././src/content/reference/en//p5.Panner3D/maxDist
+  rollof:
+    description: >
+      <p>How quickly the volume is reduced as the source moves away from the
+      listener</p>
+    path: .././src/content/reference/en//p5.Panner3D/rollof
+---
+
+
+# p5.Panner3D
diff --git a/src/content/reference/en/p5.sound/p5.Part.mdx b/src/content/reference/en/p5.sound/p5.Part.mdx
new file mode 100644
index 0000000000..a34e104378
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Part.mdx
@@ -0,0 +1,88 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Part
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>A p5.Part plays back one or more p5.Phrases. Instantiate a part
+  with steps and tatums. By default, each step represents a 1/16th note.</p>
+
+  <p>See p5.Phrase for more about musical timing.</p>
+isConstructor: true
+line: 9185
+params:
+  - name: steps
+    description: |
+      <p>Steps in the part</p>
+    type: Number
+    optional: true
+  - name: tatums
+    description: >
+      <p>Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default
+      is 1/16, a sixteenth note)</p>
+    type: Number
+    optional: true
+memberMethodPreviews:
+  setBPM:
+    description: |
+      <p>Set the tempo of this part, in Beats Per Minute.</p>
+    path: .././src/content/reference/en//p5.Part/setBPM
+  getBPM:
+    description: |
+      <p>Returns the tempo, in Beats Per Minute, of this part.</p>
+    path: .././src/content/reference/en//p5.Part/getBPM
+  start:
+    description: |
+      <p>Start playback of this part. It will play
+      through all of its phrases at a speed
+      determined by setBPM.</p>
+    path: .././src/content/reference/en//p5.Part/start
+  loop:
+    description: |
+      <p>Loop playback of this part. It will begin
+      looping through all of its phrases at a speed
+      determined by setBPM.</p>
+    path: .././src/content/reference/en//p5.Part/loop
+  noLoop:
+    description: |
+      <p>Tell the part to stop looping.</p>
+    path: .././src/content/reference/en//p5.Part/noLoop
+  stop:
+    description: >
+      <p>Stop the part and cue it to step 0. Playback will resume from the
+      begining of the Part when it is played again.</p>
+    path: .././src/content/reference/en//p5.Part/stop
+  pause:
+    description: |
+      <p>Pause the part. Playback will resume
+      from the current step.</p>
+    path: .././src/content/reference/en//p5.Part/pause
+  addPhrase:
+    description: |
+      <p>Add a p5.Phrase to this Part.</p>
+    path: .././src/content/reference/en//p5.Part/addPhrase
+  removePhrase:
+    description: |
+      <p>Remove a phrase from this part, based on the name it was
+      given when it was created.</p>
+    path: .././src/content/reference/en//p5.Part/removePhrase
+  getPhrase:
+    description: |
+      <p>Get a phrase from this part, based on the name it was
+      given when it was created. Now you can modify its array.</p>
+    path: .././src/content/reference/en//p5.Part/getPhrase
+  replaceSequence:
+    description: >
+      <p>Find all sequences with the specified name, and replace their patterns
+      with the specified array.</p>
+    path: .././src/content/reference/en//p5.Part/replaceSequence
+  onStep:
+    description: >
+      <p>Set the function that will be called at every step. This will clear the
+      previous function.</p>
+    path: .././src/content/reference/en//p5.Part/onStep
+---
+
+
+# p5.Part
diff --git a/src/content/reference/en/p5.sound/p5.PeakDetect.mdx b/src/content/reference/en/p5.sound/p5.PeakDetect.mdx
new file mode 100644
index 0000000000..26369d49e3
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.PeakDetect.mdx
@@ -0,0 +1,112 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.PeakDetect
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >-
+  <p>PeakDetect works in conjunction with p5.FFT to
+
+  look for onsets in some or all of the frequency spectrum.
+
+  </p>
+
+  <p>
+
+  To use p5.PeakDetect, call <code>update</code> in the draw loop
+
+  and pass in a p5.FFT object.
+
+  </p>
+
+  <p>
+
+  You can listen for a specific part of the frequency spectrum by
+
+  setting the range between <code>freq1</code> and <code>freq2</code>.
+
+  </p>
+
+
+  <p><code>threshold</code> is the threshold for detecting a peak,
+
+  scaled between 0 and 1. It is logarithmic, so 0.1 is half as loud
+
+  as 1.0.</p>
+
+
+  <p>
+
+  The update method is meant to be run in the draw loop, and
+
+  <b>frames</b> determines how many loops must pass before
+
+  another peak can be detected.
+
+  For example, if the frameRate() = 60, you could detect the beat of a
+
+  120 beat-per-minute song with this equation:
+
+  <code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>
+
+  </p>
+
+
+  <p>
+
+  Based on example contribtued by @b2renger, and a simple beat detection
+
+  explanation by <a
+
+  href="http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/"
+
+  target="_blank">Felix Turner</a>.
+
+  </p>
+isConstructor: true
+line: 10312
+params:
+  - name: freq1
+    description: |
+      <p>lowFrequency - defaults to 20Hz</p>
+    type: Number
+    optional: true
+  - name: freq2
+    description: |
+      <p>highFrequency - defaults to 20000 Hz</p>
+    type: Number
+    optional: true
+  - name: threshold
+    description: |
+      <p>Threshold for detecting a beat between 0 and 1
+                                scaled logarithmically where 0.1 is 1/2 the loudness
+                                of 1.0. Defaults to 0.35.</p>
+    type: Number
+    optional: true
+  - name: framesPerPeak
+    description: |
+      <p>Defaults to 20.</p>
+    type: Number
+    optional: true
+memberMethodPreviews:
+  isDetected:
+    description: |
+      <p>isDetected is set to true when a peak is detected.</p>
+    path: .././src/content/reference/en//p5.PeakDetect/isDetected
+  update:
+    description: |
+      <p>The update method is run in the draw loop.</p>
+      <p>Accepts an FFT object. You must call .analyze()
+      on the FFT object prior to updating the peakDetect
+      because it relies on a completed FFT analysis.</p>
+    path: .././src/content/reference/en//p5.PeakDetect/update
+  onPeak:
+    description: |
+      <p>onPeak accepts two arguments: a function to call when
+      a peak is detected. The value of the peak,
+      between 0.0 and 1.0, is passed to the callback.</p>
+    path: .././src/content/reference/en//p5.PeakDetect/onPeak
+---
+
+
+# p5.PeakDetect
diff --git a/src/content/reference/en/p5.sound/p5.Phrase.mdx b/src/content/reference/en/p5.sound/p5.Phrase.mdx
new file mode 100644
index 0000000000..0da91c8139
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Phrase.mdx
@@ -0,0 +1,57 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Phrase
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>A phrase is a pattern of musical events over time, i.e.
+  a series of notes and rests.</p>
+
+  <p>Phrases must be added to a p5.Part for playback, and
+  each part can play multiple phrases at the same time.
+  For example, one Phrase might be a kick drum, another
+  could be a snare, and another could be the bassline.</p>
+
+  <p>The first parameter is a name so that the phrase can be
+  modified or deleted later. The callback is a a function that
+  this phrase will call at every step—for example it might be
+  called <code>playNote(value){}</code>. The array determines
+  which value is passed into the callback at each step of the
+  phrase. It can be numbers, an object with multiple numbers,
+  or a zero (0) indicates a rest so the callback won't be called).</p>
+isConstructor: true
+line: 9103
+params:
+  - name: name
+    description: |
+      <p>Name so that you can access the Phrase.</p>
+    type: String
+  - name: callback
+    description: |
+      <p>The name of a function that this phrase
+                                 will call. Typically it will play a sound,
+                                 and accept two parameters: a time at which
+                                 to play the sound (in seconds from now),
+                                 and a value from the sequence array. The
+                                 time should be passed into the play() or
+                                 start() method to ensure precision.</p>
+    type: Function
+  - name: sequence
+    description: |
+      <p>Array of values to pass into the callback
+                                at each step of the phrase.</p>
+    type: Array
+memberMethodPreviews:
+  sequence:
+    description: |
+      <p>Array of values to pass into the callback
+      at each step of the phrase. Depending on the callback
+      function's requirements, these values may be numbers,
+      strings, or an object with multiple parameters.
+      Zero (0) indicates a rest.</p>
+    path: .././src/content/reference/en//p5.Phrase/sequence
+---
+
+
+# p5.Phrase
diff --git a/src/content/reference/en/p5.sound/p5.PolySynth.mdx b/src/content/reference/en/p5.sound/p5.PolySynth.mdx
new file mode 100644
index 0000000000..d65cd8ac81
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.PolySynth.mdx
@@ -0,0 +1,103 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.PolySynth
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>An AudioVoice is used as a single voice for sound synthesis.
+  The PolySynth class holds an array of AudioVoice, and deals
+  with voices allocations, with setting notes to be played, and
+  parameters to be set.</p>
+isConstructor: true
+line: 11691
+params:
+  - name: synthVoice
+    description: |
+      <p>A monophonic synth voice inheriting
+                                     the AudioVoice class. Defaults to p5.MonoSynth</p>
+    type: Number
+    optional: true
+  - name: maxVoices
+    description: |
+      <p>Number of voices, defaults to 8;</p>
+    type: Number
+    optional: true
+memberMethodPreviews:
+  notes:
+    description: >
+      <p>An object that holds information about which notes have been played and
+
+      which notes are currently being played. New notes are added as keys
+
+      on the fly. While a note has been attacked, but not released, the value of
+      the
+
+      key is the audiovoice which is generating that note. When notes are
+      released,
+
+      the value of the key becomes undefined.</p>
+    path: .././src/content/reference/en//p5.PolySynth/notes
+  polyvalue:
+    description: |
+      <p>A PolySynth must have at least 1 voice, defaults to 8</p>
+    path: .././src/content/reference/en//p5.PolySynth/polyvalue
+  AudioVoice:
+    description: |
+      <p>Monosynth that generates the sound for each note that is triggered. The
+      p5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>
+    path: .././src/content/reference/en//p5.PolySynth/AudioVoice
+  play:
+    description: >
+      <p>Play a note by triggering noteAttack and noteRelease with sustain
+      time</p>
+    path: .././src/content/reference/en//p5.PolySynth/play
+  noteADSR:
+    description: >
+      <p>noteADSR sets the envelope for a specific note that has just been
+      triggered.
+
+      Using this method modifies the envelope of whichever audiovoice is being
+      used
+
+      to play the desired note. The envelope should be reset before noteRelease
+      is called
+
+      in order to prevent the modified envelope from being used on other
+      notes.</p>
+    path: .././src/content/reference/en//p5.PolySynth/noteADSR
+  setADSR:
+    description: >
+      <p>Set the PolySynths global envelope. This method modifies the envelopes
+      of each
+
+      monosynth so that all notes are played with this envelope.</p>
+    path: .././src/content/reference/en//p5.PolySynth/setADSR
+  noteAttack:
+    description: |
+      <p>Trigger the Attack, and Decay portion of a MonoSynth.
+      Similar to holding down a key on a piano, but it will
+      hold the sustain level until you let go.</p>
+    path: .././src/content/reference/en//p5.PolySynth/noteAttack
+  noteRelease:
+    description: |
+      <p>Trigger the Release of an AudioVoice note. This is similar to releasing
+      the key on a piano and letting the sound fade according to the
+      release level and release time.</p>
+    path: .././src/content/reference/en//p5.PolySynth/noteRelease
+  connect:
+    description: |
+      <p>Connect to a p5.sound / Web Audio object.</p>
+    path: .././src/content/reference/en//p5.PolySynth/connect
+  disconnect:
+    description: |
+      <p>Disconnect all outputs</p>
+    path: .././src/content/reference/en//p5.PolySynth/disconnect
+  dispose:
+    description: |
+      <p>Get rid of the MonoSynth and free up its resources / memory.</p>
+    path: .././src/content/reference/en//p5.PolySynth/dispose
+---
+
+
+# p5.PolySynth
diff --git a/src/content/reference/en/p5.sound/p5.Pulse.mdx b/src/content/reference/en/p5.sound/p5.Pulse.mdx
new file mode 100644
index 0000000000..7910ed69a7
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Pulse.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Pulse
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Creates a Pulse object, an oscillator that implements
+  Pulse Width Modulation.
+  The pulse is created with two oscillators.
+  Accepts a parameter for frequency, and to set the
+  width between the pulses. See <a href="
+  http://p5js.org/reference/#/p5.Oscillator">
+  <code>p5.Oscillator</code> for a full list of methods.</p>
+isConstructor: true
+line: 5779
+params:
+  - name: freq
+    description: |
+      <p>Frequency in oscillations per second (Hz)</p>
+    type: Number
+    optional: true
+  - name: w
+    description: |
+      <p>Width between the pulses (0 to 1.0,
+                             defaults to 0)</p>
+    type: Number
+    optional: true
+memberMethodPreviews:
+  width:
+    description: |
+      <p>Set the width of a Pulse object (an oscillator that implements
+      Pulse Width Modulation).</p>
+    path: .././src/content/reference/en//p5.Pulse/width
+---
+
+
+# p5.Pulse
diff --git a/src/content/reference/en/p5.sound/p5.Reverb.mdx b/src/content/reference/en/p5.sound/p5.Reverb.mdx
new file mode 100644
index 0000000000..8d703bb1a4
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Reverb.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Reverb
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Reverb adds depth to a sound through a large number of decaying
+
+  echoes. It creates the perception that sound is occurring in a
+
+  physical space. The p5.Reverb has paramters for Time (how long does the
+
+  reverb last) and decayRate (how much the sound decays with each echo)
+
+  that can be set with the .set() or .process() methods. The p5.Convolver
+
+  extends p5.Reverb allowing you to recreate the sound of actual physical
+
+  spaces through convolution.</p>
+
+  <p>This class extends <a href = "/reference/#/p5.Effect">p5.Effect</a>.
+
+  Methods <a href = "/reference/#/p5.Effect/amp">amp()</a>, <a href =
+  "/reference/#/p5.Effect/chain">chain()</a>,
+
+  <a href = "/reference/#/p5.Effect/drywet">drywet()</a>, <a href =
+  "/reference/#/p5.Effect/connect">connect()</a>, and
+
+  <a href = "/reference/#/p5.Effect/disconnect">disconnect()</a> are
+  available.</p>
+isConstructor: true
+line: 8308
+memberMethodPreviews:
+  process:
+    description: |
+      <p>Connect a source to the reverb, and assign reverb parameters.</p>
+    path: .././src/content/reference/en//p5.Reverb/process
+  set:
+    description: |
+      <p>Set the reverb settings. Similar to .process(), but without
+      assigning a new input.</p>
+    path: .././src/content/reference/en//p5.Reverb/set
+  amp:
+    description: |
+      <p>Set the output level of the reverb effect.</p>
+    path: .././src/content/reference/en//p5.Reverb/amp
+  connect:
+    description: |
+      <p>Send output to a p5.sound or web audio object</p>
+    path: .././src/content/reference/en//p5.Reverb/connect
+  disconnect:
+    description: |
+      <p>Disconnect all output.</p>
+    path: .././src/content/reference/en//p5.Reverb/disconnect
+---
+
+
+# p5.Reverb
diff --git a/src/content/reference/en/p5.sound/p5.SawOsc.mdx b/src/content/reference/en/p5.sound/p5.SawOsc.mdx
new file mode 100644
index 0000000000..bda11239aa
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.SawOsc.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.SawOsc
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Constructor: <code>new p5.SawOsc()</code>.
+  This creates a SawTooth Wave Oscillator and is
+  equivalent to <code> new p5.Oscillator('sawtooth')
+  </code> or creating a p5.Oscillator and then calling
+  its method <code>setType('sawtooth')</code>.
+  See p5.Oscillator for methods.</p>
+isConstructor: true
+line: 4656
+params:
+  - name: freq
+    description: |
+      <p>Set the frequency</p>
+    type: Number
+    optional: true
+---
+
+
+# p5.SawOsc
diff --git a/src/content/reference/en/p5.sound/p5.Score.mdx b/src/content/reference/en/p5.sound/p5.Score.mdx
new file mode 100644
index 0000000000..d029d07569
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Score.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Score
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>A Score consists of a series of Parts. The parts will
+  be played back in order. For example, you could have an
+  A part, a B part, and a C part, and play them back in this order
+  <code>new p5.Score(a, a, b, a, c)</code></p>
+isConstructor: true
+line: 9493
+params:
+  - name: parts
+    description: |
+      <p>One or multiple parts, to be played in sequence.</p>
+    type: p5.Part
+    optional: true
+    multiple: true
+memberMethodPreviews:
+  start:
+    description: |
+      <p>Start playback of the score.</p>
+    path: .././src/content/reference/en//p5.Score/start
+  stop:
+    description: |
+      <p>Stop playback of the score.</p>
+    path: .././src/content/reference/en//p5.Score/stop
+  pause:
+    description: |
+      <p>Pause playback of the score.</p>
+    path: .././src/content/reference/en//p5.Score/pause
+  loop:
+    description: |
+      <p>Loop playback of the score.</p>
+    path: .././src/content/reference/en//p5.Score/loop
+  noLoop:
+    description: |
+      <p>Stop looping playback of the score. If it
+      is currently playing, this will go into effect
+      after the current round of playback completes.</p>
+    path: .././src/content/reference/en//p5.Score/noLoop
+  setBPM:
+    description: |
+      <p>Set the tempo for all parts in the score</p>
+    path: .././src/content/reference/en//p5.Score/setBPM
+---
+
+
+# p5.Score
diff --git a/src/content/reference/en/p5.sound/p5.SinOsc.mdx b/src/content/reference/en/p5.sound/p5.SinOsc.mdx
new file mode 100644
index 0000000000..7b931dc10b
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.SinOsc.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.SinOsc
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Constructor: <code>new p5.SinOsc()</code>.
+  This creates a Sine Wave Oscillator and is
+  equivalent to <code> new p5.Oscillator('sine')
+  </code> or creating a p5.Oscillator and then calling
+  its method <code>setType('sine')</code>.
+  See p5.Oscillator for methods.</p>
+isConstructor: true
+line: 4602
+params:
+  - name: freq
+    description: |
+      <p>Set the frequency</p>
+    type: Number
+    optional: true
+---
+
+
+# p5.SinOsc
diff --git a/src/content/reference/en/p5.sound/p5.SoundFile.mdx b/src/content/reference/en/p5.sound/p5.SoundFile.mdx
new file mode 100644
index 0000000000..a14025a303
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.SoundFile.mdx
@@ -0,0 +1,276 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.SoundFile
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>SoundFile object with a path to a file.</p>
+
+  <p>The p5.SoundFile may not be available immediately because
+  it loads the file information asynchronously.</p>
+
+  <p>To do something with the sound as soon as it loads
+  pass the name of a function as the second parameter.</p>
+
+  <p>Only one file path is required. However, audio file formats
+  (i.e. mp3, ogg, wav and m4a/aac) are not supported by all
+  web browsers. If you want to ensure compatability, instead of a single
+  file path, you may include an Array of filepaths, and the browser will
+  choose a format that works.</p>
+isConstructor: true
+line: 1405
+params:
+  - name: path
+    description: |
+      <p>path to a sound file (String). Optionally,
+                                   you may include multiple file formats in
+                                   an array. Alternately, accepts an object
+                                   from the HTML5 File API, or a p5.File.</p>
+    type: String|Array
+  - name: successCallback
+    description: |
+      <p>Name of a function to call once file loads</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>Name of a function to call if file fails to
+                                          load. This function will receive an error or
+                                         XMLHttpRequest object with information
+                                         about what went wrong.</p>
+    type: Function
+    optional: true
+  - name: whileLoadingCallback
+    description: |
+      <p>Name of a function to call while file
+                                                 is loading. That function will
+                                                 receive progress of the request to
+                                                 load the sound file
+                                                 (between 0 and 1) as its first
+                                                 parameter. This progress
+                                                 does not account for the additional
+                                                 time needed to decode the audio data.</p>
+    type: Function
+    optional: true
+memberMethodPreviews:
+  isLoaded:
+    description: |
+      <p>Returns true if the sound file finished loading successfully.</p>
+    path: .././src/content/reference/en//p5.SoundFile/isLoaded
+  play:
+    description: |
+      <p>Play the p5.SoundFile</p>
+    path: .././src/content/reference/en//p5.SoundFile/play
+  playMode:
+    description: |
+      <p>p5.SoundFile has two play modes: <code>restart</code> and
+      <code>sustain</code>. Play Mode determines what happens to a
+      p5.SoundFile if it is triggered while in the middle of playback.
+      In sustain mode, playback will continue simultaneous to the
+      new playback. In restart mode, play() will stop playback
+      and start over. With untilDone, a sound will play only if it's
+      not already playing. Sustain is the default mode.</p>
+    path: .././src/content/reference/en//p5.SoundFile/playMode
+  pause:
+    description: |
+      <p>Pauses a file that is currently playing. If the file is not
+      playing, then nothing will happen.</p>
+      <p>After pausing, .play() will resume from the paused
+      position.
+      If p5.SoundFile had been set to loop before it was paused,
+      it will continue to loop after it is unpaused with .play().</p>
+    path: .././src/content/reference/en//p5.SoundFile/pause
+  loop:
+    description: |
+      <p>Loop the p5.SoundFile. Accepts optional parameters to set the
+      playback rate, playback volume, loopStart, loopEnd.</p>
+    path: .././src/content/reference/en//p5.SoundFile/loop
+  setLoop:
+    description: |
+      <p>Set a p5.SoundFile's looping flag to true or false. If the sound
+      is currently playing, this change will take effect when it
+      reaches the end of the current playback.</p>
+    path: .././src/content/reference/en//p5.SoundFile/setLoop
+  isLooping:
+    description: >
+      <p>Returns 'true' if a p5.SoundFile is currently looping and playing,
+      'false' if not.</p>
+    path: .././src/content/reference/en//p5.SoundFile/isLooping
+  isPlaying:
+    description: |
+      <p>Returns true if a p5.SoundFile is playing, false if not (i.e.
+      paused or stopped).</p>
+    path: .././src/content/reference/en//p5.SoundFile/isPlaying
+  isPaused:
+    description: |
+      <p>Returns true if a p5.SoundFile is paused, false if not (i.e.
+      playing or stopped).</p>
+    path: .././src/content/reference/en//p5.SoundFile/isPaused
+  stop:
+    description: |
+      <p>Stop soundfile playback.</p>
+    path: .././src/content/reference/en//p5.SoundFile/stop
+  pan:
+    description: |
+      <p>Set the stereo panning of a p5.sound object to
+      a floating point number between -1.0 (left) and 1.0 (right).
+      Default is 0.0 (center).</p>
+    path: .././src/content/reference/en//p5.SoundFile/pan
+  getPan:
+    description: |
+      <p>Returns the current stereo pan position (-1.0 to 1.0)</p>
+    path: .././src/content/reference/en//p5.SoundFile/getPan
+  rate:
+    description: >
+      <p>Set the playback rate of a sound file. Will change the speed and the
+      pitch.
+
+      Values less than zero will reverse the audio buffer.</p>
+    path: .././src/content/reference/en//p5.SoundFile/rate
+  setVolume:
+    description: |
+      <p>Multiply the output volume (amplitude) of a sound file
+      between 0.0 (silence) and 1.0 (full volume).
+      1.0 is the maximum amplitude of a digital sound, so multiplying
+      by greater than 1.0 may cause digital distortion. To
+      fade, provide a <code>rampTime</code> parameter. For more
+      complex fades, see the Envelope class.</p>
+      <p>Alternately, you can pass in a signal source such as an
+      oscillator to modulate the amplitude with an audio signal.</p>
+    path: .././src/content/reference/en//p5.SoundFile/setVolume
+  duration:
+    description: |
+      <p>Returns the duration of a sound file in seconds.</p>
+    path: .././src/content/reference/en//p5.SoundFile/duration
+  currentTime:
+    description: >
+      <p>Return the current position of the p5.SoundFile playhead, in seconds.
+
+      Time is relative to the normal buffer direction, so if
+      <code>reverseBuffer</code>
+
+      has been called, currentTime will count backwards.</p>
+    path: .././src/content/reference/en//p5.SoundFile/currentTime
+  jump:
+    description: >
+      <p>Move the playhead of a soundfile that is currently playing to a
+
+      new position and a new duration, in seconds.
+
+      If none are given, will reset the file to play entire duration
+
+      from start to finish. To set the position of a soundfile that is
+
+      not currently playing, use the <code>play</code> or <code>loop</code>
+      methods.</p>
+    path: .././src/content/reference/en//p5.SoundFile/jump
+  channels:
+    description: |
+      <p>Return the number of channels in a sound file.
+      For example, Mono = 1, Stereo = 2.</p>
+    path: .././src/content/reference/en//p5.SoundFile/channels
+  sampleRate:
+    description: |
+      <p>Return the sample rate of the sound file.</p>
+    path: .././src/content/reference/en//p5.SoundFile/sampleRate
+  frames:
+    description: |
+      <p>Return the number of samples in a sound file.
+      Equal to sampleRate * duration.</p>
+    path: .././src/content/reference/en//p5.SoundFile/frames
+  getPeaks:
+    description: |
+      <p>Returns an array of amplitude peaks in a p5.SoundFile that can be
+      used to draw a static waveform. Scans through the p5.SoundFile's
+      audio buffer to find the greatest amplitudes. Accepts one
+      parameter, 'length', which determines size of the array.
+      Larger arrays result in more precise waveform visualizations.</p>
+      <p>Inspired by Wavesurfer.js.</p>
+    path: .././src/content/reference/en//p5.SoundFile/getPeaks
+  reverseBuffer:
+    description: |
+      <p>Reverses the p5.SoundFile's buffer source.
+      Playback must be handled separately (see example).</p>
+    path: .././src/content/reference/en//p5.SoundFile/reverseBuffer
+  onended:
+    description: |
+      <p>Schedule an event to be called when the soundfile
+      reaches the end of a buffer. If the soundfile is
+      playing through once, this will be called when it
+      ends. If it is looping, it will be called when
+      stop is called.</p>
+    path: .././src/content/reference/en//p5.SoundFile/onended
+  connect:
+    description: |
+      <p>Connects the output of a p5sound object to input of another
+      p5.sound object. For example, you may connect a p5.SoundFile to an
+      FFT or an Effect. If no parameter is given, it will connect to
+      the main output. Most p5sound objects connect to the master
+      output when they are created.</p>
+    path: .././src/content/reference/en//p5.SoundFile/connect
+  disconnect:
+    description: |
+      <p>Disconnects the output of this p5sound object.</p>
+    path: .././src/content/reference/en//p5.SoundFile/disconnect
+  setPath:
+    description: |
+      <p>Reset the source for this SoundFile to a
+      new path (URL).</p>
+    path: .././src/content/reference/en//p5.SoundFile/setPath
+  setBuffer:
+    description: |
+      <p>Replace the current Audio Buffer with a new Buffer.</p>
+    path: .././src/content/reference/en//p5.SoundFile/setBuffer
+  addCue:
+    description: |
+      <p>Schedule events to trigger every time a MediaElement
+      (audio/video) reaches a playback cue point.</p>
+      <p>Accepts a callback function, a time (in seconds) at which to trigger
+      the callback, and an optional parameter for the callback.</p>
+      <p>Time will be passed as the first parameter to the callback function,
+      and param will be the second parameter.</p>
+    path: .././src/content/reference/en//p5.SoundFile/addCue
+  removeCue:
+    description: |
+      <p>Remove a callback based on its ID. The ID is returned by the
+      addCue method.</p>
+    path: .././src/content/reference/en//p5.SoundFile/removeCue
+  clearCues:
+    description: |
+      <p>Remove all of the callbacks that had originally been scheduled
+      via the addCue method.</p>
+    path: .././src/content/reference/en//p5.SoundFile/clearCues
+  save:
+    description: |
+      <p>Save a p5.SoundFile as a .wav file. The browser will prompt the user
+      to download the file to their device. To upload a file to a server, see
+      <a href="/reference/#/p5.SoundFile/getBlob">getBlob</a></p>
+    path: .././src/content/reference/en//p5.SoundFile/save
+  getBlob:
+    description: >
+      <p>This method is useful for sending a SoundFile to a server. It returns
+      the
+
+      .wav-encoded audio data as a "<a target="_blank" title="Blob reference at
+
+      MDN"
+      href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>".
+
+      A Blob is a file-like data object that can be uploaded to a server
+
+      with an <a href="/reference/#/p5/httpDo">http</a> request. We'll
+
+      use the <code>httpDo</code> options object to send a POST request with
+      some
+
+      specific options: we encode the request as
+      <code>multipart/form-data</code>,
+
+      and attach the blob as one of the form values using
+      <code>FormData</code>.</p>
+    path: .././src/content/reference/en//p5.SoundFile/getBlob
+---
+
+
+# p5.SoundFile
diff --git a/src/content/reference/en/p5.sound/p5.SoundLoop.mdx b/src/content/reference/en/p5.sound/p5.SoundLoop.mdx
new file mode 100644
index 0000000000..5b6d11f4d4
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.SoundLoop.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.SoundLoop
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>SoundLoop</p>
+isConstructor: true
+line: 9673
+params:
+  - name: callback
+    description: |
+      <p>this function will be called on each iteration of theloop</p>
+    type: Function
+  - name: interval
+    description: >
+      <p>amount of time (if a number) or beats (if a string, following <a href =
+      "https://github.com/Tonejs/Tone.js/wiki/Time">Tone.Time</a> convention)
+      for each iteration of the loop. Defaults to 1 second.</p>
+    type: Number|String
+    optional: true
+memberMethodPreviews:
+  bpm:
+    description: >
+      <p>Getters and Setters, setting any paramter will result in a change in
+      the clock's
+
+      frequency, that will be reflected after the next callback
+
+      beats per minute (defaults to 60)</p>
+    path: .././src/content/reference/en//p5.SoundLoop/bpm
+  timeSignature:
+    description: |
+      <p>number of quarter notes in a measure (defaults to 4)</p>
+    path: .././src/content/reference/en//p5.SoundLoop/timeSignature
+  interval:
+    description: |
+      <p>length of the loops interval</p>
+    path: .././src/content/reference/en//p5.SoundLoop/interval
+  iterations:
+    description: |
+      <p>how many times the callback has been called so far</p>
+    path: .././src/content/reference/en//p5.SoundLoop/iterations
+  musicalTimeMode:
+    description: >
+      <p>musicalTimeMode uses <a href =
+      "https://github.com/Tonejs/Tone.js/wiki/Time">Tone.Time</a> convention
+
+      true if string, false if number</p>
+    path: .././src/content/reference/en//p5.SoundLoop/musicalTimeMode
+  maxIterations:
+    description: |
+      <p>Set a limit to the number of loops to play. defaults to Infinity</p>
+    path: .././src/content/reference/en//p5.SoundLoop/maxIterations
+  start:
+    description: |
+      <p>Start the loop</p>
+    path: .././src/content/reference/en//p5.SoundLoop/start
+  stop:
+    description: |
+      <p>Stop the loop</p>
+    path: .././src/content/reference/en//p5.SoundLoop/stop
+  pause:
+    description: |
+      <p>Pause the loop</p>
+    path: .././src/content/reference/en//p5.SoundLoop/pause
+  syncedStart:
+    description: >
+      <p>Synchronize loops. Use this method to start two or more loops in
+      synchronization
+
+      or to start a loop in synchronization with a loop that is already playing
+
+      This method will schedule the implicit loop in sync with the explicit
+      master loop
+
+      i.e. loopToStart.syncedStart(loopToSyncWith)</p>
+    path: .././src/content/reference/en//p5.SoundLoop/syncedStart
+---
+
+
+# p5.SoundLoop
diff --git a/src/content/reference/en/p5.sound/p5.SoundRecorder.mdx b/src/content/reference/en/p5.sound/p5.SoundRecorder.mdx
new file mode 100644
index 0000000000..bb02b7ef04
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.SoundRecorder.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.SoundRecorder
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>Record sounds for playback and/or to save as a .wav file.
+  The p5.SoundRecorder records all sound output from your sketch,
+  or can be assigned a specific source with setInput().</p>
+  <p>The record() method accepts a p5.SoundFile as a parameter.
+  When playback is stopped (either after the given amount of time,
+  or with the stop() method), the p5.SoundRecorder will send its
+  recording to that p5.SoundFile for playback.</p>
+isConstructor: true
+line: 10559
+memberMethodPreviews:
+  setInput:
+    description: |
+      <p>Connect a specific device to the p5.SoundRecorder.
+      If no parameter is given, p5.SoundRecorer will record
+      all audible p5.sound from your sketch.</p>
+    path: .././src/content/reference/en//p5.SoundRecorder/setInput
+  record:
+    description: |
+      <p>Start recording. To access the recording, provide
+      a p5.SoundFile as the first parameter. The p5.SoundRecorder
+      will send its recording to that p5.SoundFile for playback once
+      recording is complete. Optional parameters include duration
+      (in seconds) of the recording, and a callback function that
+      will be called once the complete recording has been
+      transfered to the p5.SoundFile.</p>
+    path: .././src/content/reference/en//p5.SoundRecorder/record
+  stop:
+    description: |
+      <p>Stop the recording. Once the recording is stopped,
+      the results will be sent to the p5.SoundFile that
+      was given on .record(), and if a callback function
+      was provided on record, that function will be called.</p>
+    path: .././src/content/reference/en//p5.SoundRecorder/stop
+---
+
+
+# p5.SoundRecorder
diff --git a/src/content/reference/en/p5.sound/p5.SqrOsc.mdx b/src/content/reference/en/p5.sound/p5.SqrOsc.mdx
new file mode 100644
index 0000000000..f5157a7b5e
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.SqrOsc.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.SqrOsc
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Constructor: <code>new p5.SqrOsc()</code>.
+  This creates a Square Wave Oscillator and is
+  equivalent to <code> new p5.Oscillator('square')
+  </code> or creating a p5.Oscillator and then calling
+  its method <code>setType('square')</code>.
+  See p5.Oscillator for methods.</p>
+isConstructor: true
+line: 4683
+params:
+  - name: freq
+    description: |
+      <p>Set the frequency</p>
+    type: Number
+    optional: true
+---
+
+
+# p5.SqrOsc
diff --git a/src/content/reference/en/p5.sound/p5.TriOsc.mdx b/src/content/reference/en/p5.sound/p5.TriOsc.mdx
new file mode 100644
index 0000000000..953f891d5e
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.TriOsc.mdx
@@ -0,0 +1,25 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.TriOsc
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Constructor: <code>new p5.TriOsc()</code>.
+  This creates a Triangle Wave Oscillator and is
+  equivalent to <code>new p5.Oscillator('triangle')
+  </code> or creating a p5.Oscillator and then calling
+  its method <code>setType('triangle')</code>.
+  See p5.Oscillator for methods.</p>
+isConstructor: true
+line: 4629
+params:
+  - name: freq
+    description: |
+      <p>Set the frequency</p>
+    type: Number
+    optional: true
+---
+
+
+# p5.TriOsc
diff --git a/src/content/reference/en/p5/&gt;.mdx b/src/content/reference/en/p5/&gt;.mdx
new file mode 100644
index 0000000000..b3fb8a2c98
--- /dev/null
+++ b/src/content/reference/en/p5/&gt;.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: '&gt;'
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >-
+  <p>The greater than operator <a href="#/p5/>">></a>
+
+  evaluates to true if the left value is greater than
+
+  the right value.</p>
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">
+
+  There is more info on comparison operators on MDN.</a>
+line: 115
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    console.log(100 > 1); // prints true to the console
+    console.log(1 > 100); // prints false to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# >
diff --git a/src/content/reference/en/p5/&gt;=.mdx b/src/content/reference/en/p5/&gt;=.mdx
new file mode 100644
index 0000000000..064748cc69
--- /dev/null
+++ b/src/content/reference/en/p5/&gt;=.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: '&gt;='
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>The greater than or equal to operator <a href="#/p5/>=">>=</a>
+
+  evaluates to true if the left value is greater than or equal to
+
+  the right value.</p>
+
+  <p><a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">There
+  is more info on comparison operators on MDN.</a></p>
+line: 137
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    console.log(100 >= 100); // prints true to the console
+    console.log(101 >= 100); // prints true to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# >=
diff --git a/src/content/reference/en/p5/&lt;.mdx b/src/content/reference/en/p5/&lt;.mdx
new file mode 100644
index 0000000000..97c2d54428
--- /dev/null
+++ b/src/content/reference/en/p5/&lt;.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: '&lt;'
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>The less than operator <a href="#/p5/<"><</a>
+
+  evaluates to true if the left value is less than
+
+  the right value.</p>
+
+  <p><a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">There
+  is more info on comparison operators on MDN.</a></p>
+line: 158
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    console.log(1 < 100); // prints true to the console
+    console.log(100 < 99); // prints false to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# \<
diff --git a/src/content/reference/en/p5/&lt;=.mdx b/src/content/reference/en/p5/&lt;=.mdx
new file mode 100644
index 0000000000..7d71c7cc6d
--- /dev/null
+++ b/src/content/reference/en/p5/&lt;=.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: '&lt;='
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>The less than or equal to operator <a href="#/p5/<="><=</a>
+
+  evaluates to true if the left value is less than or equal to
+
+  the right value.</p>
+
+  <p><a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">There
+  is more info on comparison operators on MDN.</a></p>
+line: 179
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    console.log(100 <= 100); // prints true to the console
+    console.log(99 <= 100); // prints true to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# \<=
diff --git a/src/content/reference/en/p5/===.mdx b/src/content/reference/en/p5/===.mdx
new file mode 100644
index 0000000000..8e7ff5402b
--- /dev/null
+++ b/src/content/reference/en/p5/===.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: '==='
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>The strict equality operator <a href="#/p5/===">===</a>
+
+  checks to see if two values are equal and of the same type.</p>
+
+  <p>A comparison expression always evaluates to a <a
+  href="#/p5/boolean">boolean</a>.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">the
+  MDN entry</a>:
+
+  The non-identity operator returns true if the operands are not equal and/or
+  not of the same type.</p>
+
+  <p>Note: In some examples around the web you may see a double-equals-sign
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a>,
+
+  used for comparison instead. This is the non-strict equality operator in
+  Javascript.
+
+  This will convert the two values being compared to the same type before
+  comparing them.</p>
+line: 87
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    console.log(1 === 1); // prints true to the console
+    console.log(1 === '1'); // prints false to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# ===
diff --git a/src/content/reference/en/p5/ADD.mdx b/src/content/reference/en/p5/ADD.mdx
new file mode 100644
index 0000000000..219ea410c2
--- /dev/null
+++ b/src/content/reference/en/p5/ADD.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ADD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 480
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# ADD
diff --git a/src/content/reference/en/p5/ALT.mdx b/src/content/reference/en/p5/ALT.mdx
new file mode 100644
index 0000000000..228b7e059e
--- /dev/null
+++ b/src/content/reference/en/p5/ALT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ALT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 395
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# ALT
diff --git a/src/content/reference/en/p5/ARROW.mdx b/src/content/reference/en/p5/ARROW.mdx
new file mode 100644
index 0000000000..0420bd9658
--- /dev/null
+++ b/src/content/reference/en/p5/ARROW.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 55
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# ARROW
diff --git a/src/content/reference/en/p5/AUTO.mdx b/src/content/reference/en/p5/AUTO.mdx
new file mode 100644
index 0000000000..8b66456e92
--- /dev/null
+++ b/src/content/reference/en/p5/AUTO.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: AUTO
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>AUTO allows us to automatically set the width or height of an element (but
+  not both),
+
+  based on the current height and width of the element. Only one parameter can
+
+  be passed to the <a href="/reference/#/p5.Element/size">size</a> function as
+  AUTO, at a time.</p>
+line: 385
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# AUTO
diff --git a/src/content/reference/en/p5/AXES.mdx b/src/content/reference/en/p5/AXES.mdx
new file mode 100644
index 0000000000..7564399e8f
--- /dev/null
+++ b/src/content/reference/en/p5/AXES.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: AXES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 746
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# AXES
diff --git a/src/content/reference/en/p5/BACKSPACE.mdx b/src/content/reference/en/p5/BACKSPACE.mdx
new file mode 100644
index 0000000000..8e98b11ad7
--- /dev/null
+++ b/src/content/reference/en/p5/BACKSPACE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BACKSPACE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 401
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BACKSPACE
diff --git a/src/content/reference/en/p5/BASELINE.mdx b/src/content/reference/en/p5/BASELINE.mdx
new file mode 100644
index 0000000000..7abeb9595b
--- /dev/null
+++ b/src/content/reference/en/p5/BASELINE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BASELINE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 250
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BASELINE
diff --git a/src/content/reference/en/p5/BEVEL.mdx b/src/content/reference/en/p5/BEVEL.mdx
new file mode 100644
index 0000000000..78836d5236
--- /dev/null
+++ b/src/content/reference/en/p5/BEVEL.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BEVEL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 352
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BEVEL
diff --git a/src/content/reference/en/p5/BLEND.mdx b/src/content/reference/en/p5/BLEND.mdx
new file mode 100644
index 0000000000..c684fdee63
--- /dev/null
+++ b/src/content/reference/en/p5/BLEND.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: blend
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Copies a region of pixels from one image to another. The
+  <code>blendMode</code>
+
+  parameter blends the images' colors to create different effects.</p>
+line: 106
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    function preload() {
+      img0 = loadImage('assets/rockies.jpg');
+      img1 = loadImage('assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      background(img0);
+      image(img1, 0, 0);
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    function preload() {
+      img0 = loadImage('assets/rockies.jpg');
+      img1 = loadImage('assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      background(img0);
+      image(img1, 0, 0);
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    function preload() {
+      img0 = loadImage('assets/rockies.jpg');
+      img1 = loadImage('assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      background(img0);
+      image(img1, 0, 0);
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# blend
diff --git a/src/content/reference/en/p5/BLUR.mdx b/src/content/reference/en/p5/BLUR.mdx
new file mode 100644
index 0000000000..52c76679a2
--- /dev/null
+++ b/src/content/reference/en/p5/BLUR.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BLUR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 594
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BLUR
diff --git a/src/content/reference/en/p5/BOLD.mdx b/src/content/reference/en/p5/BOLD.mdx
new file mode 100644
index 0000000000..13057eba9e
--- /dev/null
+++ b/src/content/reference/en/p5/BOLD.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BOLD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 611
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BOLD
diff --git a/src/content/reference/en/p5/BOLDITALIC.mdx b/src/content/reference/en/p5/BOLDITALIC.mdx
new file mode 100644
index 0000000000..ac4489c1ea
--- /dev/null
+++ b/src/content/reference/en/p5/BOLDITALIC.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BOLDITALIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 616
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BOLDITALIC
diff --git a/src/content/reference/en/p5/BOTTOM.mdx b/src/content/reference/en/p5/BOTTOM.mdx
new file mode 100644
index 0000000000..542c1b1302
--- /dev/null
+++ b/src/content/reference/en/p5/BOTTOM.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BOTTOM
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 245
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BOTTOM
diff --git a/src/content/reference/en/p5/BURN.mdx b/src/content/reference/en/p5/BURN.mdx
new file mode 100644
index 0000000000..1710a1df27
--- /dev/null
+++ b/src/content/reference/en/p5/BURN.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BURN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 551
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BURN
diff --git a/src/content/reference/en/p5/CENTER.mdx b/src/content/reference/en/p5/CENTER.mdx
new file mode 100644
index 0000000000..0daf0f0c41
--- /dev/null
+++ b/src/content/reference/en/p5/CENTER.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CENTER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 235
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CENTER
diff --git a/src/content/reference/en/p5/CHAR.mdx b/src/content/reference/en/p5/CHAR.mdx
new file mode 100644
index 0000000000..a8cc701122
--- /dev/null
+++ b/src/content/reference/en/p5/CHAR.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: char
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a number or string to its corresponding single-character
+  string representation. If a string parameter is provided, it is first
+  parsed as an integer and then translated into a single-character string.
+  When an array of number or string values is passed in, then an array of
+  single-character strings of the same length is returned.</p>
+line: 180
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(char(65)); // "A"
+    print(char('65')); // "A"
+    print(char([65, 66, 67])); // [ "A", "B", "C" ]
+    print(join(char([65, 66, 67]), '')); // "ABC"
+    </code></div>
+return:
+  description: string representation of value
+  type: String
+chainable: false
+---
+
+
+# char
diff --git a/src/content/reference/en/p5/CHORD.mdx b/src/content/reference/en/p5/CHORD.mdx
new file mode 100644
index 0000000000..60c6989166
--- /dev/null
+++ b/src/content/reference/en/p5/CHORD.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CHORD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 325
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CHORD
diff --git a/src/content/reference/en/p5/CLAMP.mdx b/src/content/reference/en/p5/CLAMP.mdx
new file mode 100644
index 0000000000..aa06f73d8e
--- /dev/null
+++ b/src/content/reference/en/p5/CLAMP.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CLAMP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 701
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CLAMP
diff --git a/src/content/reference/en/p5/CLOSE.mdx b/src/content/reference/en/p5/CLOSE.mdx
new file mode 100644
index 0000000000..f412a62acd
--- /dev/null
+++ b/src/content/reference/en/p5/CLOSE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CLOSE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 315
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CLOSE
diff --git a/src/content/reference/en/p5/CONTAIN.mdx b/src/content/reference/en/p5/CONTAIN.mdx
new file mode 100644
index 0000000000..bf9aaf6e90
--- /dev/null
+++ b/src/content/reference/en/p5/CONTAIN.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CONTAIN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 763
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CONTAIN
diff --git a/src/content/reference/en/p5/CONTROL.mdx b/src/content/reference/en/p5/CONTROL.mdx
new file mode 100644
index 0000000000..eb03c2a43e
--- /dev/null
+++ b/src/content/reference/en/p5/CONTROL.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CONTROL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 406
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CONTROL
diff --git a/src/content/reference/en/p5/CORNER.mdx b/src/content/reference/en/p5/CORNER.mdx
new file mode 100644
index 0000000000..0fa56eb0a2
--- /dev/null
+++ b/src/content/reference/en/p5/CORNER.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CORNER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 210
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CORNER
diff --git a/src/content/reference/en/p5/CORNERS.mdx b/src/content/reference/en/p5/CORNERS.mdx
new file mode 100644
index 0000000000..e5df1dce11
--- /dev/null
+++ b/src/content/reference/en/p5/CORNERS.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CORNERS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 215
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CORNERS
diff --git a/src/content/reference/en/p5/COVER.mdx b/src/content/reference/en/p5/COVER.mdx
new file mode 100644
index 0000000000..42f966f477
--- /dev/null
+++ b/src/content/reference/en/p5/COVER.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: COVER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 769
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# COVER
diff --git a/src/content/reference/en/p5/CROSS.mdx b/src/content/reference/en/p5/CROSS.mdx
new file mode 100644
index 0000000000..0d5b2806b1
--- /dev/null
+++ b/src/content/reference/en/p5/CROSS.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CROSS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 60
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CROSS
diff --git a/src/content/reference/en/p5/DARKEST.mdx b/src/content/reference/en/p5/DARKEST.mdx
new file mode 100644
index 0000000000..efdd908a3d
--- /dev/null
+++ b/src/content/reference/en/p5/DARKEST.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: DARKEST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 488
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# DARKEST
diff --git a/src/content/reference/en/p5/DEGREES.mdx b/src/content/reference/en/p5/DEGREES.mdx
new file mode 100644
index 0000000000..b0f56fa74b
--- /dev/null
+++ b/src/content/reference/en/p5/DEGREES.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: degrees
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: |
+  <p>Converts an angle measurement in radians to its corresponding value in
+  degrees. Degrees and radians are two ways of measuring the same thing.
+  There are 360 degrees in a circle and 2 × π (about 6.28)
+  radians in a circle. For example, 90° = π ÷ 2 (about 1.57)
+  radians. This function doesn't take into account the current
+  <a href="#/p5/angleMode">angleMode()</a>.</p>
+line: 322
+params:
+  - name: radians
+    description: |
+      <p>radians value to convert to degrees.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let rad = QUARTER_PI;
+    let deg = degrees(rad);
+    text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
+
+    describe('The text "0.79 rad = 45˚".');
+    </code>
+    </div>
+return:
+  description: converted angle.
+  type: Number
+chainable: false
+---
+
+
+# degrees
diff --git a/src/content/reference/en/p5/DELETE.mdx b/src/content/reference/en/p5/DELETE.mdx
new file mode 100644
index 0000000000..50baa241ea
--- /dev/null
+++ b/src/content/reference/en/p5/DELETE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: DELETE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 411
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# DELETE
diff --git a/src/content/reference/en/p5/DIFFERENCE.mdx b/src/content/reference/en/p5/DIFFERENCE.mdx
new file mode 100644
index 0000000000..fb2c9444c3
--- /dev/null
+++ b/src/content/reference/en/p5/DIFFERENCE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: DIFFERENCE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 499
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# DIFFERENCE
diff --git a/src/content/reference/en/p5/DILATE.mdx b/src/content/reference/en/p5/DILATE.mdx
new file mode 100644
index 0000000000..ca835f5c5c
--- /dev/null
+++ b/src/content/reference/en/p5/DILATE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: DILATE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 584
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# DILATE
diff --git a/src/content/reference/en/p5/DODGE.mdx b/src/content/reference/en/p5/DODGE.mdx
new file mode 100644
index 0000000000..25d0981555
--- /dev/null
+++ b/src/content/reference/en/p5/DODGE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: DODGE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 545
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# DODGE
diff --git a/src/content/reference/en/p5/DOWN_ARROW.mdx b/src/content/reference/en/p5/DOWN_ARROW.mdx
new file mode 100644
index 0000000000..0cf5aacb69
--- /dev/null
+++ b/src/content/reference/en/p5/DOWN_ARROW.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: DOWN_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 416
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# DOWN\_ARROW
diff --git a/src/content/reference/en/p5/ENTER.mdx b/src/content/reference/en/p5/ENTER.mdx
new file mode 100644
index 0000000000..7a6297faea
--- /dev/null
+++ b/src/content/reference/en/p5/ENTER.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ENTER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 421
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# ENTER
diff --git a/src/content/reference/en/p5/ERODE.mdx b/src/content/reference/en/p5/ERODE.mdx
new file mode 100644
index 0000000000..9b30c7cc9f
--- /dev/null
+++ b/src/content/reference/en/p5/ERODE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ERODE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 589
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# ERODE
diff --git a/src/content/reference/en/p5/ESCAPE.mdx b/src/content/reference/en/p5/ESCAPE.mdx
new file mode 100644
index 0000000000..8513f45dcd
--- /dev/null
+++ b/src/content/reference/en/p5/ESCAPE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ESCAPE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 426
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# ESCAPE
diff --git a/src/content/reference/en/p5/EXCLUSION.mdx b/src/content/reference/en/p5/EXCLUSION.mdx
new file mode 100644
index 0000000000..3b18f48b05
--- /dev/null
+++ b/src/content/reference/en/p5/EXCLUSION.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: EXCLUSION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 509
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# EXCLUSION
diff --git a/src/content/reference/en/p5/FALLBACK.mdx b/src/content/reference/en/p5/FALLBACK.mdx
new file mode 100644
index 0000000000..ac128d9420
--- /dev/null
+++ b/src/content/reference/en/p5/FALLBACK.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: FALLBACK
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 757
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# FALLBACK
diff --git a/src/content/reference/en/p5/FLAT.mdx b/src/content/reference/en/p5/FLAT.mdx
new file mode 100644
index 0000000000..a41a5b795f
--- /dev/null
+++ b/src/content/reference/en/p5/FLAT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: FLAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 713
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# FLAT
diff --git a/src/content/reference/en/p5/FLOAT.mdx b/src/content/reference/en/p5/FLOAT.mdx
new file mode 100644
index 0000000000..bc41289053
--- /dev/null
+++ b/src/content/reference/en/p5/FLOAT.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: float
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a string to its floating point representation. The contents of a
+  string must resemble a number, or NaN (not a number) will be returned.
+  For example, float("1234.56") evaluates to 1234.56, but float("giraffe")
+  will return NaN.</p>
+  <p>When an array of values is passed in, then an array of floats of the same
+  length is returned.</p>
+line: 10
+params:
+  - name: str
+    description: |
+      <p>float string to parse</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let str = '20';
+    let diameter = float(str);
+    ellipse(width / 2, height / 2, diameter, diameter);
+    describe('20-by-20 white ellipse in the center of the canvas');
+    </code></div>
+    <div class='norender'><code>
+    print(float('10.31')); // 10.31
+    print(float('Infinity')); // Infinity
+    print(float('-Infinity')); // -Infinity
+    </code></div>
+return:
+  description: floating point representation of string
+  type: Number
+chainable: false
+---
+
+
+# float
diff --git a/src/content/reference/en/p5/GRAY.mdx b/src/content/reference/en/p5/GRAY.mdx
new file mode 100644
index 0000000000..3f4de1f9d3
--- /dev/null
+++ b/src/content/reference/en/p5/GRAY.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: GRAY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 564
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# GRAY
diff --git a/src/content/reference/en/p5/GRID.mdx b/src/content/reference/en/p5/GRID.mdx
new file mode 100644
index 0000000000..7d8ad74605
--- /dev/null
+++ b/src/content/reference/en/p5/GRID.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: GRID
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 740
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# GRID
diff --git a/src/content/reference/en/p5/HALF_FLOAT.mdx b/src/content/reference/en/p5/HALF_FLOAT.mdx
new file mode 100644
index 0000000000..3bd653a82b
--- /dev/null
+++ b/src/content/reference/en/p5/HALF_FLOAT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: HALF_FLOAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 793
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# HALF\_FLOAT
diff --git a/src/content/reference/en/p5/HALF_PI.mdx b/src/content/reference/en/p5/HALF_PI.mdx
new file mode 100644
index 0000000000..43ef5b9bed
--- /dev/null
+++ b/src/content/reference/en/p5/HALF_PI.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: HALF_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>HALF_PI is a mathematical constant with the value
+
+  1.57079632679489661923. It is half the ratio of the
+
+  circumference of a circle to its diameter. It is useful in
+
+  combination with the trigonometric functions <a href="#/p5/sin">sin()</a> and
+  <a href="#/p5/cos">cos()</a>.</p>
+line: 88
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div><code>
+    arc(50, 50, 80, 80, 0, HALF_PI);
+    </code></div>
+alt: 80×80 white quarter-circle with curve toward bottom right of canvas.
+chainable: false
+---
+
+
+# HALF\_PI
diff --git a/src/content/reference/en/p5/HAND.mdx b/src/content/reference/en/p5/HAND.mdx
new file mode 100644
index 0000000000..e4a5105f66
--- /dev/null
+++ b/src/content/reference/en/p5/HAND.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: HAND
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 65
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# HAND
diff --git a/src/content/reference/en/p5/HARD_LIGHT.mdx b/src/content/reference/en/p5/HARD_LIGHT.mdx
new file mode 100644
index 0000000000..e961cefdec
--- /dev/null
+++ b/src/content/reference/en/p5/HARD_LIGHT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: HARD_LIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 535
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# HARD\_LIGHT
diff --git a/src/content/reference/en/p5/HSB.mdx b/src/content/reference/en/p5/HSB.mdx
new file mode 100644
index 0000000000..a3587e2cc9
--- /dev/null
+++ b/src/content/reference/en/p5/HSB.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: HSB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>HSB (hue, saturation, brightness) is a type of color model.
+
+  You can learn more about it at
+
+  <a
+  href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">HSB</a>.</p>
+line: 369
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# HSB
diff --git a/src/content/reference/en/p5/HSL.mdx b/src/content/reference/en/p5/HSL.mdx
new file mode 100644
index 0000000000..93e7e243bd
--- /dev/null
+++ b/src/content/reference/en/p5/HSL.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: HSL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 378
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# HSL
diff --git a/src/content/reference/en/p5/IMAGE.mdx b/src/content/reference/en/p5/IMAGE.mdx
new file mode 100644
index 0000000000..71129ea15e
--- /dev/null
+++ b/src/content/reference/en/p5/IMAGE.mdx
@@ -0,0 +1,191 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: image
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Draws a source image to the canvas.</p>
+
+  <p>The first parameter, <code>img</code>, is the source image to be drawn. The
+  second and
+
+  third parameters, <code>dx</code> and <code>dy</code>, set the coordinates of
+  the destination
+
+  image's top left corner. See <a href="#/p5/imageMode">imageMode()</a> for
+
+  other ways to position images.</p>
+
+  <p>Here's a diagram that explains how optional parameters work in
+  <code>image()</code>:</p>
+
+  <p><img src="assets/drawImage.png"></img></p>
+
+  <p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are
+  optional. They set the
+
+  the width and height to draw the destination image. By default,
+  <code>image()</code>
+
+  draws the full source image at its original size.</p>
+
+  <p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are
+  also optional.
+
+  These coordinates define the top left corner of a subsection to draw from
+
+  the source image.</p>
+
+  <p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are
+  also optional.
+
+  They define the width and height of a subsection to draw from the source
+
+  image. By default, <code>image()</code> draws the full subsection that begins
+  at
+
+  (<code>sx</code>, <code>sy</code>) and extends to the edges of the source
+  image.</p>
+
+  <p>The ninth parameter, <code>fit</code>, is also optional. It enables a
+  subsection of
+
+  the source image to be drawn without affecting its aspect ratio. If
+
+  <code>CONTAIN</code> is passed, the full subsection will appear within the
+  destination
+
+  rectangle. If <code>COVER</code> is passed, the subsection will completely
+  cover the
+
+  destination rectangle. This may have the effect of zooming into the
+
+  subsection.</p>
+
+  <p>The tenth and eleventh paremeters, <code>xAlign</code> and
+  <code>yAlign</code>, are also
+
+  optional. They determine how to align the fitted subsection.
+  <code>xAlign</code> can
+
+  be set to either <code>LEFT</code>, <code>RIGHT</code>, or
+  <code>CENTER</code>. <code>yAlign</code> can be set to
+
+  either <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By
+  default, both <code>xAlign</code> and <code>yAlign</code>
+
+  are set to <code>CENTER</code>.</p>
+line: 832
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      background(50);
+      image(img, 0, 0);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      background(50);
+      image(img, 10, 10);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      background(50);
+      image(img, 0, 0, 50, 50);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      background(50);
+      image(img, 25, 25, 50, 50, 25, 25, 50, 50);
+
+      describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/moonwalk.jpg');
+    }
+
+    function setup() {
+      background(50);
+      image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
+
+      describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      // Image is 50 x 50 pixels.
+      img = loadImage('assets/laDefense50.png');
+    }
+
+    function setup() {
+      background(50);
+      image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
+
+      describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# image
diff --git a/src/content/reference/en/p5/IMMEDIATE.mdx b/src/content/reference/en/p5/IMMEDIATE.mdx
new file mode 100644
index 0000000000..ec6a720792
--- /dev/null
+++ b/src/content/reference/en/p5/IMMEDIATE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: IMMEDIATE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 675
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# IMMEDIATE
diff --git a/src/content/reference/en/p5/INVERT.mdx b/src/content/reference/en/p5/INVERT.mdx
new file mode 100644
index 0000000000..ca52ba1809
--- /dev/null
+++ b/src/content/reference/en/p5/INVERT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: INVERT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 574
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# INVERT
diff --git a/src/content/reference/en/p5/ITALIC.mdx b/src/content/reference/en/p5/ITALIC.mdx
new file mode 100644
index 0000000000..71b6922549
--- /dev/null
+++ b/src/content/reference/en/p5/ITALIC.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ITALIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 606
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# ITALIC
diff --git a/src/content/reference/en/p5/LABEL.mdx b/src/content/reference/en/p5/LABEL.mdx
new file mode 100644
index 0000000000..72c6139575
--- /dev/null
+++ b/src/content/reference/en/p5/LABEL.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LABEL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 752
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LABEL
diff --git a/src/content/reference/en/p5/LANDSCAPE.mdx b/src/content/reference/en/p5/LANDSCAPE.mdx
new file mode 100644
index 0000000000..43f15d7bee
--- /dev/null
+++ b/src/content/reference/en/p5/LANDSCAPE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LANDSCAPE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 725
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LANDSCAPE
diff --git a/src/content/reference/en/p5/LEFT.mdx b/src/content/reference/en/p5/LEFT.mdx
new file mode 100644
index 0000000000..907f27f8e3
--- /dev/null
+++ b/src/content/reference/en/p5/LEFT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LEFT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 230
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LEFT
diff --git a/src/content/reference/en/p5/LEFT_ARROW.mdx b/src/content/reference/en/p5/LEFT_ARROW.mdx
new file mode 100644
index 0000000000..6836bf9813
--- /dev/null
+++ b/src/content/reference/en/p5/LEFT_ARROW.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LEFT_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 431
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LEFT\_ARROW
diff --git a/src/content/reference/en/p5/LIGHTEST.mdx b/src/content/reference/en/p5/LIGHTEST.mdx
new file mode 100644
index 0000000000..25fecf1eb7
--- /dev/null
+++ b/src/content/reference/en/p5/LIGHTEST.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LIGHTEST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 493
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LIGHTEST
diff --git a/src/content/reference/en/p5/LINEAR.mdx b/src/content/reference/en/p5/LINEAR.mdx
new file mode 100644
index 0000000000..6d2dad3296
--- /dev/null
+++ b/src/content/reference/en/p5/LINEAR.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LINEAR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 638
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LINEAR
diff --git a/src/content/reference/en/p5/LINES.mdx b/src/content/reference/en/p5/LINES.mdx
new file mode 100644
index 0000000000..a8429ec5fe
--- /dev/null
+++ b/src/content/reference/en/p5/LINES.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LINES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 262
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LINES
diff --git a/src/content/reference/en/p5/LINE_LOOP.mdx b/src/content/reference/en/p5/LINE_LOOP.mdx
new file mode 100644
index 0000000000..3206e3739b
--- /dev/null
+++ b/src/content/reference/en/p5/LINE_LOOP.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LINE_LOOP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 274
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LINE\_LOOP
diff --git a/src/content/reference/en/p5/LINE_STRIP.mdx b/src/content/reference/en/p5/LINE_STRIP.mdx
new file mode 100644
index 0000000000..f9978e285d
--- /dev/null
+++ b/src/content/reference/en/p5/LINE_STRIP.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: LINE_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 268
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# LINE\_STRIP
diff --git a/src/content/reference/en/p5/MIRROR.mdx b/src/content/reference/en/p5/MIRROR.mdx
new file mode 100644
index 0000000000..f4a5bc0007
--- /dev/null
+++ b/src/content/reference/en/p5/MIRROR.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: MIRROR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 706
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# MIRROR
diff --git a/src/content/reference/en/p5/MITER.mdx b/src/content/reference/en/p5/MITER.mdx
new file mode 100644
index 0000000000..54a7485e9b
--- /dev/null
+++ b/src/content/reference/en/p5/MITER.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: MITER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 357
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# MITER
diff --git a/src/content/reference/en/p5/MOVE.mdx b/src/content/reference/en/p5/MOVE.mdx
new file mode 100644
index 0000000000..7f85c1cea7
--- /dev/null
+++ b/src/content/reference/en/p5/MOVE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: MOVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 70
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# MOVE
diff --git a/src/content/reference/en/p5/MULTIPLY.mdx b/src/content/reference/en/p5/MULTIPLY.mdx
new file mode 100644
index 0000000000..99acf92798
--- /dev/null
+++ b/src/content/reference/en/p5/MULTIPLY.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: MULTIPLY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 514
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# MULTIPLY
diff --git a/src/content/reference/en/p5/NEAREST.mdx b/src/content/reference/en/p5/NEAREST.mdx
new file mode 100644
index 0000000000..00674c1d02
--- /dev/null
+++ b/src/content/reference/en/p5/NEAREST.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: NEAREST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 691
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# NEAREST
diff --git a/src/content/reference/en/p5/OPAQUE.mdx b/src/content/reference/en/p5/OPAQUE.mdx
new file mode 100644
index 0000000000..f2cb81c6fe
--- /dev/null
+++ b/src/content/reference/en/p5/OPAQUE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: OPAQUE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 569
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# OPAQUE
diff --git a/src/content/reference/en/p5/OPEN.mdx b/src/content/reference/en/p5/OPEN.mdx
new file mode 100644
index 0000000000..227ccd04cb
--- /dev/null
+++ b/src/content/reference/en/p5/OPEN.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: OPEN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 320
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# OPEN
diff --git a/src/content/reference/en/p5/OPTION.mdx b/src/content/reference/en/p5/OPTION.mdx
new file mode 100644
index 0000000000..04be17b717
--- /dev/null
+++ b/src/content/reference/en/p5/OPTION.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: OPTION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 436
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# OPTION
diff --git a/src/content/reference/en/p5/OVERLAY.mdx b/src/content/reference/en/p5/OVERLAY.mdx
new file mode 100644
index 0000000000..5d604f36ec
--- /dev/null
+++ b/src/content/reference/en/p5/OVERLAY.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: OVERLAY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 530
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# OVERLAY
diff --git a/src/content/reference/en/p5/P2D.mdx b/src/content/reference/en/p5/P2D.mdx
new file mode 100644
index 0000000000..2427821178
--- /dev/null
+++ b/src/content/reference/en/p5/P2D.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: P2D
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>The default, two-dimensional renderer.</p>
+line: 18
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# P2D
diff --git a/src/content/reference/en/p5/PI.mdx b/src/content/reference/en/p5/PI.mdx
new file mode 100644
index 0000000000..673641a49c
--- /dev/null
+++ b/src/content/reference/en/p5/PI.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>PI is a mathematical constant with the value
+
+  3.14159265358979323846. It is the ratio of the circumference
+
+  of a circle to its diameter. It is useful in combination with
+
+  the trigonometric functions <a href="#/p5/sin">sin()</a> and <a
+  href="#/p5/cos">cos()</a>.</p>
+line: 106
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div><code>
+    arc(50, 50, 80, 80, 0, PI);
+    </code></div>
+alt: white half-circle with curve toward bottom of canvas.
+chainable: false
+---
+
+
+# PI
diff --git a/src/content/reference/en/p5/PIE.mdx b/src/content/reference/en/p5/PIE.mdx
new file mode 100644
index 0000000000..11a734f708
--- /dev/null
+++ b/src/content/reference/en/p5/PIE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: PIE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 330
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# PIE
diff --git a/src/content/reference/en/p5/POINTS.mdx b/src/content/reference/en/p5/POINTS.mdx
new file mode 100644
index 0000000000..7dee3b18ea
--- /dev/null
+++ b/src/content/reference/en/p5/POINTS.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: POINTS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 256
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# POINTS
diff --git a/src/content/reference/en/p5/PORTRAIT.mdx b/src/content/reference/en/p5/PORTRAIT.mdx
new file mode 100644
index 0000000000..9148ea0014
--- /dev/null
+++ b/src/content/reference/en/p5/PORTRAIT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: PORTRAIT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 730
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# PORTRAIT
diff --git a/src/content/reference/en/p5/POSTERIZE.mdx b/src/content/reference/en/p5/POSTERIZE.mdx
new file mode 100644
index 0000000000..78e4468229
--- /dev/null
+++ b/src/content/reference/en/p5/POSTERIZE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: POSTERIZE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 579
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# POSTERIZE
diff --git a/src/content/reference/en/p5/PROJECT.mdx b/src/content/reference/en/p5/PROJECT.mdx
new file mode 100644
index 0000000000..3f98af4ee2
--- /dev/null
+++ b/src/content/reference/en/p5/PROJECT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: PROJECT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 335
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# PROJECT
diff --git a/src/content/reference/en/p5/QUADRATIC.mdx b/src/content/reference/en/p5/QUADRATIC.mdx
new file mode 100644
index 0000000000..6ff6f42a45
--- /dev/null
+++ b/src/content/reference/en/p5/QUADRATIC.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: QUADRATIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 643
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# QUADRATIC
diff --git a/src/content/reference/en/p5/QUADS.mdx b/src/content/reference/en/p5/QUADS.mdx
new file mode 100644
index 0000000000..74675bcadf
--- /dev/null
+++ b/src/content/reference/en/p5/QUADS.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: QUADS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 298
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# QUADS
diff --git a/src/content/reference/en/p5/QUAD_STRIP.mdx b/src/content/reference/en/p5/QUAD_STRIP.mdx
new file mode 100644
index 0000000000..e24b570362
--- /dev/null
+++ b/src/content/reference/en/p5/QUAD_STRIP.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: QUAD_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 303
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# QUAD\_STRIP
diff --git a/src/content/reference/en/p5/QUARTER_PI.mdx b/src/content/reference/en/p5/QUARTER_PI.mdx
new file mode 100644
index 0000000000..5cf9eaacf7
--- /dev/null
+++ b/src/content/reference/en/p5/QUARTER_PI.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: QUARTER_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>QUARTER_PI is a mathematical constant with the value 0.7853982.
+  It is one quarter the ratio of the circumference of a circle to
+  its diameter. It is useful in combination with the trigonometric
+  functions <a href="#/p5/sin">sin()</a> and <a href="#/p5/cos">cos()</a>.</p>
+line: 124
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div><code>
+    arc(50, 50, 80, 80, 0, QUARTER_PI);
+    </code></div>
+alt: white eighth-circle rotated about 40 degrees with curve bottom right canvas.
+chainable: false
+---
+
+
+# QUARTER\_PI
diff --git a/src/content/reference/en/p5/RADIANS.mdx b/src/content/reference/en/p5/RADIANS.mdx
new file mode 100644
index 0000000000..6cebd07dd3
--- /dev/null
+++ b/src/content/reference/en/p5/RADIANS.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: radians
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: |
+  <p>Converts an angle measurement in degrees to its corresponding value in
+  radians. Degrees and radians are two ways of measuring the same thing.
+  There are 360 degrees in a circle and 2 × π (about 6.28)
+  radians in a circle. For example, 90° = π ÷ 2 (about 1.57)
+  radians. This function doesn't take into account the current
+  <a href="#/p5/angleMode">angleMode()</a>.</p>
+line: 347
+params:
+  - name: degrees
+    description: |
+      <p>degree value to convert to radians.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let deg = 45;
+    let rad = radians(deg);
+    text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
+
+    describe('The text "45˚ = 0.785 rad".');
+    </code>
+    </div>
+return:
+  description: converted angle.
+  type: Number
+chainable: false
+---
+
+
+# radians
diff --git a/src/content/reference/en/p5/RADIUS.mdx b/src/content/reference/en/p5/RADIUS.mdx
new file mode 100644
index 0000000000..8b14f9996c
--- /dev/null
+++ b/src/content/reference/en/p5/RADIUS.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: RADIUS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 220
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# RADIUS
diff --git a/src/content/reference/en/p5/REMOVE.mdx b/src/content/reference/en/p5/REMOVE.mdx
new file mode 100644
index 0000000000..f0cb01c44b
--- /dev/null
+++ b/src/content/reference/en/p5/REMOVE.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: remove
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: |
+  <p>Removes the entire p5 sketch. This will remove the canvas and any
+  elements created by p5.js. It will also stop the draw loop and unbind
+  any properties or methods from the window global scope. It will
+  leave a variable p5 in case you wanted to create a new p5 sketch.
+  If you like, you can set p5 = null to erase it. While all functions and
+  variables and objects created by the p5 library will be removed, any
+  other global variables created by your code will remain.</p>
+line: 449
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    function draw() {
+      ellipse(50, 50, 10, 10);
+    }
+
+    function mousePressed() {
+      remove(); // remove whole sketch on mouse press
+    }
+    </code></div>
+alt: nothing displayed
+chainable: false
+---
+
+
+# remove
diff --git a/src/content/reference/en/p5/REPEAT.mdx b/src/content/reference/en/p5/REPEAT.mdx
new file mode 100644
index 0000000000..0244dc0bbe
--- /dev/null
+++ b/src/content/reference/en/p5/REPEAT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: REPEAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 696
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# REPEAT
diff --git a/src/content/reference/en/p5/REPLACE.mdx b/src/content/reference/en/p5/REPLACE.mdx
new file mode 100644
index 0000000000..fb7ff3017d
--- /dev/null
+++ b/src/content/reference/en/p5/REPLACE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: REPLACE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 524
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# REPLACE
diff --git a/src/content/reference/en/p5/RETURN.mdx b/src/content/reference/en/p5/RETURN.mdx
new file mode 100644
index 0000000000..b8b0e74a35
--- /dev/null
+++ b/src/content/reference/en/p5/RETURN.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: return
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Specifies the value to be returned by a function.
+
+  For more info checkout <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return">
+
+  the MDN entry for return</a>.</p>
+line: 267
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    function calculateSquare(x) {
+      return x * x;
+    }
+    const result = calculateSquare(4); // returns 16
+    console.log(result); // prints '16' to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# return
diff --git a/src/content/reference/en/p5/RGB.mdx b/src/content/reference/en/p5/RGB.mdx
new file mode 100644
index 0000000000..8903cdd1ce
--- /dev/null
+++ b/src/content/reference/en/p5/RGB.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: RGB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 364
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# RGB
diff --git a/src/content/reference/en/p5/RGBA.mdx b/src/content/reference/en/p5/RGBA.mdx
new file mode 100644
index 0000000000..86a257d156
--- /dev/null
+++ b/src/content/reference/en/p5/RGBA.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: RGBA
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 799
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# RGBA
diff --git a/src/content/reference/en/p5/RIGHT.mdx b/src/content/reference/en/p5/RIGHT.mdx
new file mode 100644
index 0000000000..59d137e142
--- /dev/null
+++ b/src/content/reference/en/p5/RIGHT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: RIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 225
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# RIGHT
diff --git a/src/content/reference/en/p5/RIGHT_ARROW.mdx b/src/content/reference/en/p5/RIGHT_ARROW.mdx
new file mode 100644
index 0000000000..20ef708eba
--- /dev/null
+++ b/src/content/reference/en/p5/RIGHT_ARROW.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: RIGHT_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 446
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# RIGHT\_ARROW
diff --git a/src/content/reference/en/p5/ROUND.mdx b/src/content/reference/en/p5/ROUND.mdx
new file mode 100644
index 0000000000..6d8a5ddf09
--- /dev/null
+++ b/src/content/reference/en/p5/ROUND.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: round
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the integer closest to the <code>n</code> parameter. For
+  example,
+
+  <code>round(133.8)</code> returns the value 134.</p>
+line: 635
+params:
+  - name: 'n'
+    description: |
+      <p>number to round.</p>
+    type: Number
+  - name: decimals
+    description: |
+      <p>number of decimal places to round to, default is 0.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let x = round(3.7);
+    text(x, width / 2, height / 2);
+
+    describe('The number 4 written in middle of canvas.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let x = round(12.782383, 2);
+    text(x, width / 2, height / 2);
+
+    describe('The number 12.78 written in middle of canvas.');
+    </code>
+    </div>
+return:
+  description: rounded number.
+  type: Integer
+chainable: false
+---
+
+
+# round
diff --git a/src/content/reference/en/p5/SCREEN.mdx b/src/content/reference/en/p5/SCREEN.mdx
new file mode 100644
index 0000000000..6636517340
--- /dev/null
+++ b/src/content/reference/en/p5/SCREEN.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: SCREEN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 519
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# SCREEN
diff --git a/src/content/reference/en/p5/SHIFT.mdx b/src/content/reference/en/p5/SHIFT.mdx
new file mode 100644
index 0000000000..f7052c70c2
--- /dev/null
+++ b/src/content/reference/en/p5/SHIFT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: SHIFT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 451
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# SHIFT
diff --git a/src/content/reference/en/p5/SOFT_LIGHT.mdx b/src/content/reference/en/p5/SOFT_LIGHT.mdx
new file mode 100644
index 0000000000..dbe053f8ac
--- /dev/null
+++ b/src/content/reference/en/p5/SOFT_LIGHT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: SOFT_LIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 540
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# SOFT\_LIGHT
diff --git a/src/content/reference/en/p5/SUBTRACT.mdx b/src/content/reference/en/p5/SUBTRACT.mdx
new file mode 100644
index 0000000000..23ae344efa
--- /dev/null
+++ b/src/content/reference/en/p5/SUBTRACT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: SUBTRACT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 504
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# SUBTRACT
diff --git a/src/content/reference/en/p5/TAB.mdx b/src/content/reference/en/p5/TAB.mdx
new file mode 100644
index 0000000000..439aa23c32
--- /dev/null
+++ b/src/content/reference/en/p5/TAB.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TAB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 456
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# TAB
diff --git a/src/content/reference/en/p5/TAU.mdx b/src/content/reference/en/p5/TAU.mdx
new file mode 100644
index 0000000000..d7eeb66ab4
--- /dev/null
+++ b/src/content/reference/en/p5/TAU.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TAU
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>TAU is an alias for TWO_PI, a mathematical constant with the
+
+  value 6.28318530717958647693. It is twice the ratio of the
+
+  circumference of a circle to its diameter. It is useful in
+
+  combination with the trigonometric functions <a href="#/p5/sin">sin()</a> and
+  <a href="#/p5/cos">cos()</a>.</p>
+line: 142
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div><code>
+    arc(50, 50, 80, 80, 0, TAU);
+    </code></div>
+alt: 80×80 white ellipse shape in center of canvas.
+chainable: false
+---
+
+
+# TAU
diff --git a/src/content/reference/en/p5/TESS.mdx b/src/content/reference/en/p5/TESS.mdx
new file mode 100644
index 0000000000..09b726ecb3
--- /dev/null
+++ b/src/content/reference/en/p5/TESS.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TESS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 309
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# TESS
diff --git a/src/content/reference/en/p5/TEXT.mdx b/src/content/reference/en/p5/TEXT.mdx
new file mode 100644
index 0000000000..3aa32746b1
--- /dev/null
+++ b/src/content/reference/en/p5/TEXT.mdx
@@ -0,0 +1,89 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: text
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Draws text to the canvas.</p>
+
+  <p>The first parameter, <code>str</code>, is the text to be drawn. The second
+  and third
+
+  parameters, <code>x</code> and <code>y</code>, set the coordinates of the
+  text's bottom-left
+
+  corner. See <a href="#/p5/textAlign">textAlign()</a> for other ways to
+
+  align text.</p>
+
+  <p>The fourth and fifth parameters, <code>maxWidth</code> and
+  <code>maxHeight</code>, are optional.
+
+  They set the dimensions of the invisible rectangle containing the text. By
+
+  default, they set its  maximum width and height. See
+
+  <a href="#/p5/rectMode">rectMode()</a> for other ways to define the
+
+  rectangular text box. Text will wrap to fit within the text box. Text
+
+  outside of the box won't be drawn.</p>
+
+  <p>Text can be styled a few ways. Call the <a href="#/p5/fill">fill()</a>
+
+  function to set the text's fill color. Call
+
+  <a href="#/p5/stroke">stroke()</a> and
+
+  <a href="#/p5/strokeWeight">strokeWeight()</a> to set the text's outline.
+
+  Call <a href="#/p5/textSize">textSize()</a> and
+
+  <a href="#/p5/textFont">textFont()</a> to set the text's size and font,
+
+  respectively.</p>
+
+  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
+
+  <a href="#/p5/loadFont">loadFont()</a>. Calling
+
+  <a href="#/p5/stroke">stroke()</a> has no effect in <code>WEBGL</code>
+  mode.</p>
+line: 182
+params:
+  - name: str
+    description: |
+      <p>text to be displayed.</p>
+    type: String|Object|Array|Number|Boolean
+  - name: x
+    description: |
+      <p>x-coordinate of the text box.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the text box.</p>
+    type: Number
+  - name: maxWidth
+    description: |
+      <p>maximum width of the text box. See
+                                 <a href="#/p5/rectMode">rectMode()</a> for
+                                 other options.</p>
+    type: Number
+    optional: true
+  - name: maxHeight
+    description: |
+      <p>maximum height of the text box. See
+                                 <a href="#/p5/rectMode">rectMode()</a> for
+                                 other options.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  background(200);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in black in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('skyblue');\n  textSize(100);\n  text('\U0001F308', 0, 100);\n\n  describe('A rainbow in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  textSize(32);\n  fill(255);\n  stroke(0);\n  strokeWeight(4);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in white with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('black');\n  textSize(22);\n  fill('yellow');\n  text('rainbows', 6, 20);\n  fill('cornflowerblue');\n  text('rainbows', 6, 45);\n  fill('tomato');\n  text('rainbows', 6, 70);\n  fill('limegreen');\n  text('rainbows', 6, 95);\n\n  describe('The text \"rainbows\" written on several lines, each in a different color.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 10, 10, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  rectMode(CENTER);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 50, 50, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet font;\n\nfunction preload() {\n  font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(font);\n  textSize(32);\n  textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n  background(0);\n  rotateY(frameCount / 30);\n  text('p5*js', 0, 0);\n\n  describe('The text \"p5*js\" written in white and spinning in 3D.');\n}\n</code>\n</div>"
+chainable: true
+---
+
+
+# text
diff --git a/src/content/reference/en/p5/TEXTURE.mdx b/src/content/reference/en/p5/TEXTURE.mdx
new file mode 100644
index 0000000000..41929912b5
--- /dev/null
+++ b/src/content/reference/en/p5/TEXTURE.mdx
@@ -0,0 +1,144 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: texture
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the texture that will be used to render subsequent shapes.</p>
+
+  <p>A texture is like a "skin" that wraps around a 3D geometry. Currently
+
+  supported textures are images, video, and offscreen renders.</p>
+
+  <p>To texture a geometry created with <a
+  href="#/p5/beginShape">beginShape()</a>,
+
+  you will need to specify uv coordinates in <a
+  href="#/p5/vertex">vertex()</a>.</p>
+
+  <p>Note, texture() can only be used in WEBGL mode.</p>
+
+  <p>You can view more materials in this
+
+  <a href="https://p5js.org/examples/3d-materials.html">example</a>.</p>
+line: 529
+params:
+  - name: tex
+    description: |
+      <p>image to use as texture</p>
+    type: >-
+      p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('spinning cube with a texture from an image');
+    }
+
+    function draw() {
+      background(0);
+      rotateZ(frameCount * 0.01);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      //pass image as texture
+      texture(img);
+      box(width / 2);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      pg = createGraphics(200, 200);
+      pg.textSize(75);
+      describe('plane with a texture from an image created by createGraphics()');
+    }
+
+    function draw() {
+      background(0);
+      pg.background(255);
+      pg.text('hello!', 0, 100);
+      //pass image as texture
+      texture(pg);
+      rotateX(0.5);
+      noStroke();
+      plane(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let vid;
+    function preload() {
+      vid = createVideo('assets/fingers.mov');
+      vid.hide();
+    }
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('rectangle with video as texture');
+    }
+
+    function draw() {
+      background(0);
+      //pass video frame as texture
+      texture(vid);
+      rect(-40, -40, 80, 80);
+    }
+
+    function mousePressed() {
+      vid.loop();
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('quad with a texture, mapped using normalized coordinates');
+    }
+
+    function draw() {
+      background(0);
+      texture(img);
+      textureMode(NORMAL);
+      beginShape();
+      vertex(-40, -40, 0, 0);
+      vertex(40, -40, 1, 0);
+      vertex(40, 40, 1, 1);
+      vertex(-40, 40, 0, 1);
+      endShape();
+    }
+    </code>
+    </div>
+alt: 'quad with a texture, mapped using normalized coordinates'
+chainable: true
+---
+
+
+# texture
diff --git a/src/content/reference/en/p5/THRESHOLD.mdx b/src/content/reference/en/p5/THRESHOLD.mdx
new file mode 100644
index 0000000000..2addc389fc
--- /dev/null
+++ b/src/content/reference/en/p5/THRESHOLD.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: THRESHOLD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 559
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# THRESHOLD
diff --git a/src/content/reference/en/p5/TOP.mdx b/src/content/reference/en/p5/TOP.mdx
new file mode 100644
index 0000000000..34969b7102
--- /dev/null
+++ b/src/content/reference/en/p5/TOP.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TOP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 240
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# TOP
diff --git a/src/content/reference/en/p5/TRIANGLES.mdx b/src/content/reference/en/p5/TRIANGLES.mdx
new file mode 100644
index 0000000000..d15b2ee403
--- /dev/null
+++ b/src/content/reference/en/p5/TRIANGLES.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TRIANGLES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 280
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# TRIANGLES
diff --git a/src/content/reference/en/p5/TRIANGLE_FAN.mdx b/src/content/reference/en/p5/TRIANGLE_FAN.mdx
new file mode 100644
index 0000000000..42d1ca1bb6
--- /dev/null
+++ b/src/content/reference/en/p5/TRIANGLE_FAN.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TRIANGLE_FAN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 286
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# TRIANGLE\_FAN
diff --git a/src/content/reference/en/p5/TRIANGLE_STRIP.mdx b/src/content/reference/en/p5/TRIANGLE_STRIP.mdx
new file mode 100644
index 0000000000..747b532aac
--- /dev/null
+++ b/src/content/reference/en/p5/TRIANGLE_STRIP.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TRIANGLE_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 292
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# TRIANGLE\_STRIP
diff --git a/src/content/reference/en/p5/TWO_PI.mdx b/src/content/reference/en/p5/TWO_PI.mdx
new file mode 100644
index 0000000000..c7b58bd178
--- /dev/null
+++ b/src/content/reference/en/p5/TWO_PI.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: TWO_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>TWO_PI is a mathematical constant with the value
+
+  6.28318530717958647693. It is twice the ratio of the
+
+  circumference of a circle to its diameter. It is useful in
+
+  combination with the trigonometric functions <a href="#/p5/sin">sin()</a> and
+  <a href="#/p5/cos">cos()</a>.</p>
+line: 160
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div><code>
+    arc(50, 50, 80, 80, 0, TWO_PI);
+    </code></div>
+alt: 80×80 white ellipse shape in center of canvas.
+chainable: false
+---
+
+
+# TWO\_PI
diff --git a/src/content/reference/en/p5/UNSIGNED_BYTE.mdx b/src/content/reference/en/p5/UNSIGNED_BYTE.mdx
new file mode 100644
index 0000000000..00ac7c2241
--- /dev/null
+++ b/src/content/reference/en/p5/UNSIGNED_BYTE.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: UNSIGNED_BYTE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 775
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# UNSIGNED\_BYTE
diff --git a/src/content/reference/en/p5/UNSIGNED_INT.mdx b/src/content/reference/en/p5/UNSIGNED_INT.mdx
new file mode 100644
index 0000000000..1422ace677
--- /dev/null
+++ b/src/content/reference/en/p5/UNSIGNED_INT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: UNSIGNED_INT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 781
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# UNSIGNED\_INT
diff --git a/src/content/reference/en/p5/UP_ARROW.mdx b/src/content/reference/en/p5/UP_ARROW.mdx
new file mode 100644
index 0000000000..98756c6d21
--- /dev/null
+++ b/src/content/reference/en/p5/UP_ARROW.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: UP_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 461
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# UP\_ARROW
diff --git a/src/content/reference/en/p5/VERSION.mdx b/src/content/reference/en/p5/VERSION.mdx
new file mode 100644
index 0000000000..57595c17a3
--- /dev/null
+++ b/src/content/reference/en/p5/VERSION.mdx
@@ -0,0 +1,16 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: VERSION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>Version of this p5.js.</p>
+line: 9
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# VERSION
diff --git a/src/content/reference/en/p5/WAIT.mdx b/src/content/reference/en/p5/WAIT.mdx
new file mode 100644
index 0000000000..1e36b0327a
--- /dev/null
+++ b/src/content/reference/en/p5/WAIT.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: WAIT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 80
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# WAIT
diff --git a/src/content/reference/en/p5/WEBGL.mdx b/src/content/reference/en/p5/WEBGL.mdx
new file mode 100644
index 0000000000..2de294b052
--- /dev/null
+++ b/src/content/reference/en/p5/WEBGL.mdx
@@ -0,0 +1,89 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: WEBGL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>One of the two render modes in p5.js, used for computationally intensive
+  tasks like 3D rendering and shaders.</p>
+
+  <p><code>WEBGL</code> differs from the default <a
+  href="/reference/#/p5/P2D"><code>P2D</code></a> renderer in the following
+  ways:</p>
+
+  <ul>
+
+  <li><strong>Coordinate System</strong> - When drawing in <code>WEBGL</code>
+  mode, the origin point (0,0,0) is located at the center of the screen, not the
+  top-left corner. See <a
+  href="https://p5js.org/learn/getting-started-in-webgl-coords-and-transform.html">the
+  learn page about coordinates and transformations</a>.</li>
+
+  <li><strong>3D Shapes</strong> - <code>WEBGL</code> mode can be used to draw
+  3-dimensional shapes like <a href="/reference/#/p5/box">box()</a>, <a
+  href="/reference/#/p5/sphere">sphere()</a>, <a
+  href="/reference/#/p5/cone">cone()</a>, and <a
+  href="/#Shape3D%20Primitives">more</a>. See <a
+  href="https://p5js.org/learn/getting-started-in-webgl-custom-geometry.html">the
+  learn page about custom geometry</a> to make more complex objects.</li>
+
+  <li><strong>Shape Detail</strong> - When drawing in <code>WEBGL</code> mode,
+  you can specify how smooth curves should be drawn by using a
+  <code>detail</code> parameter. See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#3d-primitives-shapes">the
+  wiki section about shapes</a> for a more information and an example.</li>
+
+  <li><strong>Textures</strong> - A texture is like a skin that wraps onto a
+  shape. See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#textures">the
+  wiki section about textures</a> for examples of mapping images onto surfaces
+  with textures.</li>
+
+  <li><strong>Materials and Lighting</strong> - <code>WEBGL</code> offers
+  different types of lights like <a
+  href="/reference/#/p5/ambientLight">ambientLight()</a> to place around a
+  scene. Materials like <a
+  href="/reference/#/p5/specularMaterial">specularMaterial()</a> reflect the
+  lighting to convey shape and depth. See <a
+  href="https://p5js.org/learn/getting-started-in-webgl-appearance.html">the
+  learn page for styling and appearance</a> to experiment with different
+  combinations.</li>
+
+  <li><strong>Camera</strong> - The viewport of a <code>WEBGL</code> sketch can
+  be adjusted by changing camera attributes. See <a
+  href="https://p5js.org/learn/getting-started-in-webgl-appearance.html#camera">the
+  learn page section about cameras</a> for an explanation of camera
+  controls.</li>
+
+  <li><strong>Text</strong> - <code>WEBGL</code> requires opentype/truetype font
+  files to be preloaded using <a href="/reference/#/p5/loadFont">loadFont()</a>.
+  See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#text">the
+  wiki section about text</a> for details, along with a workaround.</li>
+
+  <li><strong>Shaders</strong> - Shaders are hardware accelerated programs that
+  can be used for a variety of effects and graphics. See the <a
+  href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">introduction
+  to shaders</a> to get started with shaders in p5.js.</li>
+
+  <li><strong>Graphics Acceleration</strong> - <code>WEBGL</code> mode uses the
+  graphics card instead of the CPU, so it may help boost the performance of your
+  sketch (example: drawing more shapes on the screen at once).</li>
+
+  </ul>
+
+  <p>To learn more about WEBGL mode, check out <a
+  href="https://p5js.org/learn/#:~:text=Getting%20Started%20in%20WebGL">all the
+  interactive WEBGL tutorials</a> in the "Learn" section of this website, or
+  read the wiki article <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5">"Getting
+  started with WebGL in p5"</a>.</p>
+line: 24
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# WEBGL
diff --git a/src/content/reference/en/p5/WEBGL2.mdx b/src/content/reference/en/p5/WEBGL2.mdx
new file mode 100644
index 0000000000..572c14bde7
--- /dev/null
+++ b/src/content/reference/en/p5/WEBGL2.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: WEBGL2
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
+  which can be used to determine what capabilities the rendering environment
+  has.</p>
+line: 45
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# WEBGL2
diff --git a/src/content/reference/en/p5/WORD.mdx b/src/content/reference/en/p5/WORD.mdx
new file mode 100644
index 0000000000..37c60fc3f4
--- /dev/null
+++ b/src/content/reference/en/p5/WORD.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: WORD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 626
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# WORD
diff --git a/src/content/reference/en/p5/abs.mdx b/src/content/reference/en/p5/abs.mdx
new file mode 100644
index 0000000000..59aabc6685
--- /dev/null
+++ b/src/content/reference/en/p5/abs.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: abs
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the absolute value of a number. A number's absolute value is its
+
+  distance from zero on the number line. -5 and 5 are both five units away
+
+  from zero, so calling <code>abs(-5)</code> and <code>abs(5)</code> both return
+  5. The absolute
+
+  value of a number is always positive.</p>
+line: 10
+params:
+  - name: 'n'
+    description: |
+      <p>number to compute.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -height);
+
+      let centerX = width / 2;
+      let x = frameCount;
+      let y = abs(x - centerX);
+      point(x, y);
+
+      describe('A series of black dots that form a "V" shape.');
+    }
+    </code>
+    </div>
+return:
+  description: absolute value of given number.
+  type: Number
+chainable: false
+---
+
+
+# abs
diff --git a/src/content/reference/en/p5/accelerationX.mdx b/src/content/reference/en/p5/accelerationX.mdx
new file mode 100644
index 0000000000..8c2cfb8bc5
--- /dev/null
+++ b/src/content/reference/en/p5/accelerationX.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: accelerationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationX always contains the acceleration of the
+
+  device along the x axis. Value is represented as meters per second
+  squared.</p>
+line: 23
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationX);
+      describe('Magnitude of device acceleration is displayed as ellipse size.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# accelerationX
diff --git a/src/content/reference/en/p5/accelerationY.mdx b/src/content/reference/en/p5/accelerationY.mdx
new file mode 100644
index 0000000000..f4dcd76056
--- /dev/null
+++ b/src/content/reference/en/p5/accelerationY.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: accelerationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationY always contains the acceleration of the
+
+  device along the y axis. Value is represented as meters per second
+  squared.</p>
+line: 45
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationY);
+      describe('Magnitude of device acceleration is displayed as ellipse size');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# accelerationY
diff --git a/src/content/reference/en/p5/accelerationZ.mdx b/src/content/reference/en/p5/accelerationZ.mdx
new file mode 100644
index 0000000000..f05941fa25
--- /dev/null
+++ b/src/content/reference/en/p5/accelerationZ.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: accelerationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationZ always contains the acceleration of the
+
+  device along the z axis. Value is represented as meters per second
+  squared.</p>
+line: 67
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationZ);
+      describe('Magnitude of device acceleration is displayed as ellipse size');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# accelerationZ
diff --git a/src/content/reference/en/p5/acos.mdx b/src/content/reference/en/p5/acos.mdx
new file mode 100644
index 0000000000..91e7e79204
--- /dev/null
+++ b/src/content/reference/en/p5/acos.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: acos
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>The inverse of <a href="#/p5/cos">cos()</a>, returns the arc cosine of a
+
+  value. This function expects arguments in the range -1 to 1. By default,
+
+  <code>acos()</code> returns values in the range 0 to π (about 3.14). If the
+
+  <a href="#/p5/angleMode">angleMode()</a> is <code>DEGREES</code>, then values
+  are
+
+  returned in the range 0 to 180.</p>
+line: 18
+params:
+  - name: value
+    description: |
+      <p>value whose arc cosine is to be returned.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let a = PI;
+    let c = cos(a);
+    let ac = acos(c);
+    text(`${round(a, 3)}`, 35, 25);
+    text(`${round(c, 3)}`, 35, 50);
+    text(`${round(ac, 3)}`, 35, 75);
+
+    describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let a = PI + QUARTER_PI;
+    let c = cos(a);
+    let ac = acos(c);
+    text(`${round(a, 3)}`, 35, 25);
+    text(`${round(c, 3)}`, 35, 50);
+    text(`${round(ac, 3)}`, 35, 75);
+
+    describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
+    </code>
+    </div>
+return:
+  description: arc cosine of the given value.
+  type: Number
+chainable: false
+---
+
+
+# acos
diff --git a/src/content/reference/en/p5/alpha.mdx b/src/content/reference/en/p5/alpha.mdx
new file mode 100644
index 0000000000..6b5f5468c5
--- /dev/null
+++ b/src/content/reference/en/p5/alpha.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: alpha
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the alpha (transparency) value from a
+  <a href="#/p5.Color">p5.Color</a> object, array of color components, or
+  CSS color string.</p>
+line: 16
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    noStroke();
+
+    const c = color(0, 126, 255, 102);
+
+    fill(c);
+
+    rect(15, 15, 35, 70);
+
+    // Sets 'alphaValue' to 102.
+
+    const alphaValue = alpha(c);
+
+    fill(alphaValue);
+
+    rect(50, 15, 35, 70);
+
+    describe('Two rectangles. The left one is light blue and the right one is
+    charcoal gray.');
+
+    </code>
+
+    </div>
+return:
+  description: the alpha value.
+  type: Number
+chainable: false
+---
+
+
+# alpha
diff --git a/src/content/reference/en/p5/ambientLight.mdx b/src/content/reference/en/p5/ambientLight.mdx
new file mode 100644
index 0000000000..e627c9d0b1
--- /dev/null
+++ b/src/content/reference/en/p5/ambientLight.mdx
@@ -0,0 +1,77 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ambientLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: |
+  <p>Creates an ambient light with the given color.</p>
+  <p>Ambient light does not come from a specific direction.
+  Objects are evenly lit from all sides. Ambient lights are
+  almost always used in combination with other types of lights.</p>
+  <p>Note: lights need to be called (whether directly or indirectly)
+  within draw() to remain persistent in a looping program.
+  Placing them in setup() will cause them to only have an effect
+  the first time through the loop.</p>
+line: 10
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      describe('sphere with coral color under black light');
+    }
+    function draw() {
+      background(100);
+      ambientLight(0); // black light (no light)
+      ambientMaterial(255, 127, 80); // coral material
+      sphere(40);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      describe('sphere with coral color under white light');
+    }
+    function draw() {
+      background(100);
+      ambientLight(255); // white light
+      ambientMaterial(255, 127, 80); // coral material
+      sphere(40);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100,100,WEBGL);
+      camera(0,-100,300);
+    }
+    function draw() {
+      background(230);
+      ambientMaterial(237,34,93); //Pink Material
+      ambientLight(mouseY);
+      //As you move the mouse up to down it changes from no ambient light to full ambient light.
+      rotateY(millis()/2000);
+      box(100);
+    }
+    </code>
+    </div>
+alt: pink ambient material cube under the ambient light
+chainable: true
+---
+
+
+# ambientLight
diff --git a/src/content/reference/en/p5/ambientMaterial.mdx b/src/content/reference/en/p5/ambientMaterial.mdx
new file mode 100644
index 0000000000..3069008c3e
--- /dev/null
+++ b/src/content/reference/en/p5/ambientMaterial.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ambientMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: |
+  <p>Sets the ambient color of the material.</p>
+  <p>The ambientMaterial() color represents the components
+  of the <strong>ambientLight()</strong> color that the object reflects.</p>
+  <p>Consider an ambientMaterial() with the color yellow (255, 255, 0).
+  If the ambientLight() emits the color white (255, 255, 255), then the object
+  will appear yellow as it will reflect the red and green components
+  of the light. If the ambientLight() emits the color red (255, 0, 0), then
+  the object will appear red as it will reflect the red component
+  of the light. If the ambientLight() emits the color blue (0, 0, 255),
+  then the object will appear black, as there is no component of
+  the light that it can reflect.</p>
+  <p>You can view more materials in this
+  <a href="https://p5js.org/examples/3d-materials.html">example</a>.</p>
+line: 869
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('sphere reflecting red, blue, and green light');
+    }
+    function draw() {
+      background(0);
+      noStroke();
+      ambientLight(255);
+      ambientMaterial(70, 130, 230);
+      sphere(40);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // ambientLight is both red and blue (magenta),
+    // so object only reflects it's red and blue components
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('box reflecting only red and blue light');
+    }
+    function draw() {
+      background(70);
+      ambientLight(255, 0, 255); // magenta light
+      ambientMaterial(255); // white material
+      box(30);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // ambientLight is green. Since object does not contain
+    // green, it does not reflect any light
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('box reflecting no light');
+    }
+    function draw() {
+      background(70);
+      ambientLight(0, 255, 0); // green light
+      ambientMaterial(255, 0, 255); // magenta material
+      box(30);
+    }
+    </code>
+    </div>
+alt: box reflecting no light
+chainable: true
+---
+
+
+# ambientMaterial
diff --git a/src/content/reference/en/p5/angleMode.mdx b/src/content/reference/en/p5/angleMode.mdx
new file mode 100644
index 0000000000..f8a222001c
--- /dev/null
+++ b/src/content/reference/en/p5/angleMode.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: angleMode
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Changes the way trigonometric functions interpret angle values. By default,
+
+  the mode is <code>RADIANS</code>.</p>
+
+  <p>Calling <code>angleMode()</code> with no arguments returns current angle
+  mode.</p>
+line: 372
+itemtype: method
+class: p5
+example:
+  - >
+
+    <div>
+
+    <code>
+
+    let r = 40;
+
+    push();
+
+    rotate(PI / 6);
+
+    line(0, 0, r, 0);
+
+    text('0.524 rad', r, 0);
+
+    pop();
+
+
+    angleMode(DEGREES);
+
+    push();
+
+    rotate(60);
+
+    line(0, 0, r, 0);
+
+    text('60˚', r, 0);
+
+    pop();
+
+
+    describe('Two diagonal lines radiating from the top left corner of a square.
+    The lines are oriented 30 degrees from the edges of the square and 30
+    degrees apart from each other.');
+
+    </code>
+
+    </div>
+chainable: false
+---
+
+
+# angleMode
diff --git a/src/content/reference/en/p5/append.mdx b/src/content/reference/en/p5/append.mdx
new file mode 100644
index 0000000000..9d21b81ef2
--- /dev/null
+++ b/src/content/reference/en/p5/append.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: append
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Adds a value to the end of an array. Extends the length of
+  the array by one. Maps to Array.push().</p>
+line: 10
+params:
+  - name: array
+    description: |
+      <p>Array to append</p>
+    type: Array
+  - name: value
+    description: |
+      <p>to be added to the Array</p>
+    type: Any
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    function setup() {
+      let myArray = ['Mango', 'Apple', 'Papaya'];
+      print(myArray); // ['Mango', 'Apple', 'Papaya']
+
+      append(myArray, 'Peach');
+      print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+    }
+    </code></div>
+return:
+  description: the array that was appended to
+  type: Array
+chainable: false
+---
+
+
+# append
diff --git a/src/content/reference/en/p5/applyMatrix.mdx b/src/content/reference/en/p5/applyMatrix.mdx
new file mode 100644
index 0000000000..b933656dc2
--- /dev/null
+++ b/src/content/reference/en/p5/applyMatrix.mdx
@@ -0,0 +1,171 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: applyMatrix
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Multiplies the current matrix by the one specified through the parameters.
+
+  This is a powerful operation that can perform the equivalent of translate,
+
+  scale, shear and rotate all at once. You can learn more about transformation
+
+  matrices on <a href="https://en.wikipedia.org/wiki/Transformation_matrix">
+
+  Wikipedia</a>.</p>
+
+  <p>The naming of the arguments here follows the naming of the <a href=
+
+  "https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform">
+
+  WHATWG specification</a> and corresponds to a
+
+  transformation matrix of the
+
+  form:</p>
+
+  <blockquote>
+
+  <p><img style="max-width: 150px" src="assets/transformation-matrix.png"
+
+  alt="The transformation matrix used when applyMatrix is called"/></p>
+
+  </blockquote>
+
+  <p><img style="max-width: 300px" src="assets/transformation-matrix-4-4.png"
+
+  alt="The transformation matrix used when applyMatrix is called with 4x4
+  matrix"/></p>
+line: 11
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      frameRate(10);
+      rectMode(CENTER);
+    }
+
+    function draw() {
+      let step = frameCount % 20;
+      background(200);
+      // Equivalent to translate(x, y);
+      applyMatrix(1, 0, 0, 1, 40 + step, 50);
+      rect(0, 0, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      frameRate(10);
+      rectMode(CENTER);
+    }
+
+    function draw() {
+      let step = frameCount % 20;
+      background(200);
+      translate(50, 50);
+      // Equivalent to scale(x, y);
+      applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
+      rect(0, 0, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      frameRate(10);
+      rectMode(CENTER);
+    }
+
+    function draw() {
+      let step = frameCount % 20;
+      let angle = map(step, 0, 20, 0, TWO_PI);
+      let cos_a = cos(angle);
+      let sin_a = sin(angle);
+      background(200);
+      translate(50, 50);
+      // Equivalent to rotate(angle);
+      applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
+      rect(0, 0, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      frameRate(10);
+      rectMode(CENTER);
+    }
+
+    function draw() {
+      let step = frameCount % 20;
+      let angle = map(step, 0, 20, -PI / 4, PI / 4);
+      background(200);
+      translate(50, 50);
+      // equivalent to shearX(angle);
+      let shear_factor = 1 / tan(PI / 2 - angle);
+      applyMatrix(1, 0, shear_factor, 1, 0, 0);
+      rect(0, 0, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noFill();
+    }
+
+    function draw() {
+      background(200);
+      rotateY(PI / 6);
+      stroke(153);
+      box(35);
+      let rad = millis() / 1000;
+      // Set rotation angles
+      let ct = cos(rad);
+      let st = sin(rad);
+      // Matrix for rotation around the Y axis
+      applyMatrix(
+        ct, 0.0,  st,  0.0,
+        0.0, 1.0, 0.0,  0.0,
+        -st, 0.0,  ct,  0.0,
+        0.0, 0.0, 0.0,  1.0
+      );
+      stroke(255);
+      box(50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+      let testMatrix = [1, 0, 0, 1, 0, 0];
+      applyMatrix(testMatrix);
+      rect(0, 0, 50, 50);
+    }
+    </code>
+    </div>
+alt: |-
+  A rectangle translating to the right
+  A rectangle shrinking to the center
+  A rectangle rotating clockwise about the center
+  A rectangle shearing
+  A rectangle in the upper left corner
+chainable: true
+---
+
+
+# applyMatrix
diff --git a/src/content/reference/en/p5/arc.mdx b/src/content/reference/en/p5/arc.mdx
new file mode 100644
index 0000000000..7dc6351982
--- /dev/null
+++ b/src/content/reference/en/p5/arc.mdx
@@ -0,0 +1,154 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: arc
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws an arc to the canvas. Arcs are drawn along the outer edge of an
+  ellipse
+
+  (oval) defined by the <code>x</code>, <code>y</code>, <code>w</code>, and
+  <code>h</code> parameters. Use the <code>start</code> and <code>stop</code>
+
+  parameters to specify the angles (in radians) at which to draw the arc. Arcs
+  are
+
+  always drawn clockwise from <code>start</code> to <code>stop</code>. The
+  origin of the arc's ellipse may
+
+  be changed with the <a href="#/p5/ellipseMode">ellipseMode()</a> function.</p>
+
+  <p>The optional <code>mode</code> parameter determines the arc's fill style.
+  The fill modes are
+
+  a semi-circle (<code>OPEN</code>), a closed semi-circle (<code>CHORD</code>),
+  or a closed pie segment (<code>PIE</code>).</p>
+line: 102
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the arc's ellipse.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the arc's ellipse.</p>
+    type: Number
+  - name: w
+    description: |
+      <p>width of the arc's ellipse by default.</p>
+    type: Number
+  - name: h
+    description: |
+      <p>height of the arc's ellipse by default.</p>
+    type: Number
+  - name: start
+    description: |
+      <p>angle to start the arc, specified in radians.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>angle to stop the arc, specified in radians.</p>
+    type: Number
+  - name: mode
+    description: |
+      <p>optional parameter to determine the way of drawing
+                              the arc. either CHORD, PIE, or OPEN.</p>
+    type: Constant
+    optional: true
+  - name: detail
+    description: |
+      <p>optional parameter for WebGL mode only. This is to
+                              specify the number of vertices that makes up the
+                              perimeter of the arc. Default value is 25. Won't
+                              draw a stroke for a detail of more than 50.</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - >
+
+    <div>
+
+    <code>
+
+    arc(50, 55, 50, 50, 0, HALF_PI);
+
+    noFill();
+
+    arc(50, 55, 60, 60, HALF_PI, PI);
+
+    arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+
+    arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+
+    describe(
+      'A shattered outline of an ellipse with a quarter of a white circle at the bottom-right.'
+    );
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+
+    describe('A white ellipse with the top-right third missing. The bottom is
+    outlined in black.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+
+    describe(
+      'A white ellipse missing a section from the top-right. The bottom is outlined in black.'
+    );
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+
+    describe('A white ellipse with a black outline missing a section from the
+    top-right.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+
+    describe('A white ellipse with a black outline. The top-right third is
+    missing.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# arc
diff --git a/src/content/reference/en/p5/arrayCopy.mdx b/src/content/reference/en/p5/arrayCopy.mdx
new file mode 100644
index 0000000000..e805ec6d13
--- /dev/null
+++ b/src/content/reference/en/p5/arrayCopy.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: arrayCopy
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Copies an array (or part of an array) to another array. The src array is
+  copied to the dst array, beginning at the position specified by
+  srcPosition and into the position specified by dstPosition. The number of
+  elements to copy is determined by length. Note that copying values
+  overwrites existing values in the destination array. To append values
+  instead of overwriting them, use <a href="#/p5/concat">concat()</a>.</p>
+  <p>The simplified version with only two arguments, arrayCopy(src, dst),
+  copies an entire array to another of the same size. It is equivalent to
+  arrayCopy(src, 0, dst, 0, src.length).</p>
+  <p>Using this function is far more efficient for copying array data than
+  iterating through a for() loop and copying each element individually.</p>
+line: 35
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    let src = ['A', 'B', 'C'];
+    let dst = [1, 2, 3];
+    let srcPosition = 1;
+    let dstPosition = 0;
+    let length = 2;
+
+    print(src); // ['A', 'B', 'C']
+    print(dst); // [ 1 ,  2 ,  3 ]
+
+    arrayCopy(src, srcPosition, dst, dstPosition, length);
+    print(dst); // ['B', 'C', 3]
+    </code></div>
+chainable: false
+---
+
+
+# arrayCopy
diff --git a/src/content/reference/en/p5/asin.mdx b/src/content/reference/en/p5/asin.mdx
new file mode 100644
index 0000000000..dcac1aaf19
--- /dev/null
+++ b/src/content/reference/en/p5/asin.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: asin
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>The inverse of <a href="#/p5/sin">sin()</a>, returns the arc sine of a
+
+  value. This function expects input values in the range of -1 to 1. By
+
+  default, <code>asin()</code> returns values in the range -π ÷ 2
+
+  (about -1.57) to π ÷ 2 (about 1.57). If the
+
+  <a href="#/p5/angleMode">angleMode()</a> is <code>DEGREES</code> then values
+  are
+
+  returned in the range -90 to 90.</p>
+line: 60
+params:
+  - name: value
+    description: |
+      <p>value whose arc sine is to be returned.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let a = PI / 3;
+    let s = sin(a);
+    let as = asin(s);
+    text(`${round(a, 3)}`, 35, 25);
+    text(`${round(s, 3)}`, 35, 50);
+    text(`${round(as, 3)}`, 35, 75);
+
+    describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let a = PI + PI / 3;
+    let s = sin(a);
+    let as = asin(s);
+    text(`${round(a, 3)}`, 35, 25);
+    text(`${round(s, 3)}`, 35, 50);
+    text(`${round(as, 3)}`, 35, 75);
+
+    describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
+    </code>
+    </div>
+return:
+  description: arc sine of the given value.
+  type: Number
+chainable: false
+---
+
+
+# asin
diff --git a/src/content/reference/en/p5/atan.mdx b/src/content/reference/en/p5/atan.mdx
new file mode 100644
index 0000000000..1d17037faf
--- /dev/null
+++ b/src/content/reference/en/p5/atan.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: atan
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>The inverse of <a href="#/p5/tan">tan()</a>, returns the arc tangent of a
+
+  value. This function expects input values in the range of -Infinity to
+
+  Infinity. By default, <code>atan()</code> returns values in the range -π ÷ 2
+
+  (about -1.57) to π ÷ 2 (about 1.57). If the
+
+  <a href="#/p5/angleMode">angleMode()</a> is <code>DEGREES</code> then values
+  are
+
+  returned in the range -90 to 90.</p>
+line: 103
+params:
+  - name: value
+    description: |
+      <p>value whose arc tangent is to be returned.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let a = PI / 3;
+    let t = tan(a);
+    let at = atan(t);
+    text(`${round(a, 3)}`, 35, 25);
+    text(`${round(t, 3)}`, 35, 50);
+    text(`${round(at, 3)}`, 35, 75);
+
+    describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let a = PI + PI / 3;
+    let t = tan(a);
+    let at = atan(t);
+    text(`${round(a, 3)}`, 35, 25);
+    text(`${round(t, 3)}`, 35, 50);
+    text(`${round(at, 3)}`, 35, 75);
+
+    describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
+    </code>
+    </div>
+return:
+  description: arc tangent of the given value.
+  type: Number
+chainable: false
+---
+
+
+# atan
diff --git a/src/content/reference/en/p5/atan2.mdx b/src/content/reference/en/p5/atan2.mdx
new file mode 100644
index 0000000000..1f114a6a21
--- /dev/null
+++ b/src/content/reference/en/p5/atan2.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: atan2
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the angle formed by a specified point, the origin, and the
+
+  positive x-axis. By default, <code>atan2()</code> returns values in the range
+
+  -π (about -3.14) to π (3.14). If the
+
+  <a href="#/p5/angleMode">angleMode()</a> is <code>DEGREES</code>, then values
+  are
+
+  returned in the range -180 to 180. The <code>atan2()</code> function is most
+  often
+
+  used for orienting geometry to the mouse's position.</p>
+
+  <p>Note: The y-coordinate of the point is the first parameter and the
+
+  x-coordinate is the second parameter.</p>
+line: 146
+params:
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the point.</p>
+    type: Number
+  - name: x
+    description: |
+      <p>x-coordinate of the point.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+      translate(width / 2, height / 2);
+      let x = mouseX - width / 2;
+      let y = mouseY - height / 2;
+      let a = atan2(y, x);
+      rotate(a);
+      rect(-30, -5, 60, 10);
+
+      describe('A rectangle at the center of the canvas rotates with mouse movements.');
+    }
+    </code>
+    </div>
+return:
+  description: arc tangent of the given point.
+  type: Number
+chainable: false
+---
+
+
+# atan2
diff --git a/src/content/reference/en/p5/background.mdx b/src/content/reference/en/p5/background.mdx
new file mode 100644
index 0000000000..f20a57bc70
--- /dev/null
+++ b/src/content/reference/en/p5/background.mdx
@@ -0,0 +1,158 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: background
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Sets the color used for the background of the canvas. By default, the
+
+  background is transparent. This function is typically used within
+
+  <a href="#/p5/draw">draw()</a> to clear the display window at the beginning
+
+  of each frame. It can also be used inside <a href="#/p5/setup">setup()</a> to
+
+  set the background on the first frame of animation.</p>
+
+  <p>The version of <code>background()</code> with one parameter interprets the
+  value one of four
+
+  ways. If the parameter is a number, it's interpreted as a grayscale value.
+
+  If the parameter is a string, it's interpreted as a CSS color string.  RGB,
+  RGBA,
+
+  HSL, HSLA, hex, and named color strings are supported. If the parameter is a
+
+  <a href="#/p5.Color">p5.Color</a> object, it will be used as the background
+  color.
+
+  If the parameter is a <a href="#/p5.Image">p5.Image</a> object, it will be
+  used as
+
+  the background image.</p>
+
+  <p>The version of <code>background()</code> with two parameters interprets the
+  first one as a
+
+  grayscale value. The second parameter sets the alpha (transparency) value.</p>
+
+  <p>The version of <code>background()</code> with three parameters interprets
+  them as RGB, HSB,
+
+  or HSL colors, depending on the current <a
+  href="#/p5/colorMode">colorMode()</a>.
+
+  By default, colors are specified in RGB values. Calling background(255, 204,
+  0)
+
+  sets the background a bright yellow color.</p>
+line: 215
+itemtype: method
+class: p5
+example:
+  - |
+
+    <div>
+    <code>
+    // A grayscale integer value.
+    background(51);
+    describe('A canvas with a dark charcoal gray background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // A grayscale integer value and an alpha value.
+    background(51, 0.4);
+    describe('A canvas with a transparent gray background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // R, G & B integer values.
+    background(255, 204, 0);
+    describe('A canvas with a yellow background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // H, S & B integer values.
+    colorMode(HSB);
+    background(255, 204, 100);
+    describe('A canvas with a royal blue background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // A CSS named color.
+    background('red');
+    describe('A canvas with a red background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Three-digit hex RGB notation.
+    background('#fae');
+    describe('A canvas with a pink background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Six-digit hex RGB notation.
+    background('#222222');
+    describe('A canvas with a black background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Integer RGB notation.
+    background('rgb(0,255,0)');
+    describe('A canvas with a bright green background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Integer RGBA notation.
+    background('rgba(0,255,0, 0.25)');
+    describe('A canvas with a transparent green background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Percentage RGB notation.
+    background('rgb(100%,0%,10%)');
+    describe('A canvas with a red background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Percentage RGBA notation.
+    background('rgba(100%,0%,100%,0.5)');
+    describe('A canvas with a transparent purple background.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // A p5.Color object.
+    let c = color(0, 0, 255);
+    background(c);
+    describe('A canvas with a blue background.');
+    </code>
+    </div>
+chainable: true
+---
+
+
+# background
diff --git a/src/content/reference/en/p5/beginClip.mdx b/src/content/reference/en/p5/beginClip.mdx
new file mode 100644
index 0000000000..9be25b713b
--- /dev/null
+++ b/src/content/reference/en/p5/beginClip.mdx
@@ -0,0 +1,118 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: beginClip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Start defining a shape that will mask subsequent things drawn to the
+  canvas.
+
+  Only opaque regions of the mask shape will allow content to be drawn.
+
+  Any shapes drawn between this and <a href="#/p5/endClip">endClip()</a> will
+
+  contribute to the mask shape.</p>
+
+  <p>The mask will apply to anything drawn after this call. To draw without a
+  mask, contain
+
+  the code to apply the mask and to draw the masked content between
+
+  <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a>.</p>
+
+  <p>Alternatively, rather than drawing the mask between this and
+
+  <a href="#/p5/endClip">endClip()</a>, draw the mask in a callback function
+
+  passed to <a href="#/p5/clip">clip()</a>.</p>
+
+  <p>Options can include:</p>
+
+  <ul>
+
+  <li><code>invert</code>: A boolean specifying whether or not to mask the areas
+  <em>not</em> filled by the mask shape. Defaults to false.</li>
+
+  </ul>
+line: 13
+params:
+  - name: options
+    description: |
+      <p>An object containing clip settings.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noStroke();
+
+    // Mask in some shapes
+    push();
+    beginClip();
+    triangle(15, 37, 30, 13, 43, 37);
+    circle(45, 45, 7);
+    endClip();
+
+    fill('red');
+    rect(5, 5, 45, 45);
+    pop();
+
+    translate(50, 50);
+
+    // Mask out the same shapes
+    push();
+    beginClip({ invert: true });
+    triangle(15, 37, 30, 13, 43, 37);
+    circle(45, 45, 7);
+    endClip();
+
+    fill('red');
+    rect(5, 5, 45, 45);
+    pop();
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      noStroke();
+
+      beginClip();
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+      endClip();
+
+      beginShape(QUAD_STRIP);
+      fill(0, 255, 255);
+      vertex(-width/2, -height/2);
+      vertex(width/2, -height/2);
+      fill(100, 0, 100);
+      vertex(-width/2, height/2);
+      vertex(width/2, height/2);
+      endShape();
+    }
+    </code>
+    </div>
+alt: |-
+  A silhouette of a rotating torus colored with a gradient from
+  cyan to purple
+chainable: false
+---
+
+
+# beginClip
diff --git a/src/content/reference/en/p5/beginContour.mdx b/src/content/reference/en/p5/beginContour.mdx
new file mode 100644
index 0000000000..160cb5e0dd
--- /dev/null
+++ b/src/content/reference/en/p5/beginContour.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: beginContour
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Use the <a href="#/p5/beginContour">beginContour()</a> and
+
+  <a href="#/p5/endContour">endContour()</a> functions to create negative shapes
+
+  within shapes such as the center of the letter 'O'. <a
+  href="#/p5/beginContour">beginContour()</a>
+
+  begins recording vertices for the shape and <a
+  href="#/p5/endContour">endContour()</a> stops recording.
+
+  The vertices that define a negative shape must "wind" in the opposite
+  direction
+
+  from the exterior shape. First draw vertices for the exterior clockwise order,
+  then for internal shapes, draw vertices
+
+  shape in counter-clockwise.</p>
+
+  <p>These functions can only be used within a <a
+  href="#/p5/beginShape">beginShape()</a>/<a href="#/p5/endShape">endShape()</a>
+  pair and
+
+  transformations such as <a href="#/p5/translate">translate()</a>, <a
+  href="#/p5/rotate">rotate()</a>, and <a href="#/p5/scale">scale()</a> do not
+  work
+
+  within a <a href="#/p5/beginContour">beginContour()</a>/<a
+  href="#/p5/endContour">endContour()</a> pair. It is also not possible to use
+
+  other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or <a
+  href="#/p5/rect">rect()</a> within.</p>
+line: 20
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    translate(50, 50);
+    stroke(255, 0, 0);
+    beginShape();
+    // Exterior part of shape, clockwise winding
+    vertex(-40, -40);
+    vertex(40, -40);
+    vertex(40, 40);
+    vertex(-40, 40);
+    // Interior part of shape, counter-clockwise winding
+    beginContour();
+    vertex(-20, -20);
+    vertex(-20, 20);
+    vertex(20, 20);
+    vertex(20, -20);
+    endContour();
+    endShape(CLOSE);
+    </code>
+    </div>
+alt: white rect and smaller grey rect with red outlines in center of canvas.
+chainable: true
+---
+
+
+# beginContour
diff --git a/src/content/reference/en/p5/beginGeometry.mdx b/src/content/reference/en/p5/beginGeometry.mdx
new file mode 100644
index 0000000000..c99ad51116
--- /dev/null
+++ b/src/content/reference/en/p5/beginGeometry.mdx
@@ -0,0 +1,91 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: beginGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Starts creating a new p5.Geometry. Subsequent shapes drawn will be added
+
+  to the geometry and then returned when
+
+  <a href="#/p5/endGeometry">endGeometry()</a> is called. One can also use
+
+  <a href="#/p5/buildGeometry">buildGeometry()</a> to pass a function that
+
+  draws shapes.</p>
+
+  <p>If you need to draw complex shapes every frame which don't change over
+  time,
+
+  combining them upfront with <code>beginGeometry()</code> and
+  <code>endGeometry()</code> and then
+
+  drawing that will run faster than repeatedly drawing the individual
+  pieces.</p>
+line: 13
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let shapes;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      makeShapes();
+    }
+
+    function makeShapes() {
+      beginGeometry();
+      scale(0.18);
+
+      push();
+      translate(100, -50);
+      scale(0.5);
+      rotateX(PI/4);
+      cone();
+      pop();
+      cone();
+
+      beginShape();
+      vertex(-20, -50);
+      quadraticVertex(
+        -40, -70,
+        0, -60
+      );
+      endShape();
+
+      beginShape(TRIANGLE_STRIP);
+      for (let y = 20; y <= 60; y += 10) {
+        for (let x of [20, 60]) {
+          vertex(x, y);
+        }
+      }
+      endShape();
+
+      beginShape();
+      vertex(-100, -120);
+      vertex(-120, -110);
+      vertex(-105, -100);
+      endShape();
+
+      shapes = endGeometry();
+    }
+
+    function draw() {
+      background(255);
+      lights();
+      orbitControl();
+      model(shapes);
+    }
+    </code>
+    </div>
+alt: 'A series of different flat, curved, and 3D shapes floating in space.'
+chainable: false
+---
+
+
+# beginGeometry
diff --git a/src/content/reference/en/p5/beginShape.mdx b/src/content/reference/en/p5/beginShape.mdx
new file mode 100644
index 0000000000..ff00cea0f2
--- /dev/null
+++ b/src/content/reference/en/p5/beginShape.mdx
@@ -0,0 +1,244 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: beginShape
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Using the <a href="#/p5/beginShape">beginShape()</a> and <a
+  href="#/p5/endShape">endShape()</a> functions allow creating more
+
+  complex forms. <a href="#/p5/beginShape">beginShape()</a> begins recording
+  vertices for a shape and
+
+  <a href="#/p5/endShape">endShape()</a> stops recording. The value of the kind
+  parameter tells it which
+
+  types of shapes to create from the provided vertices. With no mode
+
+  specified, the shape can be any irregular polygon.</p>
+
+  <p>The parameters available for <a href="#/p5/beginShape">beginShape()</a>
+  are:</p>
+
+  <p>POINTS
+
+  Draw a series of points</p>
+
+  <p>LINES
+
+  Draw a series of unconnected line segments (individual lines)</p>
+
+  <p>TRIANGLES
+
+  Draw a series of separate triangles</p>
+
+  <p>TRIANGLE_FAN
+
+  Draw a series of connected triangles sharing the first vertex in a fan-like
+  fashion</p>
+
+  <p>TRIANGLE_STRIP
+
+  Draw a series of connected triangles in strip fashion</p>
+
+  <p>QUADS
+
+  Draw a series of separate quads</p>
+
+  <p>QUAD_STRIP
+
+  Draw quad strip using adjacent edges to form the next quad</p>
+
+  <p>TESS (WEBGL only)
+
+  Handle irregular polygon for filling curve by explicit tessellation</p>
+
+  <p>After calling the <a href="#/p5/beginShape">beginShape()</a> function, a
+  series of <a href="#/p5/vertex">vertex()</a> commands must follow. To stop
+
+  drawing the shape, call <a href="#/p5/endShape">endShape()</a>. Each shape
+  will be outlined with the
+
+  current stroke color and filled with the fill color.</p>
+
+  <p>Transformations such as <a href="#/p5/translate">translate()</a>, <a
+  href="#/p5/rotate">rotate()</a>, and <a href="#/p5/scale">scale()</a> do not
+  work
+
+  within <a href="#/p5/beginShape">beginShape()</a>. It is also not possible to
+  use other shapes, such as
+
+  <a href="#/p5/ellipse">ellipse()</a> or <a href="#/p5/rect">rect()</a> within
+  <a href="#/p5/beginShape">beginShape()</a>.</p>
+line: 71
+params:
+  - name: kind
+    description: |
+      <p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+                                     TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS</p>
+    type: Constant
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    beginShape();
+    vertex(30, 20);
+    vertex(85, 20);
+    vertex(85, 75);
+    vertex(30, 75);
+    endShape(CLOSE);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(POINTS);
+    vertex(30, 20);
+    vertex(85, 20);
+    vertex(85, 75);
+    vertex(30, 75);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(LINES);
+    vertex(30, 20);
+    vertex(85, 20);
+    vertex(85, 75);
+    vertex(30, 75);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    noFill();
+    beginShape();
+    vertex(30, 20);
+    vertex(85, 20);
+    vertex(85, 75);
+    vertex(30, 75);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    noFill();
+    beginShape();
+    vertex(30, 20);
+    vertex(85, 20);
+    vertex(85, 75);
+    vertex(30, 75);
+    endShape(CLOSE);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(TRIANGLES);
+    vertex(30, 75);
+    vertex(40, 20);
+    vertex(50, 75);
+    vertex(60, 20);
+    vertex(70, 75);
+    vertex(80, 20);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(TRIANGLE_STRIP);
+    vertex(30, 75);
+    vertex(40, 20);
+    vertex(50, 75);
+    vertex(60, 20);
+    vertex(70, 75);
+    vertex(80, 20);
+    vertex(90, 75);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(TRIANGLE_FAN);
+    vertex(57.5, 50);
+    vertex(57.5, 15);
+    vertex(92, 50);
+    vertex(57.5, 85);
+    vertex(22, 50);
+    vertex(57.5, 15);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(QUADS);
+    vertex(30, 20);
+    vertex(30, 75);
+    vertex(50, 75);
+    vertex(50, 20);
+    vertex(65, 20);
+    vertex(65, 75);
+    vertex(85, 75);
+    vertex(85, 20);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(QUAD_STRIP);
+    vertex(30, 20);
+    vertex(30, 75);
+    vertex(50, 20);
+    vertex(50, 75);
+    vertex(65, 20);
+    vertex(65, 75);
+    vertex(85, 20);
+    vertex(85, 75);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape(TESS);
+    vertex(20, 20);
+    vertex(80, 20);
+    vertex(80, 40);
+    vertex(40, 40);
+    vertex(40, 60);
+    vertex(80, 60);
+    vertex(80, 80);
+    vertex(20, 80);
+    endShape(CLOSE);
+    </code>
+    </div>
+alt: |-
+  white square-shape with black outline in middle-right of canvas.
+  4 black points in a square shape in middle-right of canvas.
+  2 horizontal black lines. In the top-right and bottom-right of canvas.
+  3 line shape with horizontal on top, vertical in middle and horizontal bottom.
+  square line shape in middle-right of canvas.
+  2 white triangle shapes mid-right canvas. left one pointing up and right down.
+  5 horizontal interlocking and alternating white triangles in mid-right canvas.
+  4 interlocking white triangles in 45 degree rotated square-shape.
+  2 white rectangle shapes in mid-right canvas. Both 20×55.
+  3 side-by-side white rectangles center rect is smaller in mid-right canvas.
+  Thick white l-shape with black outline mid-top-left of canvas.
+chainable: true
+---
+
+
+# beginShape
diff --git a/src/content/reference/en/p5/bezier.mdx b/src/content/reference/en/p5/bezier.mdx
new file mode 100644
index 0000000000..4520251be9
--- /dev/null
+++ b/src/content/reference/en/p5/bezier.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: BEZIER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 648
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# BEZIER
diff --git a/src/content/reference/en/p5/bezierDetail.mdx b/src/content/reference/en/p5/bezierDetail.mdx
new file mode 100644
index 0000000000..a749a9a977
--- /dev/null
+++ b/src/content/reference/en/p5/bezierDetail.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: bezierDetail
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Sets the resolution at which Bezier's curve is displayed. The default value
+  is 20.</p>
+
+  <p>Note, This function is only useful when using the WEBGL renderer
+
+  as the default canvas renderer does not use this information.</p>
+line: 92
+params:
+  - name: detail
+    description: |
+      <p>resolution of the curves</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noFill();
+      bezierDetail(5);
+    }
+
+    function draw() {
+      background(200);
+      bezier(
+        -40, -40, 0,
+        90, -40, 0,
+        -90,  40, 0,
+        40,  40, 0
+      );
+    }
+    </code>
+    </div>
+alt: stretched black s-shape with a low level of bezier detail
+chainable: true
+---
+
+
+# bezierDetail
diff --git a/src/content/reference/en/p5/bezierPoint.mdx b/src/content/reference/en/p5/bezierPoint.mdx
new file mode 100644
index 0000000000..8e13221729
--- /dev/null
+++ b/src/content/reference/en/p5/bezierPoint.mdx
@@ -0,0 +1,79 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: bezierPoint
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Given the x or y co-ordinate values of control and anchor points of a
+  bezier
+
+  curve, it evaluates the x or y coordinate of the bezier at position t. The
+
+  parameters a and d are the x or y coordinates of first and last points on the
+
+  curve while b and c are of the control points.The final parameter t is the
+
+  position of the resultant point which is given between 0 and 1.
+
+  This can be done once with the x coordinates and a second time
+
+  with the y coordinates to get the location of a bezier curve at t.</p>
+line: 131
+params:
+  - name: a
+    description: |
+      <p>coordinate of first point on the curve</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first control point</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second control point</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second point on the curve</p>
+    type: Number
+  - name: t
+    description: |
+      <p>value between 0 and 1</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noFill();
+    let x1 = 85,
+     x2 = 10,
+     x3 = 90,
+     x4 = 15;
+    let y1 = 20,
+     y2 = 10,
+     y3 = 90,
+     y4 = 80;
+    bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+    fill(255);
+    let steps = 10;
+    for (let i = 0; i <= steps; i++) {
+      let t = i / steps;
+      let x = bezierPoint(x1, x2, x3, x4, t);
+      let y = bezierPoint(y1, y2, y3, y4, t);
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+alt: 10 points plotted on a given bezier at equal distances.
+return:
+  description: the value of the Bezier at position t
+  type: Number
+chainable: false
+---
+
+
+# bezierPoint
diff --git a/src/content/reference/en/p5/bezierTangent.mdx b/src/content/reference/en/p5/bezierTangent.mdx
new file mode 100644
index 0000000000..f64af43253
--- /dev/null
+++ b/src/content/reference/en/p5/bezierTangent.mdx
@@ -0,0 +1,97 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: bezierTangent
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: |
+  <p>Evaluates the tangent to the Bezier at position t for points a, b, c, d.
+  The parameters a and d are the first and last points
+  on the curve, and b and c are the control points.
+  The final parameter t varies between 0 and 1.</p>
+line: 186
+params:
+  - name: a
+    description: |
+      <p>coordinate of first point on the curve</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first control point</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second control point</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second point on the curve</p>
+    type: Number
+  - name: t
+    description: |
+      <p>value between 0 and 1</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noFill();
+    bezier(85, 20, 10, 10, 90, 90, 15, 80);
+    let steps = 6;
+    fill(255);
+    for (let i = 0; i <= steps; i++) {
+      let t = i / steps;
+      // Get the location of the point
+      let x = bezierPoint(85, 10, 90, 15, t);
+      let y = bezierPoint(20, 10, 90, 80, t);
+      // Get the tangent points
+      let tx = bezierTangent(85, 10, 90, 15, t);
+      let ty = bezierTangent(20, 10, 90, 80, t);
+      // Calculate an angle from the tangent points
+      let a = atan2(ty, tx);
+      a += PI;
+      stroke(255, 102, 0);
+      line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);
+      // The following line of code makes a line
+      // inverse of the above line
+      //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
+      stroke(0);
+      ellipse(x, y, 5, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    noFill();
+    bezier(85, 20, 10, 10, 90, 90, 15, 80);
+    stroke(255, 102, 0);
+    let steps = 16;
+    for (let i = 0; i <= steps; i++) {
+      let t = i / steps;
+      let x = bezierPoint(85, 10, 90, 15, t);
+      let y = bezierPoint(20, 10, 90, 80, t);
+      let tx = bezierTangent(85, 10, 90, 15, t);
+      let ty = bezierTangent(20, 10, 90, 80, t);
+      let a = atan2(ty, tx);
+      a -= HALF_PI;
+      line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+    }
+    </code>
+    </div>
+alt: >-
+  s-shaped line with 6 short orange lines showing the tangents at those points.
+
+  s-shaped line with 6 short orange lines showing lines coming out the underside
+  of the bezier.
+return:
+  description: the tangent at position t
+  type: Number
+chainable: false
+---
+
+
+# bezierTangent
diff --git a/src/content/reference/en/p5/bezierVertex.mdx b/src/content/reference/en/p5/bezierVertex.mdx
new file mode 100644
index 0000000000..a0c2ba99d3
--- /dev/null
+++ b/src/content/reference/en/p5/bezierVertex.mdx
@@ -0,0 +1,101 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: bezierVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Specifies vertex coordinates for Bezier curves. Each call to
+
+  bezierVertex() defines the position of two control points and
+
+  one anchor point of a Bezier curve, adding a new segment to a
+
+  line or shape. For WebGL mode bezierVertex() can be used in 2D
+
+  as well as 3D mode. 2D mode expects 6 parameters, while 3D mode
+
+  expects 9 parameters (including z coordinates).</p>
+
+  <p>The first time bezierVertex() is used within a <a
+  href="#/p5/beginShape">beginShape()</a>
+
+  call, it must be prefaced with a call to <a href="#/p5/vertex">vertex()</a> to
+  set the first anchor
+
+  point. This function must be used between <a
+  href="#/p5/beginShape">beginShape()</a> and <a
+  href="#/p5/endShape">endShape()</a>
+
+  and only when there is no MODE or POINTS parameter specified to
+
+  <a href="#/p5/beginShape">beginShape()</a>.</p>
+line: 297
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noFill();
+    beginShape();
+    vertex(30, 20);
+    bezierVertex(80, 0, 80, 75, 30, 75);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    beginShape();
+    vertex(30, 20);
+    bezierVertex(80, 0, 80, 75, 30, 75);
+    bezierVertex(50, 80, 60, 25, 30, 20);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      setAttributes('antialias', true);
+    }
+    function draw() {
+      orbitControl();
+      background(50);
+      strokeWeight(4);
+      stroke(255);
+      point(-25, 30);
+      point(25, 30);
+      point(25, -30);
+      point(-25, -30);
+
+      strokeWeight(1);
+      noFill();
+
+      beginShape();
+      vertex(-25, 30);
+      bezierVertex(25, 30, 25, -30, -25, -30);
+      endShape();
+
+      beginShape();
+      vertex(-25, 30, 20);
+      bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);
+      endShape();
+    }
+    </code>
+    </div>
+alt: >-
+  crescent-shaped line in middle of canvas. Points facing left.
+
+  white crescent shape in middle of canvas. Points facing left.
+
+  crescent shape in middle of canvas with another crescent shape on positive
+  z-axis.
+chainable: true
+---
+
+
+# bezierVertex
diff --git a/src/content/reference/en/p5/blendMode.mdx b/src/content/reference/en/p5/blendMode.mdx
new file mode 100644
index 0000000000..12255245b6
--- /dev/null
+++ b/src/content/reference/en/p5/blendMode.mdx
@@ -0,0 +1,128 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: blendMode
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Blends the pixels in the display window according to the defined mode.
+
+  There is a choice of the following modes to blend the source pixels (A)
+
+  with the ones of pixels already in the display window (B):</p>
+
+  <ul>
+
+  <li><code>BLEND</code> - linear interpolation of colours: C =
+
+  A*factor + B. <b>This is the default blending mode.</b></li>
+
+  <li><code>ADD</code> - sum of A and B</li>
+
+  <li><code>DARKEST</code> - only the darkest colour succeeds: C =
+
+  min(A*factor, B).</li>
+
+  <li><code>LIGHTEST</code> - only the lightest colour succeeds: C =
+
+  max(A*factor, B).</li>
+
+  <li><code>DIFFERENCE</code> - subtract colors from underlying image.
+
+  <em>(2D)</em></li>
+
+  <li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less
+
+  extreme.</li>
+
+  <li><code>MULTIPLY</code> - multiply the colors, result will always be
+
+  darker.</li>
+
+  <li><code>SCREEN</code> - opposite multiply, uses inverse values of the
+
+  colors.</li>
+
+  <li><code>REPLACE</code> - the pixels entirely replace the others and
+
+  don't utilize alpha (transparency) values.</li>
+
+  <li><code>REMOVE</code> - removes pixels from B with the alpha strength of
+  A.</li>
+
+  <li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN
+
+  </code>. Multiplies dark values, and screens light values. <em>(2D)</em></li>
+
+  <li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%
+
+  gray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li>
+
+  <li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and
+
+  <code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh.
+  <em>(2D)</em>
+
+  </li>
+
+  <li><code>DODGE</code> - lightens light tones and increases contrast,
+
+  ignores darks. <em>(2D)</em></li>
+
+  <li><code>BURN</code> - darker areas are applied, increasing contrast,
+
+  ignores lights. <em>(2D)</em></li>
+
+  <li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li>
+
+  </ul>
+
+
+  <p><em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D
+  renderer.<br>
+
+  <em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL
+  renderer.</p>
+line: 451
+params:
+  - name: mode
+    description: |
+      <p>blend mode to set for canvas.
+                     either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
+                     EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+                     SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    blendMode(LIGHTEST);
+    strokeWeight(30);
+    stroke(80, 150, 255);
+    line(25, 25, 75, 75);
+    stroke(255, 50, 50);
+    line(75, 25, 25, 75);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    blendMode(MULTIPLY);
+    strokeWeight(30);
+    stroke(80, 150, 255);
+    line(25, 25, 75, 75);
+    stroke(255, 50, 50);
+    line(75, 25, 25, 75);
+    </code>
+    </div>
+alt: |-
+  translucent image thick red & blue diagonal rounded lines intersecting center
+  Thick red & blue diagonal rounded lines intersecting center. dark at overlap
+chainable: false
+---
+
+
+# blendMode
diff --git a/src/content/reference/en/p5/blue.mdx b/src/content/reference/en/p5/blue.mdx
new file mode 100644
index 0000000000..7e39524c6c
--- /dev/null
+++ b/src/content/reference/en/p5/blue.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: blue
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the blue value from a <a href="#/p5.Color">p5.Color</a> object,
+  array of color components, or CSS color string.</p>
+line: 46
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - >
+
+    <div>
+
+    <code>
+
+    const c = color(175, 100, 220);
+
+    fill(c);
+
+    rect(15, 20, 35, 60);
+
+    // Sets 'blueValue' to 220.
+
+    const blueValue = blue(c);
+
+    fill(0, 0, blueValue);
+
+    rect(50, 20, 35, 60);
+
+    describe('Two rectangles. The left one is light purple and the right one is
+    royal blue.');
+
+    </code>
+
+    </div>
+return:
+  description: the blue value.
+  type: Number
+chainable: false
+---
+
+
+# blue
diff --git a/src/content/reference/en/p5/boolean.mdx b/src/content/reference/en/p5/boolean.mdx
new file mode 100644
index 0000000000..1377296c24
--- /dev/null
+++ b/src/content/reference/en/p5/boolean.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: boolean
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a number or string to its boolean representation.
+  For a number, any non-zero value (positive or negative) evaluates to true,
+  while zero evaluates to false. For a string, the value "true" evaluates to
+  true, while any other value evaluates to false. When an array of number or
+  string values is passed in, then a array of booleans of the same length is
+  returned.</p>
+line: 112
+params:
+  - name: 'n'
+    description: |
+      <p>value to parse</p>
+    type: String|Boolean|Number|Array
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(boolean(0)); // false
+    print(boolean(1)); // true
+    print(boolean('true')); // true
+    print(boolean('abcd')); // false
+    print(boolean([0, 12, 'true'])); // [false, true, true]
+    </code></div>
+return:
+  description: boolean representation of value
+  type: Boolean
+chainable: false
+---
+
+
+# boolean
diff --git a/src/content/reference/en/p5/box.mdx b/src/content/reference/en/p5/box.mdx
new file mode 100644
index 0000000000..5257417c7a
--- /dev/null
+++ b/src/content/reference/en/p5/box.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: box
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: |
+  <p>Draw a box with given width, height and depth</p>
+line: 268
+params:
+  - name: width
+    description: |
+      <p>width of the box</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the box</p>
+    type: Number
+    optional: true
+  - name: depth
+    description: |
+      <p>depth of the box</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>Optional number of triangle
+                                 subdivisions in x-dimension</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>Optional number of triangle
+                                 subdivisions in y-dimension</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // draw a spinning box
+    // with width, height and depth of 50
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      describe('a white box rotating in 3D space');
+    }
+
+    function draw() {
+      background(200);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(50);
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# box
diff --git a/src/content/reference/en/p5/brightness.mdx b/src/content/reference/en/p5/brightness.mdx
new file mode 100644
index 0000000000..aad00ef1c5
--- /dev/null
+++ b/src/content/reference/en/p5/brightness.mdx
@@ -0,0 +1,88 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: brightness
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the HSB brightness value from a
+  <a href="#/p5.Color">p5.Color</a> object, array of color components, or
+  CSS color string.</p>
+line: 74
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    noStroke();
+
+    colorMode(HSB, 255);
+
+    const c = color(0, 126, 255);
+
+    fill(c);
+
+    rect(15, 20, 35, 60);
+
+    // Sets 'brightValue' to 255.
+
+    const brightValue = brightness(c);
+
+    fill(brightValue);
+
+    rect(50, 20, 35, 60);
+
+    describe('Two rectangles. The left one is salmon pink and the right one is
+    white.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    noStroke();
+
+    colorMode(HSB, 255);
+
+    const c = color('hsb(60, 100%, 50%)');
+
+    fill(c);
+
+    rect(15, 20, 35, 60);
+
+    // Sets 'brightValue' to 127.5 (50% of 255)
+
+    const brightValue = brightness(c);
+
+    fill(brightValue);
+
+    rect(50, 20, 35, 60);
+
+    describe('Two rectangles. The left one is olive and the right one is
+    gray.');
+
+    </code>
+
+    </div>
+return:
+  description: the brightness value.
+  type: Number
+chainable: false
+---
+
+
+# brightness
diff --git a/src/content/reference/en/p5/buildGeometry.mdx b/src/content/reference/en/p5/buildGeometry.mdx
new file mode 100644
index 0000000000..eb91bc2c8a
--- /dev/null
+++ b/src/content/reference/en/p5/buildGeometry.mdx
@@ -0,0 +1,86 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: buildGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Creates a new <a href="#/p5.Geometry">p5.Geometry</a> that contains all
+
+  the shapes drawn in a provided callback function. The returned combined shape
+
+  can then be drawn all at once using <a href="#/p5/model">model()</a>.</p>
+
+  <p>If you need to draw complex shapes every frame which don't change over
+  time,
+
+  combining them with <code>buildGeometry()</code> once and then drawing that
+  will run
+
+  faster than repeatedly drawing the individual pieces.</p>
+
+  <p>One can also draw shapes directly between
+
+  <a href="#/p5/beginGeometry">beginGeometry()</a> and
+
+  <a href="#/p5/endGeometry">endGeometry()</a> instead of using a callback
+
+  function.</p>
+line: 102
+params:
+  - name: callback
+    description: |
+      <p>A function that draws shapes.</p>
+    type: Function
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let particles;
+    let button;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      button = createButton('New');
+      button.mousePressed(makeParticles);
+      makeParticles();
+    }
+
+    function makeParticles() {
+      if (particles) freeGeometry(particles);
+
+      particles = buildGeometry(() => {
+        for (let i = 0; i < 60; i++) {
+          push();
+          translate(
+            randomGaussian(0, 20),
+            randomGaussian(0, 20),
+            randomGaussian(0, 20)
+          );
+          sphere(5);
+          pop();
+        }
+      });
+    }
+
+    function draw() {
+      background(255);
+      noStroke();
+      lights();
+      orbitControl();
+      model(particles);
+    }
+    </code>
+    </div>
+alt: A cluster of spheres.
+return:
+  description: The model that was built from the callback function.
+  type: p5.Geometry
+chainable: false
+---
+
+
+# buildGeometry
diff --git a/src/content/reference/en/p5/byte.mdx b/src/content/reference/en/p5/byte.mdx
new file mode 100644
index 0000000000..46573cab1c
--- /dev/null
+++ b/src/content/reference/en/p5/byte.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: byte
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a number, string representation of a number, or boolean to its
+  byte
+
+  representation. A byte can be only a whole number between -128 and 127, so
+
+  when a value outside of this range is converted, it wraps around to the
+
+  corresponding byte representation. When an array of number, string or boolean
+
+  values is passed in, then an array of bytes the same length is returned.</p>
+line: 144
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(byte(127)); // 127
+    print(byte(128)); // -128
+    print(byte(23.4)); // 23
+    print(byte('23.4')); // 23
+    print(byte('hello')); // NaN
+    print(byte(true)); // 1
+    print(byte([0, 255, '100'])); // [0, -1, 100]
+    </code></div>
+return:
+  description: byte representation of value
+  type: Number
+chainable: false
+---
+
+
+# byte
diff --git a/src/content/reference/en/p5/camera.mdx b/src/content/reference/en/p5/camera.mdx
new file mode 100644
index 0000000000..22b79b050e
--- /dev/null
+++ b/src/content/reference/en/p5/camera.mdx
@@ -0,0 +1,90 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: camera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets the position of the current camera in a 3D sketch.
+
+  Parameters for this function define the camera's position,
+
+  the center of the sketch (where the camera is pointing),
+
+  and an up direction (the orientation of the camera).</p>
+
+  <p>This function simulates the movements of the camera, allowing objects to be
+
+  viewed from various angles. Remember, it does not move the objects themselves
+
+  but the camera instead. For example when the centerX value is positive,
+
+  and the camera is rotating to the right side of the sketch,
+
+  the object will seem like it's moving to the left.</p>
+
+  <p>See this <a href =
+  "https://www.openprocessing.org/sketch/740258">example</a>
+
+  to view the position of your camera.</p>
+
+  <p>If no parameters are given, the following default is used:
+
+  camera(0, 0, 800, 0, 0, 0, 0, 1, 0)</p>
+isConstructor: true
+line: 13
+params:
+  - name: x
+    description: |
+      <p>camera position value on x axis</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>camera position value on y axis</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>camera position value on z axis</p>
+    type: Number
+    optional: true
+  - name: centerX
+    description: |
+      <p>x coordinate representing center of the sketch</p>
+    type: Number
+    optional: true
+  - name: centerY
+    description: |
+      <p>y coordinate representing center of the sketch</p>
+    type: Number
+    optional: true
+  - name: centerZ
+    description: |
+      <p>z coordinate representing center of the sketch</p>
+    type: Number
+    optional: true
+  - name: upX
+    description: |
+      <p>x component of direction 'up' from camera</p>
+    type: Number
+    optional: true
+  - name: upY
+    description: |
+      <p>y component of direction 'up' from camera</p>
+    type: Number
+    optional: true
+  - name: upZ
+    description: |
+      <p>z component of direction 'up' from camera</p>
+    type: Number
+    optional: true
+itemtype: method
+alt: |-
+  White square repeatedly grows to fill canvas and then shrinks.
+  An interactive example of a red cube with 3 sliders for moving it across x, y,
+  z axis and 3 sliders for shifting its center.
+---
+
+
+# camera
diff --git a/src/content/reference/en/p5/ceil.mdx b/src/content/reference/en/p5/ceil.mdx
new file mode 100644
index 0000000000..d2e29ca25e
--- /dev/null
+++ b/src/content/reference/en/p5/ceil.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ceil
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the closest integer value that is greater than or equal to the
+
+  parameter's value. For example, calling <code>ceil(9.03)</code> returns the
+  value
+
+  10.</p>
+line: 39
+params:
+  - name: 'n'
+    description: |
+      <p>number to round up.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Set the range for RGB values from 0 to 1.
+
+    colorMode(RGB, 1);
+
+    noStroke();
+
+
+    let r = 0.3;
+
+    fill(r, 0, 0);
+
+    rect(0, 0, width / 2, height);
+
+
+    // Round r up to 1.
+
+    r = ceil(r);
+
+    fill(r, 0, 0);
+
+    rect(width / 2, 0, width / 2, height);
+
+
+    describe('Two rectangles. The one on the left is dark red and the one on the
+    right is bright red.');
+
+    </code>
+
+    </div>
+return:
+  description: rounded up number.
+  type: Integer
+chainable: false
+---
+
+
+# ceil
diff --git a/src/content/reference/en/p5/changed.mdx b/src/content/reference/en/p5/changed.mdx
new file mode 100644
index 0000000000..fe61f0038b
--- /dev/null
+++ b/src/content/reference/en/p5/changed.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: changed
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p><code>myElement.changed()</code> sets a function to call when the value of
+  the
+
+  <a href="#/p5.Element">p5.Element</a> object changes. Calling
+
+  <code>myElement.changed(false)</code> disables the function.</p>
+line: 309
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the element changes.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a dropdown menu and add a few color options.
+      let drop = createSelect();
+      drop.position(0, 0);
+      drop.option('red');
+      drop.option('green');
+      drop.option('blue');
+
+      // When the color option changes, paint the background with
+      // that color.
+      drop.changed(() => {
+        let c = drop.value();
+        background(c);
+      });
+
+      describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a checkbox and place it beneath the canvas.
+      let checkbox = createCheckbox(' circle');
+      checkbox.position(0, 100);
+
+      // When the checkbox changes, paint the background gray
+      // and determine whether to draw a circle.
+      checkbox.changed(() => {
+        background(200);
+        if (checkbox.checked() === true) {
+          circle(50, 50, 30);
+        }
+      });
+
+      describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# changed
diff --git a/src/content/reference/en/p5/circle.mdx b/src/content/reference/en/p5/circle.mdx
new file mode 100644
index 0000000000..d3ce39e4da
--- /dev/null
+++ b/src/content/reference/en/p5/circle.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: circle
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: |
+  <p>Draws a circle to the canvas. A circle is a round shape. Every point on the
+  edge of a circle is the same distance from its center. By default, the first
+  two parameters set the location of the center of the circle. The third
+  parameter sets the shape's width and height (diameter). The origin may be
+  changed with the <a href="#/p5/ellipseMode">ellipseMode()</a> function.</p>
+line: 274
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the center of the circle.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the center of the circle.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>diameter of the circle.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >
+
+    <div>
+
+    <code>
+
+    circle(30, 30, 20);
+
+    describe('A white circle with black outline in the middle of a gray
+    canvas.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# circle
diff --git a/src/content/reference/en/p5/class.mdx b/src/content/reference/en/p5/class.mdx
new file mode 100644
index 0000000000..4636781caa
--- /dev/null
+++ b/src/content/reference/en/p5/class.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: class
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Creates and names a <a href="#/p5/class">class</a> which is a template for
+
+  the creation of <a href="#/p5/object">objects</a>.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class">the
+  MDN entry</a>:
+
+  The class declaration creates a new Class with a given name using
+
+  prototype-based inheritance.</p>
+line: 379
+itemtype: property
+class: p5
+example:
+  - >-
+
+    <div class='norender'>
+
+    <code>
+
+    class Rectangle {
+      constructor(name, height, width) {
+        this.name = name;
+        this.height = height;
+        this.width = width;
+      }
+    }
+
+    let square = new Rectangle('square', 1, 1); // creating new instance of
+    Polygon Class.
+
+    console.log(square.width); // prints '1' to the console
+
+    </code>
+
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# class
diff --git a/src/content/reference/en/p5/clear.mdx b/src/content/reference/en/p5/clear.mdx
new file mode 100644
index 0000000000..e9f32dea41
--- /dev/null
+++ b/src/content/reference/en/p5/clear.mdx
@@ -0,0 +1,96 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clear
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Clears the pixels on the canvas. This function makes every pixel 100%
+
+  transparent. Calling <code>clear()</code> doesn't clear objects created by
+  <code>createX()</code>
+
+  functions such as <a href="#/p5/createGraphics">createGraphics()</a>,
+
+  <a href="#/p5/createVideo">createVideo()</a>, and
+
+  <a href="#/p5/createImg">createImg()</a>. These objects will remain
+
+  unchanged after calling clear() and can be redrawn.</p>
+
+  <p>In WebGL mode, this function can clear the screen to a specific color. It
+
+  interprets four numeric parameters as normalized RGBA color values. It also
+
+  clears the depth buffer. If you are not using the WebGL renderer, these
+
+  parameters will have no effect.</p>
+line: 390
+params:
+  - name: r
+    description: |
+      <p>normalized red value.</p>
+    type: Number
+    optional: true
+  - name: g
+    description: |
+      <p>normalized green value.</p>
+    type: Number
+    optional: true
+  - name: b
+    description: |
+      <p>normalized blue value.</p>
+    type: Number
+    optional: true
+  - name: a
+    description: |
+      <p>normalized alpha value.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      circle(mouseX, mouseY, 20);
+      describe('A white circle is drawn at the mouse x- and y-coordinates.');
+    }
+
+    function mousePressed() {
+      clear();
+      background(128);
+      describe('The canvas is cleared when the mouse is clicked.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      pg = createGraphics(60, 60);
+      pg.background(200);
+      pg.noStroke();
+      pg.circle(pg.width / 2, pg.height / 2, 15);
+      image(pg, 20, 20);
+      describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
+    }
+
+    function mousePressed() {
+      clear();
+      image(pg, 20, 20);
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# clear
diff --git a/src/content/reference/en/p5/clearDepth.mdx b/src/content/reference/en/p5/clearDepth.mdx
new file mode 100644
index 0000000000..aa6e7e9601
--- /dev/null
+++ b/src/content/reference/en/p5/clearDepth.mdx
@@ -0,0 +1,92 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clearDepth
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>This makes the canvas forget how far from the camera everything that has
+
+  been drawn was. Use this if you want to make sure the next thing you draw
+
+  will not draw behind anything that is already on the canvas.</p>
+
+  <p>This is useful for things like feedback effects, where you want the
+  previous
+
+  frame to act like a background for the next frame, and not like a plane in
+
+  3D space in the scene.</p>
+
+  <p>This method is only available in WebGL mode. Since 2D mode does not have
+
+  3D depth, anything you draw will always go on top of the previous content on
+
+  the canvas anyway.</p>
+line: 381
+params:
+  - name: depth
+    description: >
+      <p>The value, between 0 and 1, to reset the depth to, where
+
+      0 corresponds to a value as close as possible to the camera before getting
+
+      clipped, and 1 corresponds to a value as far away from the camera as
+      possible.
+
+      The default value is 1.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let prev, next;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      prev = createFramebuffer({ format: FLOAT });
+      next = createFramebuffer({ format: FLOAT });
+      noStroke();
+    }
+
+    function draw() {
+      // Swap prev and next so that we can use the previous
+      // frame as a texture when drawing the current frame
+      [prev, next] = [next, prev];
+
+      // Draw to the framebuffer
+      next.begin();
+      background(255);
+
+      push();
+      tint(255, 253);
+      image(prev, -width/2, -height/2);
+      // Make sure the image plane doesn't block you from seeing any part
+      // of the scene
+      clearDepth();
+      pop();
+
+      push();
+      normalMaterial();
+      translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(12);
+      pop();
+      next.end();
+
+      image(next, -width/2, -height/2);
+    }
+    </code>
+    </div>
+alt: |-
+  A red, green, and blue box (using normalMaterial) moves and rotates around
+  the canvas, leaving a trail behind it that slowly grows and fades away.
+chainable: false
+---
+
+
+# clearDepth
diff --git a/src/content/reference/en/p5/clearStorage.mdx b/src/content/reference/en/p5/clearStorage.mdx
new file mode 100644
index 0000000000..cc94dfe23e
--- /dev/null
+++ b/src/content/reference/en/p5/clearStorage.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clearStorage
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: |
+  <p>Clears all local storage items set with storeItem()
+   for the current domain.</p>
+line: 173
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myNum = 10;
+       let myBool = false;
+       storeItem('myNum', myNum);
+       storeItem('myBool', myBool);
+       print(getItem('myNum')); // logs 10 to the console
+       print(getItem('myBool')); // logs false to the console
+       clearStorage();
+       print(getItem('myNum')); // logs null to the console
+       print(getItem('myBool')); // logs null to the console
+     }
+     </code></div>
+chainable: false
+---
+
+
+# clearStorage
diff --git a/src/content/reference/en/p5/clip.mdx b/src/content/reference/en/p5/clip.mdx
new file mode 100644
index 0000000000..4bbf17f0b9
--- /dev/null
+++ b/src/content/reference/en/p5/clip.mdx
@@ -0,0 +1,117 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: clip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Use the shape drawn by a callback function to mask subsequent things drawn
+  to the canvas.
+
+  Only opaque regions of the mask shape will allow content to be drawn.</p>
+
+  <p>The mask will apply to anything drawn after this call. To draw without a
+  mask, contain
+
+  the code to apply the mask and to draw the masked content between
+
+  <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a>.</p>
+
+  <p>Alternatively, rather than drawing the mask shape in a function, draw the
+
+  shape between <a href="#/p5/beginClip">beginClip()</a> and <a
+  href="#/p5/endClip">endClip()</a>.</p>
+
+  <p>Options can include:</p>
+
+  <ul>
+
+  <li><code>invert</code>: A boolean specifying whether or not to mask the areas
+  <em>not</em> filled by the mask shape. Defaults to false.</li>
+
+  </ul>
+line: 120
+params:
+  - name: callback
+    description: |
+      <p>A function that draws the mask shape.</p>
+    type: Function
+  - name: options
+    description: |
+      <p>An object containing clip settings.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noStroke();
+
+    // Mask in some shapes
+    push();
+    clip(() => {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    });
+
+    fill('red');
+    rect(5, 5, 45, 45);
+    pop();
+
+    translate(50, 50);
+
+    // Mask out the same shapes
+    push();
+    clip(() => {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    }, { invert: true });
+
+    fill('red');
+    rect(5, 5, 45, 45);
+    pop();
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      noStroke();
+
+      clip(() => {
+        push();
+        rotateX(frameCount * 0.01);
+        rotateY(frameCount * 0.01);
+        scale(0.5);
+        torus(30, 15);
+        pop();
+      });
+
+      beginShape(QUAD_STRIP);
+      fill(0, 255, 255);
+      vertex(-width/2, -height/2);
+      vertex(width/2, -height/2);
+      fill(100, 0, 100);
+      vertex(-width/2, height/2);
+      vertex(width/2, height/2);
+      endShape();
+    }
+    </code>
+    </div>
+alt: |-
+  A silhouette of a rotating torus colored with a gradient from
+  cyan to purple
+chainable: false
+---
+
+
+# clip
diff --git a/src/content/reference/en/p5/color.mdx b/src/content/reference/en/p5/color.mdx
new file mode 100644
index 0000000000..dffb94530e
--- /dev/null
+++ b/src/content/reference/en/p5/color.mdx
@@ -0,0 +1,275 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: color
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Creates a <a href="#/p5/p5.Color">p5.Color</a> object. By default, the
+
+  parameters are interpreted as RGB values. Calling <code>color(255, 204,
+  0)</code> will
+
+  return a bright yellow color. The way these parameters are interpreted may
+
+  be changed with the <a href="#/p5/colorMode">colorMode()</a> function.</p>
+
+  <p>The version of <code>color()</code> with one parameter interprets the value
+  one of two
+
+  ways. If the parameter is a number, it's interpreted as a grayscale value.
+
+  If the parameter is a string, it's interpreted as a CSS color string.</p>
+
+  <p>The version of <code>color()</code> with two parameters interprets the
+  first one as a
+
+  grayscale value. The second parameter sets the alpha (transparency) value.</p>
+
+  <p>The version of <code>color()</code> with three parameters interprets them
+  as RGB, HSB,
+
+  or HSL colors, depending on the current <code>colorMode()</code>.</p>
+
+  <p>The version of <code>color()</code> with four parameters interprets them as
+  RGBA, HSBA,
+
+  or HSLA colors, depending on the current <code>colorMode()</code>. The last
+  parameter
+
+  sets the alpha (transparency) value.</p>
+line: 120
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    const c = color(255, 204, 0);
+
+    fill(c);
+
+    noStroke();
+
+    rect(30, 20, 55, 55);
+
+    describe('A yellow rectangle on a gray canvas.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // RGB values.
+
+    let c = color(255, 204, 0);
+
+    fill(c);
+
+    noStroke();
+
+    circle(25, 25, 80);
+
+    // A grayscale value.
+
+    c = color(65);
+
+    fill(c);
+
+    circle(75, 75, 80);
+
+    describe(
+      'Two ellipses. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
+    );
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // A CSS named color.
+
+    const c = color('magenta');
+
+    fill(c);
+
+    noStroke();
+
+    square(20, 20, 60);
+
+    describe('A magenta square on a gray canvas.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // CSS hex color codes.
+
+    noStroke();
+
+    let c = color('#0f0');
+
+    fill(c);
+
+    rect(0, 10, 45, 80);
+
+    c = color('#00ff00');
+
+    fill(c);
+
+    rect(55, 10, 45, 80);
+
+    describe('Two bright green rectangles on a gray canvas.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // RGB and RGBA color strings.
+
+    noStroke();
+
+    let c = color('rgb(0,0,255)');
+
+    fill(c);
+
+    square(10, 10, 35);
+
+    c = color('rgb(0%, 0%, 100%)');
+
+    fill(c);
+
+    square(55, 10, 35);
+
+    c = color('rgba(0, 0, 255, 1)');
+
+    fill(c);
+
+    square(10, 55, 35);
+
+    c = color('rgba(0%, 0%, 100%, 1)');
+
+    fill(c);
+
+    square(55, 55, 35);
+
+    describe('Four blue squares in corners of a gray canvas.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // HSL and HSLA color strings.
+
+    let c = color('hsl(160, 100%, 50%)');
+
+    noStroke();
+
+    fill(c);
+
+    rect(0, 10, 45, 80);
+
+    c = color('hsla(160, 100%, 50%, 0.5)');
+
+    fill(c);
+
+    rect(55, 10, 45, 80);
+
+    describe('Two sea green rectangles. A darker rectangle on the left and a
+    brighter one on the right.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // HSB and HSBA color strings.
+
+    let c = color('hsb(160, 100%, 50%)');
+
+    noStroke();
+
+    fill(c);
+
+    rect(0, 10, 45, 80);
+
+    c = color('hsba(160, 100%, 50%, 0.5)');
+
+    fill(c);
+
+    rect(55, 10, 45, 80);
+
+    describe('Two green rectangles. A darker rectangle on the left and a
+    brighter one on the right.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Changing color modes.
+
+    noStroke();
+
+    let c = color(50, 55, 100);
+
+    fill(c);
+
+    rect(0, 10, 45, 80);
+
+    colorMode(HSB, 100);
+
+    c = color(50, 55, 100);
+
+    fill(c);
+
+    rect(55, 10, 45, 80);
+
+    describe('Two blue rectangles. A darker rectangle on the left and a brighter
+    one on the right.');
+
+    </code>
+
+    </div>
+return:
+  description: resulting color.
+  type: p5.Color
+chainable: false
+---
+
+
+# color
diff --git a/src/content/reference/en/p5/colorMode.mdx b/src/content/reference/en/p5/colorMode.mdx
new file mode 100644
index 0000000000..11bbc61933
--- /dev/null
+++ b/src/content/reference/en/p5/colorMode.mdx
@@ -0,0 +1,149 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: colorMode
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Changes the way p5.js interprets color data. By default, the numeric
+
+  parameters for <a href="#/p5/fill">fill()</a>,
+
+  <a href="#/p5/stroke">stroke()</a>,
+
+  <a href="#/p5/background">background()</a>, and
+
+  <a href="#/p5/color">color()</a> are defined by values between 0 and 255
+
+  using the RGB color model. This is equivalent to calling
+
+  <code>colorMode(RGB, 255)</code>. Pure red is <code>color(255, 0, 0)</code> in
+  this model.</p>
+
+  <p>Calling <code>colorMode(RGB, 100)</code> sets colors to be interpreted as
+  RGB color
+
+  values between 0 and 100.  Pure red is <code>color(100, 0, 0)</code> in this
+  model.</p>
+
+  <p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes
+  to HSB or HSL system
+
+  instead of RGB.</p>
+
+  <p><a href="#/p5.Color">p5.Color</a> objects remember the mode that they were
+
+  created in. Changing modes doesn't affect their appearance.</p>
+line: 459
+itemtype: method
+class: p5
+example:
+  - >
+
+    <div>
+
+    <code>
+
+    noStroke();
+
+    colorMode(RGB, 100);
+
+    for (let i = 0; i < 100; i += 1) {
+      for (let j = 0; j < 100; j += 1) {
+        stroke(i, j, 0);
+        point(i, j);
+      }
+    }
+
+    describe(
+      'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
+    );
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    noStroke();
+
+    colorMode(HSB, 100);
+
+    for (let i = 0; i < 100; i++) {
+      for (let j = 0; j < 100; j++) {
+        stroke(i, j, 100);
+        point(i, j);
+      }
+    }
+
+    describe('A rainbow gradient from left-to-right. Brightness transitions to
+    white at the top.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    colorMode(RGB, 255);
+
+    let myColor = color(180, 175, 230);
+
+    background(myColor);
+
+    colorMode(RGB, 1);
+
+    let redValue = red(myColor);
+
+    let greenValue = green(myColor);
+
+    let blueValue = blue(myColor);
+
+    text(`Red: ${redValue}`, 10, 10, 80, 80);
+
+    text(`Green: ${greenValue}`, 10, 40, 80, 80);
+
+    text(`Blue: ${blueValue}`, 10, 70, 80, 80);
+
+    describe('A purple canvas with the red, green, and blue decimal values of
+    the color written on it.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    noFill();
+
+    colorMode(RGB, 255, 255, 255, 1);
+
+    background(255);
+
+    strokeWeight(4);
+
+    stroke(255, 0, 10, 0.3);
+
+    circle(40, 40, 50);
+
+    circle(50, 60, 50);
+
+    describe('Two overlapping translucent pink circle outlines.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# colorMode
diff --git a/src/content/reference/en/p5/concat.mdx b/src/content/reference/en/p5/concat.mdx
new file mode 100644
index 0000000000..0e72f59e0a
--- /dev/null
+++ b/src/content/reference/en/p5/concat.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: concat
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Concatenates two arrays, maps to Array.concat(). Does not modify the
+  input arrays.</p>
+line: 112
+params:
+  - name: a
+    description: |
+      <p>first Array to concatenate</p>
+    type: Array
+  - name: b
+    description: |
+      <p>second Array to concatenate</p>
+    type: Array
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let arr1 = ['A', 'B', 'C'];
+      let arr2 = [1, 2, 3];
+
+      print(arr1); // ['A','B','C']
+      print(arr2); // [1,2,3]
+
+      let arr3 = concat(arr1, arr2);
+
+      print(arr1); // ['A','B','C']
+      print(arr2); // [1, 2, 3]
+      print(arr3); // ['A','B','C', 1, 2, 3]
+    }
+    </code></div>
+return:
+  description: concatenated array
+  type: Array
+chainable: false
+---
+
+
+# concat
diff --git a/src/content/reference/en/p5/cone.mdx b/src/content/reference/en/p5/cone.mdx
new file mode 100644
index 0000000000..d1664179a3
--- /dev/null
+++ b/src/content/reference/en/p5/cone.mdx
@@ -0,0 +1,121 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: cone
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draw a cone with given radius and height</p>
+
+  <p>DetailX and detailY determine the number of subdivisions in the x-dimension
+  and
+
+  the y-dimension of a cone. More subdivisions make the cone seem smoother. The
+
+  recommended maximum value for detailX is 24. Using a value greater than 24
+
+  may cause a warning or slow down the browser.</p>
+line: 742
+params:
+  - name: radius
+    description: |
+      <p>radius of the bottom surface</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the cone</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of segments,
+                                  the more segments the smoother geometry
+                                  default is 24</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of segments,
+                                  the more segments the smoother geometry
+                                  default is 1</p>
+    type: Integer
+    optional: true
+  - name: cap
+    description: |
+      <p>whether to draw the base of the cone</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // draw a spinning cone
+    // with radius 40 and height 70
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('a rotating white cone');
+    }
+
+    function draw() {
+      background(200);
+      rotateX(frameCount * 0.01);
+      rotateZ(frameCount * 0.01);
+      cone(40, 70);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailx works
+    let detailX;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailX = createSlider(3, 16, 3);
+      detailX.position(10, height + 5);
+      detailX.style('width', '80px');
+      describe(
+        'a rotating white cone with limited X detail, with a slider that adjusts detailX'
+      );
+    }
+
+    function draw() {
+      background(205, 102, 94);
+      rotateY(millis() / 1000);
+      cone(30, 65, detailX.value(), 16);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailY works
+    let detailY;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailY = createSlider(3, 16, 3);
+      detailY.position(10, height + 5);
+      detailY.style('width', '80px');
+      describe(
+        'a rotating white cone with limited Y detail, with a slider that adjusts detailY'
+      );
+    }
+
+    function draw() {
+      background(205, 102, 94);
+      rotateY(millis() / 1000);
+      cone(30, 65, 16, detailY.value());
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# cone
diff --git a/src/content/reference/en/p5/const.mdx b/src/content/reference/en/p5/const.mdx
new file mode 100644
index 0000000000..210de7acec
--- /dev/null
+++ b/src/content/reference/en/p5/const.mdx
@@ -0,0 +1,85 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: const
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Creates and names a new constant. Like a variable created with <a
+  href="#/p5/let">let</a>,
+
+  a constant that is created with <a href="#/p5/const">const</a> is a container
+  for a value,
+
+  however constants cannot be reassigned once they are declared. Although it is
+
+  noteworthy that for non-primitive data types like objects & arrays, their
+
+  elements can still be changeable. So if a variable is assigned an array, you
+
+  can still add or remove elements from the array but cannot reassign another
+
+  array to it. Also unlike <code>let</code>, you cannot declare variables
+  without value
+
+  using const.</p>
+
+  <p>Constants have block-scope. This means that the constant only exists within
+
+  the <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block">
+
+  block</a> that it is created within. A constant cannot be redeclared within a
+  scope in which it
+
+  already exists.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">the
+  MDN entry</a>:
+
+  Declares a read-only named constant.
+
+  Constants are block-scoped, much like variables defined using the 'let'
+  statement.
+
+  The value of a constant can't be changed through reassignment, and it can't be
+  redeclared.</p>
+line: 34
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // define myFavNumber as a constant and give it the value 7
+    const myFavNumber = 7;
+    console.log('my favorite number is: ' + myFavNumber);
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    const bigCats = ['lion', 'tiger', 'panther'];
+    bigCats.push('leopard');
+    console.log(bigCats);
+    // bigCats = ['cat']; // throws error as re-assigning not allowed for const
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    const wordFrequency = {};
+    wordFrequency['hello'] = 2;
+    wordFrequency['bye'] = 1;
+    console.log(wordFrequency);
+    // wordFrequency = { 'a': 2, 'b': 3}; // throws error here
+    </code>
+    </div>
+alt: These examples do not render anything
+chainable: false
+---
+
+
+# const
diff --git a/src/content/reference/en/p5/constrain.mdx b/src/content/reference/en/p5/constrain.mdx
new file mode 100644
index 0000000000..1c9b082a9e
--- /dev/null
+++ b/src/content/reference/en/p5/constrain.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: constrain
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Constrains a number between a minimum and maximum value.</p>
+line: 69
+params:
+  - name: 'n'
+    description: |
+      <p>number to constrain.</p>
+    type: Number
+  - name: low
+    description: |
+      <p>minimum limit.</p>
+    type: Number
+  - name: high
+    description: |
+      <p>maximum limit.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let x = constrain(mouseX, 33, 67);
+      let y = 50;
+
+      strokeWeight(5);
+      point(x, y);
+
+      describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // Set boundaries and draw them.
+      let leftWall = width * 0.25;
+      let rightWall = width * 0.75;
+      line(leftWall, 0, leftWall, height);
+      line(rightWall, 0, rightWall, height);
+
+      // Draw a circle that follows the mouse freely.
+      fill(255);
+      circle(mouseX, height / 3, 9);
+
+      // Draw a circle that's constrained.
+      let xc = constrain(mouseX, leftWall, rightWall);
+      fill(0);
+      circle(xc, 2 * height / 3, 9);
+
+      describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
+    }
+    </code>
+    </div>
+return:
+  description: constrained number.
+  type: Number
+chainable: false
+---
+
+
+# constrain
diff --git a/src/content/reference/en/p5/copy.mdx b/src/content/reference/en/p5/copy.mdx
new file mode 100644
index 0000000000..e5a0e610d9
--- /dev/null
+++ b/src/content/reference/en/p5/copy.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: copy
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Copies pixels from a source image to a region of the canvas. The source
+
+  image can be the canvas itself or a <a href="#/p5.Image">p5.Image</a>
+
+  object. <code>copy()</code> will scale pixels from the source region if it
+  isn't the
+
+  same size as the destination region.</p>
+line: 207
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      background(img);
+      copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+      // Show copied region.
+      stroke(255);
+      noFill();
+      square(7, 22, 10);
+
+      describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# copy
diff --git a/src/content/reference/en/p5/cos.mdx b/src/content/reference/en/p5/cos.mdx
new file mode 100644
index 0000000000..6b4cdd12e9
--- /dev/null
+++ b/src/content/reference/en/p5/cos.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: cos
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the cosine of an angle. <code>cos()</code> is useful for many
+  geometric
+
+  tasks in creative coding. The values returned oscillate between -1 and 1
+
+  as the input angle increases. <code>cos()</code> takes into account the
+  current
+
+  <a href="#/p5/angleMode">angleMode</a>.</p>
+line: 183
+params:
+  - name: angle
+    description: |
+      <p>the angle.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let t = frameCount;
+      let x = 30 * cos(t * 0.05) + 50;
+      let y = 50;
+      line(50, y, x, y);
+      circle(x, y, 20);
+
+      describe('A white ball on a string oscillates left and right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      let x = frameCount;
+      let y = 30 * cos(x * 0.1) + 50;
+      point(x, y);
+
+      describe('A series of black dots form a wave pattern.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      let t = frameCount;
+      let x = 30 * cos(t * 0.1) + 50;
+      let y = 10 * sin(t * 0.2) + 50;
+      point(x, y);
+
+      describe('A series of black dots form an infinity symbol.');
+    }
+    </code>
+    </div>
+return:
+  description: cosine of the angle.
+  type: Number
+chainable: false
+---
+
+
+# cos
diff --git a/src/content/reference/en/p5/createA.mdx b/src/content/reference/en/p5/createA.mdx
new file mode 100644
index 0000000000..e67674724d
--- /dev/null
+++ b/src/content/reference/en/p5/createA.mdx
@@ -0,0 +1,89 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createA
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code>&lt;a&gt;&lt;/a&gt;</code> element that links to another
+  web page.</p>
+
+  <p>The first parmeter, <code>href</code>, is a string that sets the URL of the
+  linked
+
+  page.</p>
+
+  <p>The second parameter, <code>html</code>, is a string that sets the inner
+  HTML of the
+
+  link. It's common to use text, images, or buttons as links.</p>
+
+  <p>The third parameter, <code>target</code>, is optional. It's a string that
+  tells the
+
+  web browser where to open the link. By default, links open in the current
+
+  browser tab. Passing <code>'_blank'</code> will cause the link to open in a
+  new
+
+  browser tab. MDN describes a few
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"
+  target="_blank">other options</a>.</p>
+line: 655
+params:
+  - name: href
+    description: |
+      <p>URL of linked page.</p>
+    type: String
+  - name: html
+    description: |
+      <p>inner HTML of link element to display.</p>
+    type: String
+  - name: target
+    description: |
+      <p>target where the new link should open,
+                                  either <code>'_blank'</code>, <code>'_self'</code>, <code>'_parent'</code>, or <code>'_top'</code>.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an anchor element that links to p5js.org.
+      let a = createA('http://p5js.org/', 'p5*js');
+      a.position(25, 35);
+
+      describe('The text "p5*js" written at the center of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an anchor element that links to p5js.org.
+      // Open the link in a new tab.
+      let a = createA('http://p5js.org/', 'p5*js', '_blank');
+      a.position(25, 35);
+
+      describe('The text "p5*js" written at the center of a gray square.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createA
diff --git a/src/content/reference/en/p5/createAudio.mdx b/src/content/reference/en/p5/createAudio.mdx
new file mode 100644
index 0000000000..4917a4d953
--- /dev/null
+++ b/src/content/reference/en/p5/createAudio.mdx
@@ -0,0 +1,77 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createAudio
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a hidden <code>&lt;audio&gt;</code> element for simple audio
+  playback.
+
+  Returns a new <a href="#/p5.MediaElement">p5.MediaElement</a> object.</p>
+
+  <p>The first parameter, <code>src</code>, is the path the video. If a single
+  string is
+
+  passed, as in <code>'assets/video.mp4'</code>, a single video is loaded. An
+  array
+
+  of strings can be used to load the same video in different formats. For
+
+  example, <code>['assets/video.mp4', 'assets/video.ogv',
+  'assets/video.webm']</code>.
+
+  This is useful for ensuring that the video can play across different
+
+  browsers with different capabilities. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats"
+  target="_blank">MDN</a>
+
+  for more information about supported formats.</p>
+
+  <p>The second parameter, <code>callback</code>, is optional. It's a function
+  to call once
+
+  the audio is ready to play.</p>
+line: 2043
+params:
+  - name: src
+    description: |
+      <p>path to an audio file, or an array of paths
+                                      for supporting different browsers.</p>
+    type: 'String|String[]'
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the audio is ready to play.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load the audio.
+      let beat = createAudio('assets/beat.mp3');
+      // Show the default audio controls.
+      beat.showControls();
+
+      describe('An audio  beat plays when the user double-clicks the square.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createAudio
diff --git a/src/content/reference/en/p5/createButton.mdx b/src/content/reference/en/p5/createButton.mdx
new file mode 100644
index 0000000000..00fd90b31f
--- /dev/null
+++ b/src/content/reference/en/p5/createButton.mdx
@@ -0,0 +1,95 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createButton
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code>&lt;button&gt;&lt;/button&gt;</code> element.</p>
+
+  <p>The first parameter, <code>label</code>, is a string that sets the label
+  displayed on
+
+  the button.</p>
+
+  <p>The second parameter, <code>value</code>, is optional. It's a string that
+  sets the
+
+  button's value. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value"
+  target="_blank">MDN</a>
+
+  for more details.</p>
+line: 842
+params:
+  - name: label
+    description: |
+      <p>label displayed on the button.</p>
+    type: String
+  - name: value
+    description: |
+      <p>value of the button.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a button and place it beneath the canvas.
+      let button = createButton('click me');
+      button.position(0, 100);
+
+      // Use the button to change the background color.
+      button.mousePressed(() => {
+        let g = random(255);
+        background(g);
+      });
+
+      describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let button;
+
+    function setup() {
+      // Create a button and set its value to 0.
+      // Place the button beneath the canvas.
+      button = createButton('click me', 'red');
+      button.position(0, 100);
+
+      // Change the button's value when the mouse
+      // is pressed.
+      button.mousePressed(() => {
+        let c = random(['red', 'green', 'blue', 'yellow']);
+        button.value(c);
+      });
+
+      describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+    }
+
+    function draw() {
+      // Use the button's value to set the background color.
+      let c = button.value();
+      background(c);
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createButton
diff --git a/src/content/reference/en/p5/createCamera.mdx b/src/content/reference/en/p5/createCamera.mdx
new file mode 100644
index 0000000000..efea130b87
--- /dev/null
+++ b/src/content/reference/en/p5/createCamera.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createCamera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Creates a new <a href="#/p5.Camera">p5.Camera</a> object and sets it
+
+  as the current (active) camera.</p>
+
+  <p>The new camera is initialized with a default position
+
+  (see <a href="#/p5.Camera/camera">camera()</a>)
+
+  and a default perspective projection
+
+  (see <a href="#/p5.Camera/perspective">perspective()</a>).
+
+  Its properties can be controlled with the <a href="#/p5.Camera">p5.Camera</a>
+
+  methods.</p>
+
+  <p>Note: Every 3D sketch starts with a default camera initialized.
+
+  This camera can be controlled with the global methods
+
+  <a href="#/p5/camera">camera()</a>,
+
+  <a href="#/p5/perspective">perspective()</a>, <a
+  href="#/p5/ortho">ortho()</a>,
+
+  and <a href="#/p5/frustum">frustum()</a> if it is the only camera
+
+  in the scene.</p>
+line: 331
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    // Creates a camera object and animates it around a box.
+    let camera;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      background(0);
+      camera = createCamera();
+      camera.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      camera.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      describe('An example that creates a camera and moves it around the box.');
+    }
+
+    function draw() {
+      background(0);
+      // The camera will automatically
+      // rotate to look at [0, 0, 0].
+      camera.lookAt(0, 0, 0);
+
+      // The camera will move on the
+      // x axis.
+      camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
+      box(20);
+
+      // A 'ground' box to give the viewer
+      // a better idea of where the camera
+      // is looking.
+      translate(0, 50, 0);
+      rotateX(HALF_PI);
+      box(150, 150, 20);
+    }
+    </code></div>
+alt: An example that creates a camera and moves it around the box.
+return:
+  description: The newly created camera object.
+  type: p5.Camera
+chainable: false
+---
+
+
+# createCamera
diff --git a/src/content/reference/en/p5/createCanvas.mdx b/src/content/reference/en/p5/createCanvas.mdx
new file mode 100644
index 0000000000..b4e891bb6e
--- /dev/null
+++ b/src/content/reference/en/p5/createCanvas.mdx
@@ -0,0 +1,84 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates a canvas element in the document and sets its dimensions
+
+  in pixels. This method should be called only once at the start of <a
+  href="#/p5/setup">setup()</a>.
+
+  Calling <a href="#/p5/createCanvas">createCanvas</a> more than once in a
+
+  sketch will result in very unpredictable behavior. If you want more than
+
+  one drawing canvas you could use <a
+  href="#/p5/createGraphics">createGraphics()</a>
+
+  (hidden by default but it can be shown).</p>
+
+  <p>Important note: in 2D mode (i.e. when <code>p5.Renderer</code> is not set)
+  the origin (0,0)
+
+  is positioned at the top left of the screen. In 3D mode (i.e. when
+  <code>p5.Renderer</code>
+
+  is set to <code>WEBGL</code>), the origin is positioned at the center of the
+  canvas.
+
+  See <a href="https://github.com/processing/p5.js/issues/1545">this issue</a>
+  for more information.</p>
+
+  <p>A WebGL canvas will use a WebGL2 context if it is supported by the browser.
+
+  Check the <a href="#/p5/webglVersion">webglVersion</a> property to check what
+
+  version is being used, or call <a href="#/p5/setAttributes">setAttributes({
+  version: 1 })</a>
+
+  to create a WebGL1 context.</p>
+
+  <p>The system variables width and height are set by the parameters passed to
+  this
+
+  function. If <a href="#/p5/createCanvas">createCanvas()</a> is not used, the
+
+  window will be given a default size of 100×100 pixels.</p>
+
+  <p>Optionally, an existing canvas can be passed using a selector, ie.
+  <code>document.getElementById('')</code>.
+
+  If specified, avoid using <code>setAttributes()</code> afterwards, as this
+  will remove and recreate the existing canvas.</p>
+
+  <p>For more ways to position the canvas, see the
+
+  <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>
+
+  positioning the canvas</a> wiki page.</p>
+line: 15
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 50);
+      background(153);
+      line(0, 0, width, height);
+    }
+    </code>
+    </div>
+alt: Black line extending from top-left of canvas to bottom right.
+return:
+  description: pointer to p5.Renderer holding canvas
+  type: p5.Renderer
+chainable: false
+---
+
+
+# createCanvas
diff --git a/src/content/reference/en/p5/createCapture.mdx b/src/content/reference/en/p5/createCapture.mdx
new file mode 100644
index 0000000000..a5499b147e
--- /dev/null
+++ b/src/content/reference/en/p5/createCapture.mdx
@@ -0,0 +1,146 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createCapture
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code>&lt;video&gt;</code> element that "captures" the
+  audio/video stream from
+
+  the webcam and microphone. Returns a new
+
+  <a href="#/p5.Element">p5.Element</a> object.</p>
+
+  <p>Videos are shown by default. They can be hidden by calling
+  <code>capture.hide()</code>
+
+  and drawn to the canvas using <a href="#/p5/image">image()</a>.</p>
+
+  <p>The first parameter, <code>type</code>, is optional. It sets the type of
+  capture to
+
+  use. By default, <code>createCapture()</code> captures both audio and video.
+  If <code>VIDEO</code>
+
+  is passed, as in <code>createCapture(VIDEO)</code>, only video will be
+  captured.
+
+  If <code>AUDIO</code> is passed, as in <code>createCapture(AUDIO)</code>, only
+  audio will be
+
+  captured. A constraints object can also be passed to customize the stream.
+
+  See the <a
+  href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints"
+  target="_blank">
+
+  W3C documentation</a> for possible properties. Different browsers support
+  different
+
+  properties.</p>
+
+  <p>The second parameter, <code>callback</code>, is optional. It's a function
+  to call once
+
+  the capture is ready for use. The callback function should have one
+
+  parameter, <code>stream</code>, that's a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream"
+  target="_blank">MediaStream</a> object.</p>
+
+  <p>Note: <code>createCapture()</code> only works when running a sketch locally
+  or using HTTPS. Learn more
+
+  <a
+  href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https"
+  target="_blank">here</a>
+
+  and <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia"
+  target="_blank">here</a>.</p>
+line: 2121
+params:
+  - name: type
+    description: |
+      <p>type of capture, either AUDIO or VIDEO,
+                                        or a constraints object. Both video and audio
+                                        audio streams are captured by default.</p>
+    type: String|Constant|Object
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the stream
+                                        has loaded.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+      createCapture(VIDEO);
+
+      describe('A video stream from the webcam.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    let capture;
+
+    function setup() {
+      // Create the video capture and hide the element.
+      capture = createCapture(VIDEO);
+      capture.hide();
+
+      describe('A video stream from the webcam with inverted colors.');
+    }
+
+    function draw() {
+      // Draw the video capture within the canvas.
+      image(capture, 0, 0, width, width * capture.height / capture.width);
+      // Invert the colors in the stream.
+      filter(INVERT);
+    }
+    </code>
+    </div>
+
+    <div class='notest norender'>
+    <code>
+    function setup() {
+      createCanvas(480, 120);
+
+      // Create a constraints object.
+      let constraints = {
+        video: {
+          mandatory: {
+            minWidth: 1280,
+            minHeight: 720
+          },
+          optional: [{ maxFrameRate: 10 }]
+        },
+        audio: false
+      };
+
+      // Create the video capture.
+      createCapture(constraints);
+
+      describe('A video stream from the webcam.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createCapture
diff --git a/src/content/reference/en/p5/createCheckbox.mdx b/src/content/reference/en/p5/createCheckbox.mdx
new file mode 100644
index 0000000000..f83d9fb16d
--- /dev/null
+++ b/src/content/reference/en/p5/createCheckbox.mdx
@@ -0,0 +1,123 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createCheckbox
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a checkbox <code>&lt;input&gt;&lt;/input&gt;</code> element.
+  Checkboxes extend
+
+  the <a href="#/p5.Element">p5.Element</a> class with a <code>checked()</code>
+  method.
+
+  Calling <code>myBox.checked()</code> returns <code>true</code> if it the box
+  is checked and
+
+  <code>false</code> otherwise.</p>
+
+  <p>The first parameter, <code>label</code>, is optional. It's a string that
+  sets the label
+
+  to display next to the checkbox.</p>
+
+  <p>The second parameter, <code>value</code>, is also optional. It's a boolean
+  that sets the
+
+  checkbox's value.</p>
+line: 914
+params:
+  - name: label
+    description: |
+      <p>label displayed after the checkbox.</p>
+    type: String
+    optional: true
+  - name: value
+    description: >
+      <p>value of the checkbox. Checked is <code>true</code> and unchecked is
+      <code>false</code>.</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      // Create a checkbox and place it beneath the canvas.
+      checkbox = createCheckbox();
+      checkbox.position(0, 100);
+
+      describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      // Create a checkbox and place it beneath the canvas.
+      // Label the checkbox "white".
+      checkbox = createCheckbox(' white');
+      checkbox.position(0, 100);
+
+      describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      // Create a checkbox and place it beneath the canvas.
+      // Label the checkbox "white" and set its value to true.
+      checkbox = createCheckbox(' white', true);
+      checkbox.position(0, 100);
+
+      describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createCheckbox
diff --git a/src/content/reference/en/p5/createColorPicker.mdx b/src/content/reference/en/p5/createColorPicker.mdx
new file mode 100644
index 0000000000..ba3a1fcbce
--- /dev/null
+++ b/src/content/reference/en/p5/createColorPicker.mdx
@@ -0,0 +1,90 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createColorPicker
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a color picker element.</p>
+
+  <p>The parameter, <code>value</code>, is optional. If a color string or
+
+  <a href="#/p5.Color">p5.Color</a> object is passed, it will set the default
+
+  color.</p>
+
+  <p>Color pickers extend the <a href="#/p5.Element">p5.Element</a> class with a
+
+  couple of helpful methods for managing colors:</p>
+
+  <ul>
+
+  <li><code>myPicker.value()</code> returns the current color as a hex string in
+  the format <code>'#rrggbb'</code>.</li>
+
+  <li><code>myPicker.color()</code> returns the current color as a <a
+  href="#/p5.Color">p5.Color</a> object.</li>
+
+  </ul>
+line: 1614
+params:
+  - name: value
+    description: >
+      <p>default color as a <a
+      href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"
+      target="_blank">CSS color string</a>.</p>
+    type: String|p5.Color
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let myPicker;
+
+    function setup() {
+      myPicker = createColorPicker('deeppink');
+      myPicker.position(0, 100);
+
+      describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
+    }
+
+    function draw() {
+      // Use the color picker to paint the background.
+      let c = myPicker.color();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myPicker;
+
+    function setup() {
+      myPicker = createColorPicker('deeppink');
+      myPicker.position(0, 100);
+
+      describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
+    }
+
+    function draw() {
+      // Use the color picker to paint the background.
+      let c = myPicker.value();
+      background(c);
+
+      // Display the current color as a hex string.
+      text(c, 25, 55);
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createColorPicker
diff --git a/src/content/reference/en/p5/createConvolver.mdx b/src/content/reference/en/p5/createConvolver.mdx
new file mode 100644
index 0000000000..01ca48e073
--- /dev/null
+++ b/src/content/reference/en/p5/createConvolver.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createConvolver
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Create a p5.Convolver. Accepts a path to a soundfile
+  that will be used to generate an impulse response.</p>
+line: 8885
+params:
+  - name: path
+    description: |
+      <p>path to a sound file</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to call if loading is successful.
+                                    The object will be passed in as the argument
+                                    to the callback function.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if loading is not successful.
+                                    A custom error will be passed in as the argument
+                                    to the callback function.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let cVerb, sound;
+    function preload() {
+      // We have both MP3 and OGG versions of all sound assets
+      soundFormats('ogg', 'mp3');
+
+      // Try replacing 'bx-spring' with other soundfiles like
+      // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+      cVerb = createConvolver('assets/bx-spring.mp3');
+
+      // Try replacing 'Damscray_DancingTiger' with
+      // 'beat', 'doorbell', lucky_dragons_-_power_melody'
+      sound = loadSound('assets/Damscray_DancingTiger.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playSound);
+      background(220);
+      text('tap to play', 20, 20);
+
+      // disconnect from main output...
+      sound.disconnect();
+
+      // ...and process with cVerb
+      // so that we only hear the convolution
+      cVerb.process(sound);
+    }
+
+    function playSound() {
+      sound.play();
+    }
+    </code></div>
+return:
+  description: ''
+  type: p5.Convolver
+chainable: false
+---
+
+
+# createConvolver
diff --git a/src/content/reference/en/p5/createDiv.mdx b/src/content/reference/en/p5/createDiv.mdx
new file mode 100644
index 0000000000..e407f5adbb
--- /dev/null
+++ b/src/content/reference/en/p5/createDiv.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createDiv
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code>&lt;div&gt;&lt;/div&gt;</code> element. It's commonly used
+  as a
+
+  container for other elements.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code>&lt;div&gt;&lt;/div&gt;</code>.</p>
+line: 444
+params:
+  - name: html
+    description: >
+      <p>inner HTML for the new <code>&lt;div&gt;&lt;/div&gt;</code>
+      element.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      let div = createDiv('p5*js');
+      div.position(25, 35);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an h3 element within the div.
+      let div = createDiv('<h3>p5*js</h3>');
+      div.position(20, 5);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createDiv
diff --git a/src/content/reference/en/p5/createElement.mdx b/src/content/reference/en/p5/createElement.mdx
new file mode 100644
index 0000000000..05fbf91b49
--- /dev/null
+++ b/src/content/reference/en/p5/createElement.mdx
@@ -0,0 +1,71 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createElement
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a new <a href="#/p5.Element">p5.Element</a> object.</p>
+
+  <p>The first parameter, <code>tag</code>, is a string an HTML tag such as
+  <code>'h5'</code>.</p>
+
+  <p>The second parameter, <code>content</code>, is optional. It's a string that
+  sets the
+
+  HTML content to insert into the new element. New elements have no content
+
+  by default.</p>
+line: 2267
+params:
+  - name: tag
+    description: |
+      <p>tag for the new element.</p>
+    type: String
+  - name: content
+    description: |
+      <p>HTML content to insert into the element.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an h5 element with nothing in it.
+      createElement('h5');
+
+      describe('A gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an h5 element with the content
+      // "p5*js".
+      let h5 = createElement('h5', 'p5*js');
+      // Set the element's style and position.
+      h5.style('color', 'deeppink');
+      h5.position(30, 15);
+
+      describe('The text "p5*js" written in pink in the middle of a gray square.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createElement
diff --git a/src/content/reference/en/p5/createFileInput.mdx b/src/content/reference/en/p5/createFileInput.mdx
new file mode 100644
index 0000000000..a09cf67f34
--- /dev/null
+++ b/src/content/reference/en/p5/createFileInput.mdx
@@ -0,0 +1,127 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createFileInput
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code>&lt;input&gt;&lt;/input&gt;</code> element of type
+  <code>'file'</code>.
+
+  This allows users to select local files for use in a sketch.</p>
+
+  <p>The first parameter, <code>callback</code>, is a function that's called
+  when the file
+
+  loads. The callback function should have one parameter, <code>file</code>,
+  that's a
+
+  <a href="#/p5.File">p5.File</a> object.</p>
+
+  <p>The second parameter, <code>multiple</code>, is optional. It's a boolean
+  value that
+
+  allows loading multiple files if set to <code>true</code>. If
+  <code>true</code>, <code>callback</code>
+
+  will be called once per file.</p>
+line: 1785
+params:
+  - name: callback
+    description: |
+      <p>function to call once the file loads.</p>
+    type: Function
+  - name: multiple
+    description: |
+      <p>allow multiple files to be selected.</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to select an image to
+    // load and display.
+    let input;
+    let img;
+
+    function setup() {
+      // Create a file input and place it beneath
+      // the canvas.
+      input = createFileInput(handleImage);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the image if loaded.
+      if (img) {
+        image(img, 0, 0, width, height);
+      }
+    }
+
+    // Create an image if the file is an image.
+    function handleImage(file) {
+      if (file.type === 'image') {
+        img = createImg(file.data, '');
+        img.hide();
+      } else {
+        img = null;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Use the file input to select multiple images
+    // to load and display.
+    let input;
+    let images = [];
+
+    function setup() {
+      // Create a file input and place it beneath
+      // the canvas. Allow it to load multiple files.
+      input = createFileInput(handleImage, true);
+      input.position(0, 100);
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the images if loaded. Each image
+      // is drawn 20 pixels lower than the
+      // previous image.
+      images.forEach((img, index) => {
+        let y = index * 20;
+        image(img, 0, y, width, height);
+      });
+
+      describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
+    }
+
+    // Create an image if the file is an image,
+    // then add it to the images array.
+    function handleImage(file) {
+      if (file.type === 'image') {
+        let img = createImg(file.data, '');
+        img.hide();
+        images.push(img);
+      }
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createFileInput
diff --git a/src/content/reference/en/p5/createFilterShader.mdx b/src/content/reference/en/p5/createFilterShader.mdx
new file mode 100644
index 0000000000..dfb6ac861c
--- /dev/null
+++ b/src/content/reference/en/p5/createFilterShader.mdx
@@ -0,0 +1,119 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createFilterShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Creates a new <a href="#/p5.Shader">p5.Shader</a> using only a fragment
+  shader, as a convenience method for creating image effects.
+
+  It's like <a href="#/createShader">createShader()</a> but with a default
+  vertex shader included.</p>
+
+  <p><a href="#/createFilterShader">createFilterShader()</a> is intended to be
+  used along with <a href="#/filter">filter()</a> for filtering the contents of
+  a canvas.
+
+  A filter shader will not be applied to any geometries.</p>
+
+  <p>The fragment shader receives some uniforms:</p>
+
+  <ul>
+
+  <li><code>sampler2D tex0</code>, which contains the canvas contents as a
+  texture</li>
+
+  <li><code>vec2 canvasSize</code>, which is the p5 width and height of the
+  canvas (not including pixel density)</li>
+
+  <li><code>vec2 texelSize</code>, which is the size of a physical pixel
+  including pixel density (<code>1.0/(width*density)</code>,
+  <code>1.0/(height*density)</code>)</li>
+
+  </ul>
+
+  <p>For more info about filters and shaders, see Adam Ferriss' <a
+  href="https://github.com/aferriss/p5jsShaderExamples">repo of shader
+  examples</a>
+
+  or the <a
+  href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">introduction
+  to shaders</a> page.</p>
+line: 202
+params:
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      let fragSrc = `precision highp float;
+      void main() {
+        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+      }`;
+
+      createCanvas(100, 100, WEBGL);
+      let s = createFilterShader(fragSrc);
+      filter(s);
+      describe('a yellow canvas');
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    let img, s;
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+    function setup() {
+      let fragSrc = `precision highp float;
+
+      // x,y coordinates, given from the vertex shader
+      varying vec2 vTexCoord;
+
+      // the canvas contents, given from filter()
+      uniform sampler2D tex0;
+      // other useful information from the canvas
+      uniform vec2 texelSize;
+      uniform vec2 canvasSize;
+      // a custom variable from this sketch
+      uniform float darkness;
+
+      void main() {
+        // get the color at current pixel
+        vec4 color = texture2D(tex0, vTexCoord);
+        // set the output color
+        color.b = 1.0;
+        color *= darkness;
+        gl_FragColor = vec4(color.rgb, 1.0);
+      }`;
+
+      createCanvas(100, 100, WEBGL);
+      s = createFilterShader(fragSrc);
+    }
+    function draw() {
+      image(img, -50, -50);
+      s.setUniform('darkness', 0.5);
+      filter(s);
+      describe('a image of bricks tinted dark blue');
+    }
+    </code>
+    </div>
+return:
+  description: |-
+    a shader object created from the provided
+                         fragment shader.
+  type: p5.Shader
+chainable: false
+---
+
+
+# createFilterShader
diff --git a/src/content/reference/en/p5/createFramebuffer.mdx b/src/content/reference/en/p5/createFramebuffer.mdx
new file mode 100644
index 0000000000..d0336e412a
--- /dev/null
+++ b/src/content/reference/en/p5/createFramebuffer.mdx
@@ -0,0 +1,131 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createFramebuffer
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates and returns a new <a href="#/p5.Framebuffer">p5.Framebuffer</a>, a
+
+  high-performance WebGL object that you can draw to and then use as a
+  texture.</p>
+
+  <p>Options can include:</p>
+
+  <ul>
+
+  <li><code>format</code>: The data format of the texture, either
+  <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>.
+  The default is <code>UNSIGNED_BYTE</code>.</li>
+
+  <li><code>channels</code>: What color channels to store, either
+  <code>RGB</code> or <code>RGBA</code>. The default is to match the channels in
+  the main canvas (with alpha unless disabled with
+  <code>setAttributes</code>.)</li>
+
+  <li><code>depth</code>: A boolean, whether or not to include a depth buffer.
+  Defaults to true.</li>
+
+  <li><code>depthFormat</code>: The data format for depth information, either
+  <code>UNSIGNED_INT</code> or <code>FLOAT</code>. The default is
+  <code>FLOAT</code> if available, or <code>UNSIGNED_INT</code> otherwise.</li>
+
+  <li><code>stencil</code>: A boolean, whether or not to include a stencil
+  buffer, which can be used for masking. This may only be used if also using a
+  depth buffer. Defaults to the value of <code>depth</code>, which is true if
+  not provided.</li>
+
+  <li><code>antialias</code>: Boolean or Number, whether or not to render with
+  antialiased edges, and if so, optionally the number of samples to use.
+  Defaults to whether or not the main canvas is antialiased, using a default of
+  2 samples if so. Antialiasing is only supported when WebGL 2 is
+  available.</li>
+
+  <li><code>width</code>: The width of the texture. Defaults to matching the
+  main canvas.</li>
+
+  <li><code>height</code>: The height of the texture. Defaults to matching the
+  main canvas.</li>
+
+  <li><code>density</code>: The pixel density of the texture. Defaults to the
+  pixel density of the main canvas.</li>
+
+  <li><code>textureFiltering</code>: Either <code>LINEAR</code> (nearby pixels
+  will be interpolated when reading values from the color texture) or
+  <code>NEAREST</code> (no interpolation.) Generally, use <code>LINEAR</code>
+  when using the texture as an image, and use <code>NEAREST</code> if reading
+  the texture as data. Defaults to <code>LINEAR</code>.</li>
+
+  </ul>
+
+  <p>If <code>width</code>, <code>height</code>, or <code>density</code> are
+  specified, then the framebuffer will
+
+  keep that size until manually changed. Otherwise, it will be autosized, and
+
+  it will update to match the main canvas's size and density when the main
+
+  canvas changes.</p>
+line: 306
+params:
+  - name: options
+    description: |
+      <p>An optional object with configuration</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let prev, next;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      prev = createFramebuffer({ format: FLOAT });
+      next = createFramebuffer({ format: FLOAT });
+      noStroke();
+    }
+
+    function draw() {
+      // Swap prev and next so that we can use the previous
+      // frame as a texture when drawing the current frame
+      [prev, next] = [next, prev];
+
+      // Draw to the framebuffer
+      next.begin();
+      background(255);
+
+      push();
+      tint(255, 253);
+      image(prev, -width/2, -height/2);
+      // Make sure the image plane doesn't block you from seeing any part
+      // of the scene
+      clearDepth();
+      pop();
+
+      push();
+      normalMaterial();
+      translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(12);
+      pop();
+      next.end();
+
+      image(next, -width/2, -height/2);
+    }
+    </code>
+    </div>
+alt: |-
+  A red, green, and blue box (using normalMaterial) moves and rotates around
+  the canvas, leaving a trail behind it that slowly grows and fades away.
+return:
+  description: ''
+  type: p5.Framebuffer
+chainable: false
+---
+
+
+# createFramebuffer
diff --git a/src/content/reference/en/p5/createGraphics.mdx b/src/content/reference/en/p5/createGraphics.mdx
new file mode 100644
index 0000000000..6b21dd523d
--- /dev/null
+++ b/src/content/reference/en/p5/createGraphics.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createGraphics
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates and returns a new p5.Graphics object. Use this class if you need
+
+  to draw into an off-screen graphics buffer. The two parameters define the
+
+  width and height in pixels.</p>
+
+  <p>A WebGL p5.Graphics will use a WebGL2 context if it is supported by the
+  browser.
+
+  Check the <a href="#/p5/webglVersion">pg.webglVersion</a> property of the
+  renderer
+
+  to check what version is being used, or call <a
+  href="#/p5/setAttributes">pg.setAttributes({ version: 1 })</a>
+
+  to create a WebGL1 context.</p>
+
+  <p>Optionally, an existing canvas can be passed using a selector, ie.
+  document.getElementById('').
+
+  By default this canvas will be hidden (offscreen buffer), to make visible, set
+  element's style to display:block;</p>
+line: 243
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let pg;
+    function setup() {
+      createCanvas(100, 100);
+      pg = createGraphics(100, 100);
+    }
+
+    function draw() {
+      background(200);
+      pg.background(100);
+      pg.noStroke();
+      pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
+      image(pg, 50, 50);
+      image(pg, 0, 0, 50, 50);
+    }
+    </code>
+    </div>
+alt: 4 grey squares alternating light and dark grey. White quarter circle mid-left.
+return:
+  description: offscreen graphics buffer
+  type: p5.Graphics
+chainable: false
+---
+
+
+# createGraphics
diff --git a/src/content/reference/en/p5/createImage.mdx b/src/content/reference/en/p5/createImage.mdx
new file mode 100644
index 0000000000..aa721cc8f4
--- /dev/null
+++ b/src/content/reference/en/p5/createImage.mdx
@@ -0,0 +1,142 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createImage
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Creates a new <a href="#/p5.Image">p5.Image</a> object. The new image is
+
+  transparent by default.</p>
+
+  <p><code>createImage()</code> uses the <code>width</code> and
+  <code>height</code> paremeters to set the new
+
+  <a href="#/p5.Image">p5.Image</a> object's dimensions in pixels. The new
+
+  <a href="#/p5.Image">p5.Image</a> can be modified by updating its
+
+  <a href="#/p5.Image/pixels">pixels</a> array or by calling its
+
+  <a href="#/p5.Image/get">get()</a> and
+
+  <a href="#/p5.Image/set">set()</a> methods. The
+
+  <a href="#/p5.Image/loadPixels">loadPixels()</a> method must be called
+
+  before reading or modifying pixel values. The
+
+  <a href="#/p5.Image/updatePixels">updatePixels()</a> method must be called
+
+  for updates to take effect.</p>
+line: 15
+params:
+  - name: width
+    description: |
+      <p>width in pixels.</p>
+    type: Integer
+  - name: height
+    description: |
+      <p>height in pixels.</p>
+    type: Integer
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let img = createImage(66, 66);
+
+    img.loadPixels();
+
+    for (let x = 0; x < img.width; x += 1) {
+      for (let y = 0; y < img.height; y += 1) {
+        img.set(x, y, 0);
+      }
+    }
+
+    img.updatePixels();
+
+    image(img, 17, 17);
+
+
+    describe('A black square drawn in the middle of a gray square.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let img = createImage(66, 66);
+
+    img.loadPixels();
+
+    for (let x = 0; x < img.width; x += 1) {
+      for (let y = 0; y < img.height; y += 1) {
+        let a = map(x, 0, img.width, 0, 255);
+        let c = color(0, a);
+        img.set(x, y, c);
+      }
+    }
+
+    img.updatePixels();
+
+    image(img, 17, 17);
+
+
+    describe('A square with a horizontal color gradient that transitions from
+    gray to black.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let img = createImage(66, 66);
+
+    img.loadPixels();
+
+    let d = pixelDensity();
+
+    let halfImage = 4 * (d * img.width) * (d * img.height / 2);
+
+    for (let i = 0; i < halfImage; i += 4) {
+      // Red.
+      img.pixels[i] = 0;
+      // Green.
+      img.pixels[i + 1] = 0;
+      // Blue.
+      img.pixels[i + 2] = 0;
+      // Alpha.
+      img.pixels[i + 3] = 255;
+    }
+
+    img.updatePixels();
+
+    image(img, 17, 17);
+
+
+    describe('A black square drawn in the middle of a gray square.');
+
+    </code>
+
+    </div>
+return:
+  description: new <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# createImage
diff --git a/src/content/reference/en/p5/createImg.mdx b/src/content/reference/en/p5/createImg.mdx
new file mode 100644
index 0000000000..9923f6cdd1
--- /dev/null
+++ b/src/content/reference/en/p5/createImg.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createImg
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code>&lt;img&gt;</code> element that can appear outside of the
+  canvas.</p>
+
+  <p>The first parameter, <code>src</code>, is a string with the path to the
+  image file.
+
+  <code>src</code> should be a relative path, as in
+  <code>'assets/image.png'</code>, or a URL, as
+
+  in <code>'https://example.com/image.png'</code>.</p>
+
+  <p>The second parameter, <code>alt</code>, is a string with the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes"
+  target="_blank">alternate text</a>
+
+  for the image. An empty string <code>''</code> can be used for images that
+  aren't displayed.</p>
+
+  <p>The third parameter, <code>crossOrigin</code>, is optional. It's a string
+  that sets the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes"
+  target="_blank">crossOrigin property</a>
+
+  of the image. Use <code>'anonymous'</code> or <code>'use-credentials'</code>
+  to fetch the image
+
+  with cross-origin access.</p>
+
+  <p>The fourth parameter, <code>callback</code>, is also optional. It sets a
+  function to
+
+  call after the image loads. The new image is passed to the callback
+
+  function as a <a href="#/p5.Element">p5.Element</a> object.</p>
+line: 583
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      let img = createImg(
+        'https://p5js.org/assets/img/asterisk-01.png',
+        'The p5.js magenta asterisk.'
+      );
+      img.position(0, -10);
+
+      describe('A gray square with a magenta asterisk in its center.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createImg
diff --git a/src/content/reference/en/p5/createInput.mdx b/src/content/reference/en/p5/createInput.mdx
new file mode 100644
index 0000000000..75839e9fa3
--- /dev/null
+++ b/src/content/reference/en/p5/createInput.mdx
@@ -0,0 +1,86 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createInput
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a text <code>&lt;input&gt;&lt;/input&gt;</code> element. Call
+  <code>myInput.size()</code>
+
+  to set the length of the text box.</p>
+
+  <p>The first parameter, <code>value</code>, is optional. It's a string that
+  sets the
+
+  input's default value. The input is blank by default.</p>
+
+  <p>The second parameter, <code>type</code>, is also optional. It's a string
+  that
+
+  specifies the type of text being input. See MDN for a full
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input"
+  target="_blank">list of options</a>.
+
+  The default is <code>'text'</code>.</p>
+line: 1708
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let myInput;
+
+    function setup() {
+      // Create an input element and place it
+      // beneath the canvas.
+      myInput = createInput();
+      myInput.position(0, 100);
+
+      describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input to display a message.
+      let msg = myInput.value();
+      text(msg, 25, 55);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myInput;
+
+    function setup() {
+      // Create an input element and place it
+      // beneath the canvas. Set its default
+      // text to "hello!".
+      myInput = createInput('hello!');
+      myInput.position(0, 100);
+
+      describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input to display a message.
+      let msg = myInput.value();
+      text(msg, 25, 55);
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createInput
diff --git a/src/content/reference/en/p5/createNumberDict.mdx b/src/content/reference/en/p5/createNumberDict.mdx
new file mode 100644
index 0000000000..c4b8794760
--- /dev/null
+++ b/src/content/reference/en/p5/createNumberDict.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createNumberDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: >
+  <p>Creates a new instance of <a href="#/p5.NumberDict">p5.NumberDict</a> using
+  the key-value pair
+   or object you provide.</p>
+line: 48
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myDictionary = createNumberDict(100, 42);
+       print(myDictionary.hasKey(100)); // logs true to console
+      let anotherDictionary = createNumberDict({ 200: 84 });
+       print(anotherDictionary.hasKey(200)); // logs true to console
+     }
+     </code></div>
+return:
+  description: ''
+  type: p5.NumberDict
+chainable: false
+---
+
+
+# createNumberDict
diff --git a/src/content/reference/en/p5/createP.mdx b/src/content/reference/en/p5/createP.mdx
new file mode 100644
index 0000000000..5fde80241d
--- /dev/null
+++ b/src/content/reference/en/p5/createP.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createP
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code>&lt;p&gt;&lt;/p&gt;</code> element. It's commonly used for
+
+  paragraph-length text.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code>&lt;p&gt;&lt;/p&gt;</code>.</p>
+line: 488
+params:
+  - name: html
+    description: |
+      <p>inner HTML for the new <code>&lt;p&gt;&lt;/p&gt;</code> element.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      let p = createP('Tell me a story.');
+      p.position(5, 0);
+
+      describe('A gray square displaying the text "Tell me a story." written in black.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createP
diff --git a/src/content/reference/en/p5/createRadio.mdx b/src/content/reference/en/p5/createRadio.mdx
new file mode 100644
index 0000000000..38002506f4
--- /dev/null
+++ b/src/content/reference/en/p5/createRadio.mdx
@@ -0,0 +1,168 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createRadio
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a radio button element.</p>
+
+  <p>The parameter is optional. If a string is passed, as in
+
+  <code>let myRadio = createSelect('food')</code>, then each radio option will
+
+  have <code>"food"</code> as its <code>name</code> parameter: <code>&lt;input
+  name="food"&gt;&lt;/input&gt;</code>.
+
+  If an existing <code>&lt;div&gt;&lt;/div&gt;</code> or
+  <code>&lt;span&gt;&lt;/span&gt;</code>
+
+  element is passed, as in <code>let myRadio = createSelect(container)</code>,
+  it will
+
+  become the radio button's parent element.</p>
+
+  <p>Radio buttons extend the <a href="#/p5.Element">p5.Element</a> class with a
+  few
+
+  helpful methods for managing options:</p>
+
+  <ul>
+
+  <li><code>myRadio.option(value, [label])</code> adds an option to the menu.
+  The first paremeter, <code>value</code>, is a string that sets the option's
+  value and label. The second parameter, <code>label</code>, is optional. If
+  provided, it sets the label displayed for the <code>value</code>. If an option
+  with <code>value</code> already exists, its label is changed and its value is
+  returned.</li>
+
+  <li><code>myRadio.value()</code> returns the currently-selected option's
+  value.</li>
+
+  <li><code>myRadio.selected()</code> returns the currently-selected
+  option.</li>
+
+  <li><code>myRadio.selected(value)</code> selects the given option and returns
+  it as an <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"
+  target="_blank"><code>HTMLInputElement</code></a>.</li>
+
+  <li><code>myRadio.disable(shouldDisable)</code> enables the entire radio
+  button if <code>true</code> is passed and disables it if <code>false</code> is
+  passed.</li>
+
+  </ul>
+line: 1323
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let myRadio;
+
+    function setup() {
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.size(60);
+
+      // Add a few color options.
+      myRadio.option('red');
+      myRadio.option('yellow');
+      myRadio.option('blue');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let g = myRadio.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myRadio;
+
+    function setup() {
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.size(50);
+
+      // Add a few color options.
+      // Color values are labeled with
+      // emotions they evoke.
+      myRadio.option('red', 'love');
+      myRadio.option('yellow', 'joy');
+      myRadio.option('blue', 'trust');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let c = myRadio.value();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myRadio;
+
+    function setup() {
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.size(50);
+
+      // Add a few color options.
+      myRadio.option('red');
+      myRadio.option('yellow');
+      myRadio.option('blue');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      // Create a button and place it beneath the canvas.
+      let btn = createButton('disable');
+      btn.position(0, 100);
+
+      // Use the button to disable the radio button.
+      btn.mousePressed(() => {
+        myRadio.disable(true);
+      });
+
+      describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let c = myRadio.value();
+      background(c);
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createRadio
diff --git a/src/content/reference/en/p5/createSelect.mdx b/src/content/reference/en/p5/createSelect.mdx
new file mode 100644
index 0000000000..4104604980
--- /dev/null
+++ b/src/content/reference/en/p5/createSelect.mdx
@@ -0,0 +1,196 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createSelect
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a dropdown menu <code>&lt;select&gt;&lt;/select&gt;</code>
+  element.</p>
+
+  <p>The parameter is optional. If <code>true</code> is passed, as in
+
+  <code>let mySelect = createSelect(true)</code>, then the dropdown will support
+
+  multiple selections. If an existing <code>&lt;select&gt;&lt;/select&gt;</code>
+  element
+
+  is passed, as in <code>let mySelect = createSelect(otherSelect)</code>, the
+  existing
+
+  element will be wrapped in a new <a href="#/p5.Element">p5.Element</a>
+
+  object.</p>
+
+  <p>Dropdowns extend the <a href="#/p5.Element">p5.Element</a> class with a few
+
+  helpful methods for managing options:</p>
+
+  <ul>
+
+  <li><code>mySelect.option(name, [value])</code> adds an option to the menu.
+  The first paremeter, <code>name</code>, is a string that sets the option's
+  name and value. The second parameter, <code>value</code>, is optional. If
+  provided, it sets the value that corresponds to the key <code>name</code>. If
+  an option with <code>name</code> already exists, its value is changed to
+  <code>value</code>.</li>
+
+  <li><code>mySelect.value()</code> returns the currently-selected option's
+  value.</li>
+
+  <li><code>mySelect.selected()</code> returns the currently-selected
+  option.</li>
+
+  <li><code>mySelect.selected(option)</code> selects the given option by
+  default.</li>
+
+  <li><code>mySelect.disable()</code> marks the whole dropdown element as
+  disabled.</li>
+
+  <li><code>mySelect.disable(option)</code> marks a given option as
+  disabled.</li>
+
+  <li><code>mySelect.enable()</code> marks the whole dropdown element as
+  enabled.</li>
+
+  <li><code>mySelect.enable(option)</code> marks a given option as enabled.</li>
+
+  </ul>
+line: 1057
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      // Set the selected option to "red".
+      mySelect.selected('red');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      // Set the selected option to "red".
+      mySelect.selected('red');
+
+      // Disable the "yellow" option.
+      mySelect.disable('yellow');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options with names and values.
+      mySelect.option('one', 'red');
+      mySelect.option('two', 'green');
+      mySelect.option('three', 'blue');
+      mySelect.option('four', 'yellow');
+
+      // Set the selected option to "one".
+      mySelect.selected('one');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Hold CTRL to select multiple options on Windows and Linux.
+    // Hold CMD to select multiple options on macOS.
+    let mySelect;
+
+    function setup() {
+      // Create a dropdown and allow multiple selections.
+      // Place it beneath the canvas.
+      mySelect = createSelect(true);
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the selected value(s) to draw circles.
+      let colors = mySelect.selected();
+      colors.forEach((c, index) => {
+        let x = 10 + index * 20;
+        fill(c);
+        circle(x, 50, 20);
+      });
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createSelect
diff --git a/src/content/reference/en/p5/createShader.mdx b/src/content/reference/en/p5/createShader.mdx
new file mode 100644
index 0000000000..ded7b83e43
--- /dev/null
+++ b/src/content/reference/en/p5/createShader.mdx
@@ -0,0 +1,105 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Creates a new <a href="#/p5.Shader">p5.Shader</a> object
+
+  from the provided vertex and fragment shader code.</p>
+
+  <p>Note, shaders can only be used in WEBGL mode.</p>
+
+  <p>Shaders can alter the positioning of shapes drawn with them.
+
+  To ensure consistency in rendering, it's recommended to use the vertex shader
+  shown in the example below.</p>
+line: 115
+params:
+  - name: vertSrc
+    description: |
+      <p>source code for the vertex shader</p>
+    type: String
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+
+    // the vertex shader is called for each vertex
+    let vs = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+     }
+    `;
+
+
+    // the fragment shader is called for each pixel
+    let fs = `
+       precision highp float;
+       uniform vec2 p;
+       uniform float r;
+       const int I = 500;
+       varying vec2 vTexCoord;
+       void main() {
+         vec2 c = p + gl_FragCoord.xy * r, z = c;
+         float n = 0.0;
+         for (int i = I; i > 0; i --) {
+           if(z.x*z.x+z.y*z.y > 4.0) {
+             n = float(i)/float(I);
+             break;
+           }
+           z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;
+         }
+         gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);
+       }`;
+
+    let mandel;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // create and initialize the shader
+      mandel = createShader(vs, fs);
+      shader(mandel);
+      noStroke();
+
+      // 'p' is the center point of the Mandelbrot image
+      mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+      describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
+    }
+
+    function draw() {
+      // 'r' is the size of the image in Mandelbrot-space
+      mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+      plane(width, height);
+    }
+    </code>
+    </div>
+alt: 'zooming Mandelbrot set. a colorful, infinitely detailed fractal.'
+return:
+  description: |-
+    a shader object created from the provided
+    vertex and fragment shaders.
+  type: p5.Shader
+chainable: false
+---
+
+
+# createShader
diff --git a/src/content/reference/en/p5/createSlider.mdx b/src/content/reference/en/p5/createSlider.mdx
new file mode 100644
index 0000000000..3c13153b91
--- /dev/null
+++ b/src/content/reference/en/p5/createSlider.mdx
@@ -0,0 +1,151 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createSlider
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a slider <code>&lt;input&gt;&lt;/input&gt;</code> element. Range
+  sliders are
+
+  useful for quickly selecting numbers from a given range.</p>
+
+  <p>The first two parameters, <code>min</code> and <code>max</code>, are
+  numbers that set the
+
+  slider's minimum and maximum.</p>
+
+  <p>The third parameter, <code>value</code>, is optional. It's a number that
+  sets the
+
+  slider's default value.</p>
+
+  <p>The fourth parameter, <code>step</code>, is also optional. It's a number
+  that sets the
+
+  spacing between each value in the slider's range. Setting <code>step</code> to
+  0
+
+  allows the slider to move smoothly from <code>min</code> to
+  <code>max</code>.</p>
+line: 717
+params:
+  - name: min
+    description: |
+      <p>minimum value of the slider.</p>
+    type: Number
+  - name: max
+    description: |
+      <p>maximum value of the slider.</p>
+    type: Number
+  - name: value
+    description: |
+      <p>default value of the slider.</p>
+    type: Number
+    optional: true
+  - name: step
+    description: |
+      <p>size for each step in the slider's range.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      // Create a slider and place it at the top of the canvas.
+      slider = createSlider(0, 255);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      slider = createSlider(0, 255, 0);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      // Set its step size to 50.
+      slider = createSlider(0, 255, 0, 50);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      // Set its step size to 0 so that it moves smoothly.
+      slider = createSlider(0, 255, 0, 0);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createSlider
diff --git a/src/content/reference/en/p5/createSpan.mdx b/src/content/reference/en/p5/createSpan.mdx
new file mode 100644
index 0000000000..6cc1a1a91f
--- /dev/null
+++ b/src/content/reference/en/p5/createSpan.mdx
@@ -0,0 +1,87 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createSpan
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code>&lt;span&gt;&lt;/span&gt;</code> element. It's commonly
+  used as a
+
+  container for inline elements. For example, a
+  <code>&lt;span&gt;&lt;/span&gt;</code>
+
+  can hold part of a sentence that's a
+
+  <span style="color: deeppink;">different</span> style.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code>&lt;span&gt;&lt;/span&gt;</code>.</p>
+line: 518
+params:
+  - name: html
+    description: >
+      <p>inner HTML for the new <code>&lt;span&gt;&lt;/span&gt;</code>
+      element.</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a span element.
+      let span = createSpan('p5*js');
+      span.position(25, 35);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a div element as
+      // a container.
+      let div = createDiv();
+      // Place the div at the
+      // center.
+      div.position(25, 35);
+
+      // Create a span element.
+      let s1 = createSpan('p5');
+      // Create a second span element.
+      let s2 = createSpan('*');
+      // Set the span's font color.
+      s2.style('color', 'deeppink');
+      // Create a third span element.
+      let s3 = createSpan('js');
+
+      // Add all the spans to the
+      // container div.
+      s1.parent(div);
+      s2.parent(div);
+      s3.parent(div);
+
+      describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createSpan
diff --git a/src/content/reference/en/p5/createStringDict.mdx b/src/content/reference/en/p5/createStringDict.mdx
new file mode 100644
index 0000000000..d6f519ffde
--- /dev/null
+++ b/src/content/reference/en/p5/createStringDict.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createStringDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Creates a new instance of p5.StringDict using the key-value pair
+   or the object you provide.</p>
+line: 14
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myDictionary = createStringDict('p5', 'js');
+       print(myDictionary.hasKey('p5')); // logs true to console
+      let anotherDictionary = createStringDict({ happy: 'coding' });
+       print(anotherDictionary.hasKey('happy')); // logs true to console
+     }
+     </code></div>
+return:
+  description: ''
+  type: p5.StringDict
+chainable: false
+---
+
+
+# createStringDict
diff --git a/src/content/reference/en/p5/createVector.mdx b/src/content/reference/en/p5/createVector.mdx
new file mode 100644
index 0000000000..7a57bffdbb
--- /dev/null
+++ b/src/content/reference/en/p5/createVector.mdx
@@ -0,0 +1,125 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createVector
+module: Math
+submodule: Vector
+file: src/math/math.js
+description: >
+  <p>Creates a new <a href="#/p5.Vector">p5.Vector</a> object. A vector is like
+
+  an arrow pointing in space. Vectors have both magnitude (length)
+
+  and direction. Calling <code>createVector()</code> without arguments sets the
+  new
+
+  vector's components to 0.</p>
+
+  <p><a href="#/p5.Vector">p5.Vector</a> objects are often used to program
+
+  motion because they simplify the math. For example, a moving ball has a
+
+  position and a velocity. Position describes where the ball is in space. The
+
+  ball's position vector extends from the origin to the ball's center.
+
+  Velocity describes the ball's speed and the direction it's moving. If the
+
+  ball is moving straight up, its velocity vector points straight up. Adding
+
+  the ball's velocity vector to its position vector moves it, as in
+
+  <code>pos.add(vel)</code>. Vector math relies on methods inside the
+
+  <a href="#/p5.Vector">p5.Vector</a> class.</p>
+line: 10
+params:
+  - name: x
+    description: |
+      <p>x component of the vector.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y component of the vector.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z component of the vector.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let p1 = createVector(25, 25);
+
+    let p2 = createVector(50, 50);
+
+    let p3 = createVector(75, 75);
+
+
+    strokeWeight(5);
+
+    point(p1);
+
+    point(p2);
+
+    point(p3);
+
+
+    describe('Three black dots form a diagonal line from top left to bottom
+    right.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let pos;
+
+    let vel;
+
+
+    function setup() {
+      createCanvas(100, 100);
+      pos = createVector(width / 2, height);
+      vel = createVector(0, -1);
+    }
+
+
+    function draw() {
+      background(200);
+
+      pos.add(vel);
+
+      if (pos.y < 0) {
+        pos.y = height;
+      }
+
+      strokeWeight(5);
+      point(pos);
+
+      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+    }
+
+    </code>
+
+    </div>
+return:
+  description: new <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# createVector
diff --git a/src/content/reference/en/p5/createVideo.mdx b/src/content/reference/en/p5/createVideo.mdx
new file mode 100644
index 0000000000..4a55f73579
--- /dev/null
+++ b/src/content/reference/en/p5/createVideo.mdx
@@ -0,0 +1,127 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createVideo
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code>&lt;video&gt;</code> element for simple audio/video
+  playback.
+
+  Returns a new <a href="#/p5.MediaElement">p5.MediaElement</a> object.</p>
+
+  <p>Videos are shown by default. They can be hidden by calling
+  <code>video.hide()</code>
+
+  and drawn to the canvas using <a href="#/p5/image">image()</a>.</p>
+
+  <p>The first parameter, <code>src</code>, is the path the video. If a single
+  string is
+
+  passed, as in <code>'assets/topsecret.mp4'</code>, a single video is loaded.
+  An array
+
+  of strings can be used to load the same video in different formats. For
+
+  example, <code>['assets/topsecret.mp4', 'assets/topsecret.ogv',
+  'assets/topsecret.webm']</code>.
+
+  This is useful for ensuring that the video can play across different browsers
+  with
+
+  different capabilities. See
+
+  <a
+  href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>MDN</a>
+
+  for more information about supported formats.</p>
+
+  <p>The second parameter, <code>callback</code>, is optional. It's a function
+  to call once
+
+  the video is ready to play.</p>
+line: 1950
+params:
+  - name: src
+    description: |
+      <p>path to a video file, or an array of paths for
+                                    supporting different browsers.</p>
+    type: 'String|String[]'
+  - name: callback
+    description: |
+      <p>function to call once the video is ready to play.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Note: this may not work in some browsers.
+      let video = createVideo('assets/small.mp4');
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Provide an array options for different file formats.
+      let video = createVideo(
+        ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']
+      );
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    let video;
+
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Provide an array options for different file formats.
+      // Call mute() once the video loads.
+      video = createVideo(
+        ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
+        muteVideo
+      );
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+
+    // Mute the video once it loads.
+    function muteVideo() {
+      video.volume(0);
+    }
+    </code>
+    </div>
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createVideo
diff --git a/src/content/reference/en/p5/createWriter.mdx b/src/content/reference/en/p5/createWriter.mdx
new file mode 100644
index 0000000000..5d7b6cd766
--- /dev/null
+++ b/src/content/reference/en/p5/createWriter.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: createWriter
+module: IO
+submodule: Output
+file: src/io/files.js
+description: ''
+line: 1143
+params:
+  - name: name
+    description: |
+      <p>name of the file to be created</p>
+    type: String
+  - name: extension
+    description: ''
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+      text('click here to save', 10, 10, 70, 80);
+    }
+
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        const writer = createWriter('squares.txt');
+        for (let i = 0; i < 10; i++) {
+          writer.print(i * i);
+        }
+        writer.close();
+        writer.clear();
+      }
+    }
+    </code>
+    </div>
+return:
+  description: ''
+  type: p5.PrintWriter
+chainable: false
+---
+
+
+# createWriter
diff --git a/src/content/reference/en/p5/cursor.mdx b/src/content/reference/en/p5/cursor.mdx
new file mode 100644
index 0000000000..1fa779c08b
--- /dev/null
+++ b/src/content/reference/en/p5/cursor.mdx
@@ -0,0 +1,124 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: cursor
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Changes the cursor's appearance.</p>
+
+  <p>The first parameter, <code>type</code>, sets the type of cursor to display.
+  The
+
+  built-in options are <code>ARROW</code>, <code>CROSS</code>,
+  <code>HAND</code>, <code>MOVE</code>, <code>TEXT</code>, and
+  <code>WAIT</code>.
+
+  <code>cursor()</code> also recognizes standard CSS cursor properties passed as
+
+  strings: <code>'help'</code>, <code>'wait'</code>, <code>'crosshair'</code>,
+  <code>'not-allowed'</code>, <code>'zoom-in'</code>,
+
+  and <code>'grab'</code>. If the path to an image is passed, as in
+
+  <code>cursor('assets/target.png')</code>, then the image will be used as the
+  cursor.
+
+  Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be <a
+  href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits">at
+  most 32 by 32 pixels large.</a></p>
+
+  <p>The parameters <code>x</code> and <code>y</code> are optional. If an image
+  is used for the
+
+  cursor, <code>x</code> and <code>y</code> set the location pointed to within
+  the image. They are
+
+  both 0 by default, so the cursor points to the image's top-left corner.
+  <code>x</code>
+
+  and <code>y</code> must be less than the image's width and height,
+  respectively.</p>
+line: 193
+params:
+  - name: type
+    description: |
+      <p>Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
+                                    Native CSS properties: 'grab', 'progress', and so on.
+                                    Path to cursor image.</p>
+    type: String|Constant
+  - name: x
+    description: |
+      <p>horizontal active spot of the cursor.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>vertical active spot of the cursor.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // Set the cursor to crosshairs: +
+      cursor(CROSS);
+
+      describe('A gray square. The cursor appears as crosshairs.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // Divide the canvas into quadrants.
+      line(50, 0, 50, 100);
+      line(0, 50, 100, 50);
+
+      // Change cursor based on mouse position.
+      if (mouseX < 50 && mouseY < 50) {
+        cursor(CROSS);
+      } else if (mouseX > 50 && mouseY < 50) {
+        cursor('progress');
+      } else if (mouseX > 50 && mouseY > 50) {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+      } else {
+        cursor('grab');
+      }
+
+      describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // Change the cursor's active spot
+      // when the mouse is pressed.
+      if (mouseIsPressed === true) {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);
+      } else {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+      }
+
+      describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# cursor
diff --git a/src/content/reference/en/p5/curve.mdx b/src/content/reference/en/p5/curve.mdx
new file mode 100644
index 0000000000..f356c11b35
--- /dev/null
+++ b/src/content/reference/en/p5/curve.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: CURVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 653
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# CURVE
diff --git a/src/content/reference/en/p5/curveDetail.mdx b/src/content/reference/en/p5/curveDetail.mdx
new file mode 100644
index 0000000000..5b5a7ddb99
--- /dev/null
+++ b/src/content/reference/en/p5/curveDetail.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: curveDetail
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: |
+  <p>Sets the resolution at which curves display. The default value is 20 while
+  the minimum value is 3.</p>
+  <p>This function is only useful when using the WEBGL renderer
+  as the default canvas renderer does not use this
+  information.</p>
+line: 359
+params:
+  - name: resolution
+    description: |
+      <p>resolution of the curves</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      curveDetail(5);
+    }
+    function draw() {
+      background(200);
+
+      curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);
+    }
+    </code>
+    </div>
+alt: white arch shape with a low level of curve detail.
+chainable: true
+---
+
+
+# curveDetail
diff --git a/src/content/reference/en/p5/curvePoint.mdx b/src/content/reference/en/p5/curvePoint.mdx
new file mode 100644
index 0000000000..e8b7b33838
--- /dev/null
+++ b/src/content/reference/en/p5/curvePoint.mdx
@@ -0,0 +1,68 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: curvePoint
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: |
+  <p>Evaluates the curve at position t for points a, b, c, d.
+  The parameter t varies between 0 and 1, a and d are control points
+  of the curve, and b and c are the start and end points of the curve.
+  This can be done once with the x coordinates and a second time
+  with the y coordinates to get the location of a curve at t.</p>
+line: 445
+params:
+  - name: a
+    description: |
+      <p>coordinate of first control point of the curve</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first point</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second point</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second control point</p>
+    type: Number
+  - name: t
+    description: |
+      <p>value between 0 and 1</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noFill();
+    curve(5, 26, 5, 26, 73, 24, 73, 61);
+    curve(5, 26, 73, 24, 73, 61, 15, 65);
+    fill(255);
+    ellipseMode(CENTER);
+    let steps = 6;
+    for (let i = 0; i <= steps; i++) {
+      let t = i / steps;
+      let x = curvePoint(5, 5, 73, 73, t);
+      let y = curvePoint(26, 26, 24, 61, t);
+      ellipse(x, y, 5, 5);
+      x = curvePoint(5, 73, 73, 15, t);
+      y = curvePoint(26, 24, 61, 65, t);
+      ellipse(x, y, 5, 5);
+    }
+    </code>
+    </div>
+
+    line hooking down to right-bottom with 13 5×5 white ellipse points
+return:
+  description: <a href="#/p5/curve">Curve</a> value at position t
+  type: Number
+chainable: false
+---
+
+
+# curvePoint
diff --git a/src/content/reference/en/p5/curveTangent.mdx b/src/content/reference/en/p5/curveTangent.mdx
new file mode 100644
index 0000000000..9afbd2b83c
--- /dev/null
+++ b/src/content/reference/en/p5/curveTangent.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: curveTangent
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: |
+  <p>Evaluates the tangent to the curve at position t for points a, b, c, d.
+  The parameter t varies between 0 and 1, a and d are points on the curve,
+  and b and c are the control points.</p>
+line: 494
+params:
+  - name: a
+    description: |
+      <p>coordinate of first control point</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first point on the curve</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second point on the curve</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second conrol point</p>
+    type: Number
+  - name: t
+    description: |
+      <p>value between 0 and 1</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noFill();
+    curve(5, 26, 73, 24, 73, 61, 15, 65);
+    let steps = 6;
+    for (let i = 0; i <= steps; i++) {
+      let t = i / steps;
+      let x = curvePoint(5, 73, 73, 15, t);
+      let y = curvePoint(26, 24, 61, 65, t);
+      //ellipse(x, y, 5, 5);
+      let tx = curveTangent(5, 73, 73, 15, t);
+      let ty = curveTangent(26, 24, 61, 65, t);
+      let a = atan2(ty, tx);
+      a -= PI / 2.0;
+      line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
+    }
+    </code>
+    </div>
+alt: right curving line mid-right of canvas with 7 short lines radiating from it.
+return:
+  description: the tangent at position t
+  type: Number
+chainable: false
+---
+
+
+# curveTangent
diff --git a/src/content/reference/en/p5/curveTightness.mdx b/src/content/reference/en/p5/curveTightness.mdx
new file mode 100644
index 0000000000..feb393b22b
--- /dev/null
+++ b/src/content/reference/en/p5/curveTightness.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: curveTightness
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Modifies the quality of forms created with <a href="#/p5/curve">curve()</a>
+
+  and <a href="#/p5/curveVertex">curveVertex()</a>.The parameter tightness
+
+  determines how the curve fits to the vertex points. The value 0.0 is the
+
+  default value for tightness (this value defines the curves to be Catmull-Rom
+
+  splines) and the value 1.0 connects all the points with straight lines.
+
+  Values within the range -5.0 and 5.0 will deform the curves but will leave
+
+  them recognizable and as values increase in magnitude, they will continue to
+  deform.</p>
+line: 399
+params:
+  - name: amount
+    description: |
+      <p>amount of deformation from the original vertices</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move the mouse left and right to see the curve change
+    function setup() {
+      createCanvas(100, 100);
+      noFill();
+    }
+
+    function draw() {
+      background(204);
+      let t = map(mouseX, 0, width, -5, 5);
+      curveTightness(t);
+      beginShape();
+      curveVertex(10, 26);
+      curveVertex(10, 26);
+      curveVertex(83, 24);
+      curveVertex(83, 61);
+      curveVertex(25, 65);
+      curveVertex(25, 65);
+      endShape();
+    }
+    </code>
+    </div>
+alt: 'Line shaped like right-facing arrow,points move with mouse-x and warp shape.'
+chainable: true
+---
+
+
+# curveTightness
diff --git a/src/content/reference/en/p5/curveVertex.mdx b/src/content/reference/en/p5/curveVertex.mdx
new file mode 100644
index 0000000000..7715979210
--- /dev/null
+++ b/src/content/reference/en/p5/curveVertex.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: curveVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Specifies vertex coordinates for curves. This function may only
+
+  be used between <a href="#/p5/beginShape">beginShape()</a> and <a
+  href="#/p5/endShape">endShape()</a> and only when there
+
+  is no MODE parameter specified to <a href="#/p5/beginShape">beginShape()</a>.
+
+  For WebGL mode curveVertex() can be used in 2D as well as 3D mode.
+
+  2D mode expects 2 parameters, while 3D mode expects 3 parameters.</p>
+
+  <p>The first and last points in a series of curveVertex() lines will be used
+  to
+
+  guide the beginning and end of the curve. A minimum of four
+
+  points is required to draw a tiny curve between the second and
+
+  third points. Adding a fifth point with curveVertex() will draw
+
+  the curve between the second, third, and fourth points. The
+
+  curveVertex() function is an implementation of Catmull-Rom
+
+  splines.</p>
+line: 419
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    strokeWeight(5);
+    point(84, 91);
+    point(68, 19);
+    point(21, 17);
+    point(32, 91);
+    strokeWeight(1);
+
+    noFill();
+    beginShape();
+    curveVertex(84, 91);
+    curveVertex(84, 91);
+    curveVertex(68, 19);
+    curveVertex(21, 17);
+    curveVertex(32, 91);
+    curveVertex(32, 91);
+    endShape();
+    </code>
+    </div>
+alt: 'Upside-down u-shape line, mid canvas. left point extends beyond canvas view.'
+chainable: true
+---
+
+
+# curveVertex
diff --git a/src/content/reference/en/p5/cylinder.mdx b/src/content/reference/en/p5/cylinder.mdx
new file mode 100644
index 0000000000..6c71f33b10
--- /dev/null
+++ b/src/content/reference/en/p5/cylinder.mdx
@@ -0,0 +1,125 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: cylinder
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draw a cylinder with given radius and height</p>
+
+  <p>DetailX and detailY determines the number of subdivisions in the
+  x-dimension
+
+  and the y-dimension of a cylinder. More subdivisions make the cylinder seem
+  smoother.
+
+  The recommended maximum value for detailX is 24. Using a value greater than 24
+
+  may cause a warning or slow down the browser.</p>
+line: 600
+params:
+  - name: radius
+    description: |
+      <p>radius of the surface</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the cylinder</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of subdivisions in x-dimension;
+                                    default is 24</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of subdivisions in y-dimension;
+                                    default is 1</p>
+    type: Integer
+    optional: true
+  - name: bottomCap
+    description: |
+      <p>whether to draw the bottom of the cylinder</p>
+    type: Boolean
+    optional: true
+  - name: topCap
+    description: |
+      <p>whether to draw the top of the cylinder</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // draw a spinning cylinder
+    // with radius 20 and height 50
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('a rotating white cylinder');
+    }
+
+    function draw() {
+      background(205, 105, 94);
+      rotateX(frameCount * 0.01);
+      rotateZ(frameCount * 0.01);
+      cylinder(20, 50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailX works
+    let detailX;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailX = createSlider(3, 24, 3);
+      detailX.position(10, height + 5);
+      detailX.style('width', '80px');
+      describe(
+        'a rotating white cylinder with limited X detail, with a slider that adjusts detailX'
+      );
+    }
+
+    function draw() {
+      background(205, 105, 94);
+      rotateY(millis() / 1000);
+      cylinder(20, 75, detailX.value(), 1);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailY works
+    let detailY;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailY = createSlider(1, 16, 1);
+      detailY.position(10, height + 5);
+      detailY.style('width', '80px');
+      describe(
+        'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY'
+      );
+    }
+
+    function draw() {
+      background(205, 105, 94);
+      rotateY(millis() / 1000);
+      cylinder(20, 75, 16, detailY.value());
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# cylinder
diff --git a/src/content/reference/en/p5/day.mdx b/src/content/reference/en/p5/day.mdx
new file mode 100644
index 0000000000..2741186388
--- /dev/null
+++ b/src/content/reference/en/p5/day.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: day
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>p5.js communicates with the clock on your computer. The <a
+  href="#/p5/day">day()</a> function
+
+  returns the current day as a value from 1 - 31.</p>
+line: 10
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let d = day();
+    text('Current day: \n' + d, 5, 50);
+    describe('Current day is displayed');
+    </code>
+    </div>
+return:
+  description: the current day
+  type: Integer
+chainable: false
+---
+
+
+# day
diff --git a/src/content/reference/en/p5/debugMode.mdx b/src/content/reference/en/p5/debugMode.mdx
new file mode 100644
index 0000000000..7ca3c95fd4
--- /dev/null
+++ b/src/content/reference/en/p5/debugMode.mdx
@@ -0,0 +1,162 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: debugMode
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: >
+  <p>debugMode() helps visualize 3D space by adding a grid to indicate where the
+
+  ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z
+
+  directions. This function can be called without parameters to create a
+
+  default grid and axes icon, or it can be called according to the examples
+
+  above to customize the size and position of the grid and/or axes icon.  The
+
+  grid is drawn using the most recently set stroke color and weight.  To
+
+  specify these parameters, add a call to stroke() and strokeWeight()
+
+  just before the end of the draw() loop.</p>
+
+  <p>By default, the grid will run through the origin (0,0,0) of the sketch
+
+  along the XZ plane
+
+  and the axes icon will be offset from the origin.  Both the grid and axes
+
+  icon will be sized according to the current canvas size.  Note that because
+  the
+
+  grid runs parallel to the default camera view, it is often helpful to use
+
+  debugMode along with orbitControl to allow full view of the grid.</p>
+line: 378
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      normalMaterial();
+      debugMode();
+      describe(
+        'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
+      );
+    }
+
+    function draw() {
+      background(200);
+      orbitControl();
+      box(15, 30);
+      // Press the spacebar to turn debugMode off!
+      if (keyIsDown(32)) {
+        noDebugMode();
+      }
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      normalMaterial();
+      debugMode(GRID);
+      describe('a 3D box is centered on a grid in a 3D sketch.');
+    }
+
+    function draw() {
+      background(200);
+      orbitControl();
+      box(15, 30);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      normalMaterial();
+      debugMode(AXES);
+      describe(
+        'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
+      );
+    }
+
+    function draw() {
+      background(200);
+      orbitControl();
+      box(15, 30);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      normalMaterial();
+      debugMode(GRID, 100, 10, 0, 0, 0);
+      describe('a 3D box is centered on a grid in a 3D sketch');
+    }
+
+    function draw() {
+      background(200);
+      orbitControl();
+      box(15, 30);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      normalMaterial();
+      debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
+      describe(
+        'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
+      );
+    }
+
+    function draw() {
+      noStroke();
+      background(200);
+      orbitControl();
+      box(15, 30);
+      // set the stroke color and weight for the grid!
+      stroke(255, 0, 150);
+      strokeWeight(0.8);
+    }
+    </code>
+    </div>
+alt: |-
+  a 3D box is centered on a grid in a 3D sketch. an icon
+  indicates the direction of each axis: a red line points +X,
+  a green line +Y, and a blue line +Z.
+chainable: false
+---
+
+
+# debugMode
diff --git a/src/content/reference/en/p5/deltaTime.mdx b/src/content/reference/en/p5/deltaTime.mdx
new file mode 100644
index 0000000000..0a2e9e0843
--- /dev/null
+++ b/src/content/reference/en/p5/deltaTime.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: deltaTime
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Tracks the amount of time, in milliseconds, it took for
+
+  <a href="#/p5/draw">draw</a> to draw the previous frame.
+  <code>deltaTime</code> is
+
+  useful for simulating physics.</p>
+line: 119
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let x = 0;
+    let speed = 0.05;
+
+    function setup()  {
+      // Set the frameRate to 30.
+      frameRate(30);
+    }
+
+    function draw() {
+      background(200);
+
+      // Use deltaTime to calculate
+      // a change in position.
+      let deltaX = speed * deltaTime;
+
+      // Update the x variable.
+      x += deltaX;
+
+      // Reset x to 0 if it's
+      // greater than 100.
+      if (x > 100)  {
+        x = 0;
+      }
+
+      // Use x to set the circle's
+      // position.
+      circle(x, 50, 20);
+
+      describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# deltaTime
diff --git a/src/content/reference/en/p5/describe.mdx b/src/content/reference/en/p5/describe.mdx
new file mode 100644
index 0000000000..b83a9624ce
--- /dev/null
+++ b/src/content/reference/en/p5/describe.mdx
@@ -0,0 +1,132 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: describe
+module: Environment
+submodule: Environment
+file: src/accessibility/describe.js
+description: >
+  <p>Creates a screen reader-accessible description for the canvas.</p>
+
+  <p>The first parameter, <code>text</code>, is the description of the
+  canvas.</p>
+
+  <p>The second parameter, <code>display</code>, is optional. It determines how
+  the
+
+  description is displayed. If <code>LABEL</code> is passed, as in
+
+  <code>describe('A description.', LABEL)</code>, the description will be
+  visible in
+
+  a div element next to the canvas. If <code>FALLBACK</code> is passed, as in
+
+  <code>describe('A description.', FALLBACK)</code>, the description will only
+  be
+
+  visible to screen readers. This is the default mode.</p>
+
+  <p>Read
+
+  <a href="/learn/labeling-canvases.html">How to label your p5.js code</a> to
+
+  learn more about making sketches accessible.</p>
+line: 18
+params:
+  - name: text
+    description: |
+      <p>description of the canvas.</p>
+    type: String
+  - name: display
+    description: |
+      <p>either LABEL or FALLBACK.</p>
+    type: Constant
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Draw a heart.
+      fill('red');
+      noStroke();
+      circle(67, 67, 20);
+      circle(83, 67, 20);
+      triangle(91, 73, 75, 95, 59, 73);
+
+      // Add a general description of the canvas.
+      describe('A pink square with a red heart in the bottom-right corner.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Draw a heart.
+      fill('red');
+      noStroke();
+      circle(67, 67, 20);
+      circle(83, 67, 20);
+      triangle(91, 73, 75, 95, 59, 73);
+
+      // Add a general description of the canvas
+      // and display it for debugging.
+      describe('A pink square with a red heart in the bottom-right corner.', LABEL);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // The expression
+      // frameCount % 100
+      // causes x to increase from 0
+      // to 99, then restart from 0.
+      let x = frameCount % 100;
+
+      // Draw the circle.
+      fill(0, 255, 0);
+      circle(x, 50, 40);
+
+      // Add a general description of the canvas.
+      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // The expression
+      // frameCount % 100
+      // causes x to increase from 0
+      // to 99, then restart from 0.
+      let x = frameCount % 100;
+
+      // Draw the circle.
+      fill(0, 255, 0);
+      circle(x, 50, 40);
+
+      // Add a general description of the canvas
+      // and display it for debugging.
+      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# describe
diff --git a/src/content/reference/en/p5/describeElement.mdx b/src/content/reference/en/p5/describeElement.mdx
new file mode 100644
index 0000000000..378ab53c4c
--- /dev/null
+++ b/src/content/reference/en/p5/describeElement.mdx
@@ -0,0 +1,119 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: describeElement
+module: Environment
+submodule: Environment
+file: src/accessibility/describe.js
+description: >
+  <p>Creates a screen reader-accessible description for elements in the canvas.
+
+  Elements are shapes or groups of shapes that create meaning together.</p>
+
+  <p>The first parameter, <code>name</code>, is the name of the element.</p>
+
+  <p>The second parameter, <code>text</code>, is the description of the
+  element.</p>
+
+  <p>The third parameter, <code>display</code>, is optional. It determines how
+  the
+
+  description is displayed. If <code>LABEL</code> is passed, as in
+
+  <code>describe('A description.', LABEL)</code>, the description will be
+  visible in
+
+  a div element next to the canvas. Using <code>LABEL</code> creates unhelpful
+
+  duplicates for screen readers. Only use <code>LABEL</code> during development.
+  If
+
+  <code>FALLBACK</code> is passed, as in <code>describe('A description.',
+  FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a href="/learn/labeling-canvases.html">How to label your p5.js code</a> to
+
+  learn more about making sketches accessible.</p>
+line: 162
+params:
+  - name: name
+    description: |
+      <p>name of the element.</p>
+    type: String
+  - name: text
+    description: |
+      <p>description of the element.</p>
+    type: String
+  - name: display
+    description: |
+      <p>either LABEL or FALLBACK.</p>
+    type: Constant
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Describe the first element
+      // and draw it.
+      describeElement('Circle', 'A yellow circle in the top-left corner.');
+      noStroke();
+      fill('yellow');
+      circle(25, 25, 40);
+
+      // Describe the second element
+      // and draw it.
+      describeElement('Heart', 'A red heart in the bottom-right corner.');
+      fill('red');
+      circle(66.6, 66.6, 20);
+      circle(83.2, 66.6, 20);
+      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+
+      // Add a general description of the canvas.
+      describe('A red heart and yellow circle over a pink background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Describe the first element
+      // and draw it. Display the
+      // description for debugging.
+      describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
+      noStroke();
+      fill('yellow');
+      circle(25, 25, 40);
+
+      // Describe the second element
+      // and draw it. Display the
+      // description for debugging.
+      describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
+      fill('red');
+      circle(66.6, 66.6, 20);
+      circle(83.2, 66.6, 20);
+      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+
+      // Add a general description of the canvas.
+      describe('A red heart and yellow circle over a pink background.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# describeElement
diff --git a/src/content/reference/en/p5/deviceMoved.mdx b/src/content/reference/en/p5/deviceMoved.mdx
new file mode 100644
index 0000000000..5108b0c321
--- /dev/null
+++ b/src/content/reference/en/p5/deviceMoved.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: deviceMoved
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="#/p5/deviceMoved">deviceMoved()</a> function is called when
+  the device is moved by more than
+
+  the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
+
+  The threshold value can be changed using <a
+  href="https://p5js.org/reference/#/p5/setMoveThreshold">setMoveThreshold()</a>.</p>
+line: 501
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Move the device around
+    // to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device moves`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# deviceMoved
diff --git a/src/content/reference/en/p5/deviceOrientation.mdx b/src/content/reference/en/p5/deviceOrientation.mdx
new file mode 100644
index 0000000000..7754d8b3f5
--- /dev/null
+++ b/src/content/reference/en/p5/deviceOrientation.mdx
@@ -0,0 +1,19 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: deviceOrientation
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable deviceOrientation always contains the orientation of
+  the device. The value of this variable will either be set 'landscape'
+  or 'portrait'. If no data is available it will be set to 'undefined'.
+  either LANDSCAPE or PORTRAIT.</p>
+line: 11
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# deviceOrientation
diff --git a/src/content/reference/en/p5/deviceShaken.mdx b/src/content/reference/en/p5/deviceShaken.mdx
new file mode 100644
index 0000000000..781e968586
--- /dev/null
+++ b/src/content/reference/en/p5/deviceShaken.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: deviceShaken
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="#/p5/deviceShaken">deviceShaken()</a> function is called when
+  the device total acceleration
+
+  changes of accelerationX and accelerationY values is more than
+
+  the threshold value. The default threshold is set to 30.
+
+  The threshold value can be changed using <a
+  href="https://p5js.org/reference/#/p5/setShakeThreshold">setShakeThreshold()</a>.</p>
+line: 589
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Shake the device to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device shakes`);
+    }
+    function deviceShaken() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# deviceShaken
diff --git a/src/content/reference/en/p5/deviceTurned.mdx b/src/content/reference/en/p5/deviceTurned.mdx
new file mode 100644
index 0000000000..fdf4dd4348
--- /dev/null
+++ b/src/content/reference/en/p5/deviceTurned.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: deviceTurned
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="#/p5/deviceTurned">deviceTurned()</a> function is called when
+  the device rotates by
+
+  more than 90 degrees continuously.</p>
+
+  <p>The axis that triggers the <a href="#/p5/deviceTurned">deviceTurned()</a>
+  method is stored in the turnAxis
+
+  variable. The <a href="#/p5/deviceTurned">deviceTurned()</a> method can be
+  locked to trigger on any axis:
+
+  X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>
+line: 531
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees
+    // to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device turns`);
+    }
+    function deviceTurned() {
+      if (value === 0) {
+        value = 255;
+      } else if (value === 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+    <div>
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees in the
+    // X-axis to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when x-axis turns`);
+    }
+    function deviceTurned() {
+      if (turnAxis === 'X') {
+        if (value === 0) {
+          value = 255;
+        } else if (value === 255) {
+          value = 0;
+        }
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# deviceTurned
diff --git a/src/content/reference/en/p5/directionalLight.mdx b/src/content/reference/en/p5/directionalLight.mdx
new file mode 100644
index 0000000000..0db9fa02a7
--- /dev/null
+++ b/src/content/reference/en/p5/directionalLight.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: directionalLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a directional light with the given color and direction.</p>
+
+  <p>Directional light comes from one direction.
+
+  The direction is specified as numbers inclusively between -1 and 1.
+
+  For example, setting the direction as (0, -1, 0) will cause the
+
+  geometry to be lit from below (since the light will be facing
+
+  directly upwards). Similarly, setting the direction as (1, 0, 0)
+
+  will cause the geometry to be lit from the left (since the light
+
+  will be facing directly rightwards).</p>
+
+  <p>Directional lights do not have a specific point of origin, and
+
+  therefore cannot be positioned closer or farther away from a geometry.</p>
+
+  <p>A maximum of <strong>5</strong> directional lights can be active at
+  once.</p>
+
+  <p>Note: lights need to be called (whether directly or indirectly)
+
+  within draw() to remain persistent in a looping program.
+
+  Placing them in setup() will cause them to only have an effect
+
+  the first time through the loop.</p>
+line: 246
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe(
+        'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'
+      );
+    }
+    function draw() {
+      background(0);
+      //move your mouse to change light direction
+      let dirX = (mouseX / width - 0.5) * 2;
+      let dirY = (mouseY / height - 0.5) * 2;
+      directionalLight(250, 250, 250, -dirX, -dirY, -1);
+      noStroke();
+      sphere(40);
+    }
+    </code>
+    </div>
+alt: |-
+  scene with sphere and directional light. The direction of
+  the light is controlled with the mouse position.
+chainable: true
+---
+
+
+# directionalLight
diff --git a/src/content/reference/en/p5/disableFriendlyErrors.mdx b/src/content/reference/en/p5/disableFriendlyErrors.mdx
new file mode 100644
index 0000000000..ff8c03441e
--- /dev/null
+++ b/src/content/reference/en/p5/disableFriendlyErrors.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: disableFriendlyErrors
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>Turn off some features of the friendly error system (FES), which can give
+
+  a significant boost to performance when needed.</p>
+
+  <p>Note that this will disable the parts of the FES that cause performance
+
+  slowdown (like argument checking). Friendly errors that have no performance
+
+  cost (like giving a descriptive error if a file load fails, or warning you
+
+  if you try to override p5.js functions in the global space),
+
+  will remain in place.</p>
+
+  <p>See <a
+  href='https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes'>
+
+  disabling the friendly error system</a>.</p>
+line: 750
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class="norender notest"><code>
+    p5.disableFriendlyErrors = true;
+
+    function setup() {
+      createCanvas(100, 50);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# disableFriendlyErrors
diff --git a/src/content/reference/en/p5/displayDensity.mdx b/src/content/reference/en/p5/displayDensity.mdx
new file mode 100644
index 0000000000..6b1fcfcaaa
--- /dev/null
+++ b/src/content/reference/en/p5/displayDensity.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: displayDensity
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Returns the display's current pixel density.</p>
+line: 1010
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 1.
+      pixelDensity(1);
+
+      // Create a canvas and draw
+      // a circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');
+    }
+
+    function mousePressed() {
+      // Get the current display density.
+      let d = displayDensity();
+
+      // Use the display density to set
+      // the sketch's pixel density.
+      pixelDensity(d);
+
+      // Paint the background and
+      // draw a circle.
+      background(200);
+      circle(50, 50, 70);
+    }
+    </code>
+    </div>
+return:
+  description: current pixel density of the display.
+  type: Number
+chainable: false
+---
+
+
+# displayDensity
diff --git a/src/content/reference/en/p5/displayHeight.mdx b/src/content/reference/en/p5/displayHeight.mdx
new file mode 100644
index 0000000000..1de5d3af22
--- /dev/null
+++ b/src/content/reference/en/p5/displayHeight.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: displayHeight
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>A numeric variable that stores the height of the screen display. Its value
+  depends on the current <a href="#/p5/pixelDensity">pixelDensity()</a>.
+  <code>displayHeight</code> is useful for running full-screen programs.</p>
+  <p>Note: The actual screen height can be computed as
+  <code>displayHeight * pixelDensity()</code>.</p>
+line: 577
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the display's dimensions.
+      createCanvas(displayWidth, displayHeight);
+
+      background(200);
+
+      describe('A gray canvas that is the same size as the display.');
+    }
+    </code>
+    </div>
+alt: This example does not render anything.
+chainable: false
+---
+
+
+# displayHeight
diff --git a/src/content/reference/en/p5/displayWidth.mdx b/src/content/reference/en/p5/displayWidth.mdx
new file mode 100644
index 0000000000..422586d32f
--- /dev/null
+++ b/src/content/reference/en/p5/displayWidth.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: displayWidth
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>A numeric variable that stores the width of the screen display. Its value
+  depends on the current <a href="#/p5/pixelDensity">pixelDensity()</a>.
+  <code>displayWidth</code> is useful for running full-screen programs.</p>
+  <p>Note: The actual screen width can be computed as
+  <code>displayWidth * pixelDensity()</code>.</p>
+line: 547
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the display's dimensions.
+      createCanvas(displayWidth, displayHeight);
+
+      background(200);
+
+      describe('A gray canvas that is the same size as the display.');
+    }
+    </code>
+    </div>
+alt: This example does not render anything.
+chainable: false
+---
+
+
+# displayWidth
diff --git a/src/content/reference/en/p5/dist.mdx b/src/content/reference/en/p5/dist.mdx
new file mode 100644
index 0000000000..d24ce06dee
--- /dev/null
+++ b/src/content/reference/en/p5/dist.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: dist
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the distance between two points.</p>
+
+  <p>The version of <code>dist()</code> with four parameters calculates distance
+  in two
+
+  dimensions.</p>
+
+  <p>The version of <code>dist()</code> with six parameters calculates distance
+  in three
+
+  dimensions.</p>
+
+  <p>Use <a href="#/p5.Vector/dist">p5.Vector.dist()</a> to calculate the
+
+  distance between two <a href="#/p5.Vector">p5.Vector</a> objects.</p>
+line: 124
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let x1 = 10;
+
+    let y1 = 50;
+
+    let x2 = 90;
+
+    let y2 = 50;
+
+
+    line(x1, y1, x2, y2);
+
+    strokeWeight(5);
+
+    point(x1, y1);
+
+    point(x2, y2);
+
+
+    let d = dist(x1, y1, x2, y2);
+
+    text(d, 43, 40);
+
+
+    describe('Two dots connected by a horizontal line. The number 80 is written
+    above the center of the line.');
+
+    </code>
+
+    </div>
+return:
+  description: distance between the two points.
+  type: Number
+chainable: false
+---
+
+
+# dist
diff --git a/src/content/reference/en/p5/doubleClicked.mdx b/src/content/reference/en/p5/doubleClicked.mdx
new file mode 100644
index 0000000000..1144fa8705
--- /dev/null
+++ b/src/content/reference/en/p5/doubleClicked.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: doubleClicked
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The <a href="#/p5/doubleClicked">doubleClicked()</a> function is executed
+  every time a event
+
+  listener has detected a dblclick event which is a part of the
+
+  DOM L3 specification. The doubleClicked event is fired when a
+
+  pointing device button (usually a mouse's primary button)
+
+  is clicked twice on a single element. For more info on the
+
+  dblclick event refer to mozilla's documentation here:
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/Events/dblclick">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a></p>
+line: 826
+params:
+  - name: event
+    description: |
+      <p>optional MouseEvent callback argument.</p>
+    type: MouseEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click within the image to change
+    // the value of the rectangle
+    // after the mouse has been double clicked
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe('black 50-by-50 rect turns white with mouse doubleClick/press.');
+    }
+
+    function doubleClicked() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function doubleClicked() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a MouseEvent object
+    // as a callback argument
+    function doubleClicked(event) {
+      console.log(event);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# doubleClicked
diff --git a/src/content/reference/en/p5/draw.mdx b/src/content/reference/en/p5/draw.mdx
new file mode 100644
index 0000000000..61669e8848
--- /dev/null
+++ b/src/content/reference/en/p5/draw.mdx
@@ -0,0 +1,90 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: draw
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>Called directly after <a href="#/p5/setup">setup()</a>, the <a
+  href="#/p5/draw">draw()</a> function continuously executes
+
+  the lines of code contained inside its block until the program is stopped
+
+  or <a href="#/p5/noLoop">noLoop()</a> is called. Note if <a
+  href="#/p5/noLoop">noLoop()</a> is called in <a href="#/p5/setup">setup()</a>,
+  <a href="#/p5/draw">draw()</a> will
+
+  still be executed once before stopping. <a href="#/p5/draw">draw()</a> is
+  called automatically and
+
+  should never be called explicitly.</p>
+
+  <p>It should always be controlled with <a href="#/p5/noLoop">noLoop()</a>, <a
+  href="#/p5/redraw">redraw()</a> and <a href="#/p5/loop">loop()</a>. After
+
+  <a href="#/p5/noLoop">noLoop()</a> stops the code in <a
+  href="#/p5/draw">draw()</a> from executing, <a href="#/p5/redraw">redraw()</a>
+  causes the
+
+  code inside <a href="#/p5/draw">draw()</a> to execute once, and <a
+  href="#/p5/loop">loop()</a> will cause the code
+
+  inside <a href="#/p5/draw">draw()</a> to resume executing continuously.</p>
+
+  <p>The number of times <a href="#/p5/draw">draw()</a> executes in each second
+  may be controlled with
+
+  the <a href="#/p5/frameRate">frameRate()</a> function.</p>
+
+  <p>There can only be one <a href="#/p5/draw">draw()</a> function for each
+  sketch, and <a href="#/p5/draw">draw()</a> must
+
+  exist if you want the code to run continuously, or to process events such
+
+  as <a href="#/p5/mousePressed">mousePressed()</a>. Sometimes, you might have
+  an empty call to <a href="#/p5/draw">draw()</a> in
+
+  your program, as shown in the above example.</p>
+
+  <p>It is important to note that the drawing coordinate system will be reset
+
+  at the beginning of each <a href="#/p5/draw">draw()</a> call. If any
+  transformations are performed
+
+  within <a href="#/p5/draw">draw()</a> (ex: scale, rotate, translate), their
+  effects will be
+
+  undone at the beginning of <a href="#/p5/draw">draw()</a>, so transformations
+  will not accumulate
+
+  over time. On the other hand, styling applied (ex: fill, stroke, etc) will
+
+  remain in effect.</p>
+line: 113
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let yPos = 0;
+    function setup() {
+      // setup() runs once
+      frameRate(30);
+    }
+    function draw() {
+      // draw() loops forever, until stopped
+      background(204);
+      yPos = yPos - 1;
+      if (yPos < 0) {
+        yPos = height;
+      }
+      line(0, yPos, width, yPos);
+    }
+    </code></div>
+alt: nothing displayed
+chainable: false
+---
+
+
+# draw
diff --git a/src/content/reference/en/p5/drawingContext.mdx b/src/content/reference/en/p5/drawingContext.mdx
new file mode 100644
index 0000000000..9fa83bb63c
--- /dev/null
+++ b/src/content/reference/en/p5/drawingContext.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: drawingContext
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>The p5.js API provides a lot of functionality for creating graphics, but
+  there is
+
+  some native HTML5 Canvas functionality that is not exposed by p5. You can
+  still call
+
+  it directly using the variable <code>drawingContext</code>, as in the example
+  shown. This is
+
+  the equivalent of calling <code>canvas.getContext('2d');</code> or
+  <code>canvas.getContext('webgl');</code>.
+
+  See this
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">
+
+  reference for the native canvas API</a> for possible drawing functions you can
+  call.</p>
+line: 535
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      drawingContext.shadowOffsetX = 5;
+      drawingContext.shadowOffsetY = -5;
+      drawingContext.shadowBlur = 10;
+      drawingContext.shadowColor = 'black';
+      background(200);
+      ellipse(width / 2, height / 2, 50, 50);
+    }
+    </code>
+    </div>
+alt: white ellipse with shadow blur effect around edges
+chainable: false
+---
+
+
+# drawingContext
diff --git a/src/content/reference/en/p5/ellipse.mdx b/src/content/reference/en/p5/ellipse.mdx
new file mode 100644
index 0000000000..a88ad5a6a5
--- /dev/null
+++ b/src/content/reference/en/p5/ellipse.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ellipse
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws an ellipse (oval) to the canvas. An ellipse with equal width and
+  height
+
+  is a circle. By default, the first two parameters set the location of the
+
+  center of the ellipse. The third and fourth parameters set the shape's width
+
+  and height, respectively. The origin may be changed with the
+
+  <a href="#/p5/ellipseMode">ellipseMode()</a> function.</p>
+
+  <p>If no height is specified, the value of width is used for both the width
+  and
+
+  height. If a negative height or width is specified, the absolute value is
+
+  taken.</p>
+line: 231
+itemtype: method
+class: p5
+example:
+  - |
+
+    <div>
+    <code>
+    ellipse(56, 46, 55, 55);
+    describe('A white ellipse with black outline in middle of a gray canvas.');
+    </code>
+    </div>
+chainable: true
+---
+
+
+# ellipse
diff --git a/src/content/reference/en/p5/ellipseMode.mdx b/src/content/reference/en/p5/ellipseMode.mdx
new file mode 100644
index 0000000000..57f667fa6e
--- /dev/null
+++ b/src/content/reference/en/p5/ellipseMode.mdx
@@ -0,0 +1,107 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ellipseMode
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Modifies the location from which ellipses, circles, and arcs are drawn. By
+  default, the
+
+  first two parameters are the x- and y-coordinates of the shape's center. The
+  next
+
+  parameters are its width and height. This is equivalent to calling
+  <code>ellipseMode(CENTER)</code>.</p>
+
+  <p><code>ellipseMode(RADIUS)</code> also uses the first two parameters to set
+  the x- and y-coordinates
+
+  of the shape's center. The next parameters are half of the shapes's width and
+  height.
+
+  Calling <code>ellipse(0, 0, 10, 15)</code> draws a shape with a width of 20
+  and height of 30.</p>
+
+  <p><code>ellipseMode(CORNER)</code> uses the first two parameters as the
+  upper-left corner of the
+
+  shape. The next parameters are its width and height.</p>
+
+  <p><code>ellipseMode(CORNERS)</code> uses the first two parameters as the
+  location of one corner
+
+  of the ellipse's bounding box. The third and fourth parameters are the
+  location of the
+
+  opposite corner.</p>
+
+  <p>The argument passed to <code>ellipseMode()</code> must be written in ALL
+  CAPS because the constants
+
+  <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and
+  <code>CORNERS</code> are defined this way. JavaScript is a
+
+  case-sensitive language.</p>
+line: 12
+params:
+  - name: mode
+    description: |
+      <p>either CENTER, RADIUS, CORNER, or CORNERS</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    ellipseMode(RADIUS);
+
+    fill(255);
+
+    ellipse(50, 50, 30, 30);
+
+    ellipseMode(CENTER);
+
+    fill(100);
+
+    ellipse(50, 50, 30, 30);
+
+    describe('A white circle with a gray circle at its center. Both circles have
+    black outlines.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    ellipseMode(CORNER);
+
+    fill(255);
+
+    ellipse(25, 25, 50, 50);
+
+    ellipseMode(CORNERS);
+
+    fill(100);
+
+    ellipse(25, 25, 50, 50);
+
+    describe('A white circle with a gray circle at its top-left corner. Both
+    circles have black outlines.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# ellipseMode
diff --git a/src/content/reference/en/p5/ellipsoid.mdx b/src/content/reference/en/p5/ellipsoid.mdx
new file mode 100644
index 0000000000..187c3c5a8c
--- /dev/null
+++ b/src/content/reference/en/p5/ellipsoid.mdx
@@ -0,0 +1,120 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ellipsoid
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draw an ellipsoid with given radius</p>
+
+  <p>DetailX and detailY determine the number of subdivisions in the x-dimension
+  and
+
+  the y-dimension of a cone. More subdivisions make the ellipsoid appear to be
+  smoother.
+
+  Avoid detail number above 150, it may crash the browser.</p>
+line: 864
+params:
+  - name: radiusx
+    description: |
+      <p>x-radius of ellipsoid</p>
+    type: Number
+    optional: true
+  - name: radiusy
+    description: |
+      <p>y-radius of ellipsoid</p>
+    type: Number
+    optional: true
+  - name: radiusz
+    description: |
+      <p>z-radius of ellipsoid</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of segments,
+                                         the more segments the smoother geometry
+                                         default is 24. Avoid detail number above
+                                         150, it may crash the browser.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of segments,
+                                         the more segments the smoother geometry
+                                         default is 16. Avoid detail number above
+                                         150, it may crash the browser.</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // draw an ellipsoid
+    // with radius 30, 40 and 40.
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('a white 3d ellipsoid');
+    }
+
+    function draw() {
+      background(205, 105, 94);
+      ellipsoid(30, 40, 40);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailX works
+    let detailX;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailX = createSlider(2, 24, 12);
+      detailX.position(10, height + 5);
+      detailX.style('width', '80px');
+      describe(
+        'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX'
+      );
+    }
+
+    function draw() {
+      background(205, 105, 94);
+      rotateY(millis() / 1000);
+      ellipsoid(30, 40, 40, detailX.value(), 8);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailY works
+    let detailY;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailY = createSlider(2, 24, 6);
+      detailY.position(10, height + 5);
+      detailY.style('width', '80px');
+      describe(
+        'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY'
+      );
+    }
+
+    function draw() {
+      background(205, 105, 9);
+      rotateY(millis() / 1000);
+      ellipsoid(30, 40, 40, 12, detailY.value());
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# ellipsoid
diff --git a/src/content/reference/en/p5/emissiveMaterial.mdx b/src/content/reference/en/p5/emissiveMaterial.mdx
new file mode 100644
index 0000000000..6db16410f1
--- /dev/null
+++ b/src/content/reference/en/p5/emissiveMaterial.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: emissiveMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: |
+  <p>Sets the emissive color of the material.</p>
+  <p>An emissive material will display the emissive color at
+  full strength regardless of lighting. This can give the
+  appearance that the object is glowing.</p>
+  <p>Note, "emissive" is a misnomer in the sense that the material
+  does not actually emit light that will affect surrounding objects.</p>
+  <p>You can view more materials in this
+  <a href="https://p5js.org/examples/3d-materials.html">example</a>.</p>
+line: 982
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('sphere with green emissive material');
+    }
+    function draw() {
+      background(0);
+      noStroke();
+      ambientLight(0);
+      emissiveMaterial(130, 230, 0);
+      sphere(40);
+    }
+    </code>
+    </div>
+alt: sphere with green emissive material
+chainable: true
+---
+
+
+# emissiveMaterial
diff --git a/src/content/reference/en/p5/endClip.mdx b/src/content/reference/en/p5/endClip.mdx
new file mode 100644
index 0000000000..b94835588b
--- /dev/null
+++ b/src/content/reference/en/p5/endClip.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: endClip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Finishes defining a shape that will mask subsequent things drawn to the
+  canvas.
+
+  Only opaque regions of the mask shape will allow content to be drawn.
+
+  Any shapes drawn between <a href="#/p5/beginClip">beginClip()</a> and this
+
+  will contribute to the mask shape.</p>
+line: 108
+itemtype: method
+class: p5
+chainable: false
+---
+
+
+# endClip
diff --git a/src/content/reference/en/p5/endContour.mdx b/src/content/reference/en/p5/endContour.mdx
new file mode 100644
index 0000000000..458b178247
--- /dev/null
+++ b/src/content/reference/en/p5/endContour.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: endContour
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Use the <a href="#/p5/beginContour">beginContour()</a> and <a
+  href="#/p5/endContour">endContour()</a> functions to create negative
+
+  shapes within shapes such as the center of the letter 'O'. <a
+  href="#/p5/beginContour">beginContour()</a>
+
+  begins recording vertices for the shape and <a
+  href="#/p5/endContour">endContour()</a> stops recording.
+
+  The vertices that define a negative shape must "wind" in the opposite
+
+  direction from the exterior shape. First draw vertices for the exterior
+
+  clockwise order, then for internal shapes, draw vertices
+
+  shape in counter-clockwise.</p>
+
+  <p>These functions can only be used within a <a
+  href="#/p5/beginShape">beginShape()</a>/<a href="#/p5/endShape">endShape()</a>
+  pair and
+
+  transformations such as <a href="#/p5/translate">translate()</a>, <a
+  href="#/p5/rotate">rotate()</a>, and <a href="#/p5/scale">scale()</a> do not
+  work
+
+  within a <a href="#/p5/beginContour">beginContour()</a>/<a
+  href="#/p5/endContour">endContour()</a> pair. It is also not possible to use
+
+  other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or <a
+  href="#/p5/rect">rect()</a> within.</p>
+line: 528
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    translate(50, 50);
+    stroke(255, 0, 0);
+    beginShape();
+    // Exterior part of shape, clockwise winding
+    vertex(-40, -40);
+    vertex(40, -40);
+    vertex(40, 40);
+    vertex(-40, 40);
+    // Interior part of shape, counter-clockwise winding
+    beginContour();
+    vertex(-20, -20);
+    vertex(-20, 20);
+    vertex(20, 20);
+    vertex(20, -20);
+    endContour();
+    endShape(CLOSE);
+    </code>
+    </div>
+alt: white rect and smaller grey rect with red outlines in center of canvas.
+chainable: true
+---
+
+
+# endContour
diff --git a/src/content/reference/en/p5/endGeometry.mdx b/src/content/reference/en/p5/endGeometry.mdx
new file mode 100644
index 0000000000..f3656115fa
--- /dev/null
+++ b/src/content/reference/en/p5/endGeometry.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: endGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: |
+  <p>Finishes creating a new <a href="#/p5.Geometry">p5.Geometry</a> that was
+  started using <a href="#/p5/beginGeometry">beginGeometry()</a>. One can also
+  use <a href="#/p5/buildGeometry">buildGeometry()</a> to pass a function that
+  draws shapes.</p>
+line: 89
+itemtype: method
+class: p5
+return:
+  description: The model that was built.
+  type: p5.Geometry
+chainable: false
+---
+
+
+# endGeometry
diff --git a/src/content/reference/en/p5/endShape.mdx b/src/content/reference/en/p5/endShape.mdx
new file mode 100644
index 0000000000..188a34b06e
--- /dev/null
+++ b/src/content/reference/en/p5/endShape.mdx
@@ -0,0 +1,160 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: endShape
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>The <a href="#/p5/endShape">endShape()</a> function is the companion to <a
+  href="#/p5/beginShape">beginShape()</a> and may only be
+
+  called after <a href="#/p5/beginShape">beginShape()</a>. When <a
+  href="#/p5/endshape">endShape()</a> is called, all of the image
+
+  data defined since the previous call to <a
+  href="#/p5/beginShape">beginShape()</a> is written into the image
+
+  buffer. The constant CLOSE is the value for the <code>mode</code> parameter to
+  close
+
+  the shape (to connect the beginning and the end).
+
+  When using instancing with <a href="#/p5/endShape">endShape()</a> the
+  instancing will not apply to the strokes.
+
+  When the count parameter is used with a value greater than 1, it enables
+  instancing for shapes built when in WEBGL mode. Instancing
+
+  is a feature that allows the GPU to efficiently draw multiples of the same
+  shape. It's often used for particle effects or other
+
+  times when you need a lot of repetition. In order to take advantage of
+  instancing, you will also need to write your own custom
+
+  shader using the gl_InstanceID keyword. You can read more about instancing
+
+  <a
+  href="https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html">here</a>
+  or by working from the example on this
+
+  page.</p>
+line: 591
+params:
+  - name: mode
+    description: |
+      <p>use CLOSE to close the shape</p>
+    type: Constant
+    optional: true
+  - name: count
+    description: >
+      <p>number of times you want to draw/instance the shape (for WebGL
+      mode).</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noFill();
+
+    beginShape();
+    vertex(20, 20);
+    vertex(45, 20);
+    vertex(45, 80);
+    endShape(CLOSE);
+
+    beginShape();
+    vertex(50, 20);
+    vertex(75, 20);
+    vertex(75, 80);
+    endShape();
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let fx;
+    let vs = `#version 300 es
+
+    precision mediump float;
+
+    in vec3 aPosition;
+    flat out int instanceID;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+
+      // copy the instance ID to the fragment shader
+      instanceID = gl_InstanceID;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+
+      // gl_InstanceID represents a numeric value for each instance
+      // using gl_InstanceID allows us to move each instance separately
+      // here we move each instance horizontally by id * 23
+      float xOffset = float(gl_InstanceID) * 23.0;
+
+      // apply the offset to the final position
+      gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
+        vec4(xOffset, 0.0, 0.0, 0.0));
+    }
+    `;
+    let fs = `#version 300 es
+
+    precision mediump float;
+
+    out vec4 outColor;
+    flat in int instanceID;
+    uniform float numInstances;
+
+    void main() {
+      vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
+      vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
+
+      // Normalize the instance id
+      float normId = float(instanceID) / numInstances;
+
+      // Mix between two colors using the normalized instance id
+      outColor = mix(red, blue, normId);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      fx = createShader(vs, fs);
+    }
+
+    function draw() {
+      background(220);
+
+      // strokes aren't instanced, and are rather used for debug purposes
+      shader(fx);
+      fx.setUniform('numInstances', 4);
+
+      // this doesn't have to do with instancing, this is just for centering the squares
+      translate(25, -10);
+
+      // here we draw the squares we want to instance
+      beginShape();
+      vertex(0, 0);
+      vertex(0, 20);
+      vertex(20, 20);
+      vertex(20, 0);
+      vertex(0, 0);
+      endShape(CLOSE, 4);
+
+      resetShader();
+    }
+    </code>
+    </div>
+alt: Triangle line shape with smallest interior angle on bottom and upside-down L.
+chainable: true
+---
+
+
+# endShape
diff --git a/src/content/reference/en/p5/erase.mdx b/src/content/reference/en/p5/erase.mdx
new file mode 100644
index 0000000000..b9f13eecbe
--- /dev/null
+++ b/src/content/reference/en/p5/erase.mdx
@@ -0,0 +1,152 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: erase
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>All drawing that follows <a href="#/p5/erase">erase()</a> will subtract
+
+  from the canvas, revealing the web page underneath. The erased areas will
+
+  become transparent, allowing the content behind the canvas to show through.
+
+  The <a href="#/p5/fill">fill()</a>, <a href="#/p5/stroke">stroke()</a>, and
+
+  <a href="#/p5/blendMode">blendMode()</a> have no effect once
+  <code>erase()</code> is
+
+  called.</p>
+
+  <p>The <code>erase()</code> function has two optional parameters. The first
+  parameter
+
+  sets the strength of erasing by the shape's interior. A value of 0 means
+
+  that no erasing will occur. A value of 255 means that the shape's interior
+
+  will fully erase the content underneath. The default value is 255
+
+  (full strength).</p>
+
+  <p>The second parameter sets the strength of erasing by the shape's edge. A
+
+  value of 0 means that no erasing will occur. A value of 255 means that the
+
+  shape's edge will fully erase the content underneath. The default value is
+
+  255 (full strength).</p>
+
+  <p>To cancel the erasing effect, use the <a href="#/p5/noErase">noErase()</a>
+
+  function.</p>
+
+  <p><code>erase()</code> has no effect on drawing done with the
+
+  <a href="#/p5/image">image()</a> and
+
+  <a href="#/p5/background">background()</a> functions.</p>
+line: 1005
+params:
+  - name: strengthFill
+    description: |
+      <p>a number (0-255) for the strength of erasing under a shape's interior.
+                                             Defaults to 255, which is full strength.</p>
+    type: Number
+    optional: true
+  - name: strengthStroke
+    description: |
+      <p>a number (0-255) for the strength of erasing under a shape's edge.
+                                             Defaults to 255, which is full strength.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    background(100, 100, 250);
+
+    fill(250, 100, 100);
+
+    square(20, 20, 60);
+
+    erase();
+
+    circle(25, 30, 30);
+
+    noErase();
+
+    describe('A purple canvas with a pink square in the middle. A circle is
+    erased from the top-left, leaving a white hole.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let p = createP('I am a DOM element');
+
+    p.style('font-size', '12px');
+
+    p.style('width', '65px');
+
+    p.style('text-align', 'center');
+
+    p.position(18, 26);
+
+
+    background(100, 170, 210);
+
+    erase(200, 100);
+
+    circle(50, 50, 77);
+
+    noErase();
+
+    describe('A blue canvas with a circular hole in the center that reveals the
+    message "I am a DOM element".');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    background(150, 250, 150);
+
+    fill(100, 100, 250);
+
+    square(20, 20, 60);
+
+    strokeWeight(5);
+
+    erase(150, 255);
+
+    triangle(50, 10, 70, 50, 90, 10);
+
+    noErase();
+
+    describe('A mint green canvas with a purple square in the center. A triangle
+    in the top-right corner partially erases its interior and a fully erases its
+    outline.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# erase
diff --git a/src/content/reference/en/p5/exitPointerLock.mdx b/src/content/reference/en/p5/exitPointerLock.mdx
new file mode 100644
index 0000000000..40c0b1ab5a
--- /dev/null
+++ b/src/content/reference/en/p5/exitPointerLock.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: exitPointerLock
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The function <a href="#/p5/exitPointerLock">exitPointerLock()</a>
+
+  exits a previously triggered <a href="#/p5/requestPointerLock">pointer
+  Lock</a>
+
+  for example to make ui elements usable etc</p>
+line: 1005
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    //click the canvas to lock the pointer
+    //click again to exit (otherwise escape)
+    let locked = false;
+    function draw() {
+      background(237, 34, 93);
+      describe('cursor gets locked / unlocked on mouse-click');
+    }
+    function mouseClicked() {
+      if (!locked) {
+        locked = true;
+        requestPointerLock();
+      } else {
+        exitPointerLock();
+        locked = false;
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# exitPointerLock
diff --git a/src/content/reference/en/p5/exp.mdx b/src/content/reference/en/p5/exp.mdx
new file mode 100644
index 0000000000..eaaf021ba3
--- /dev/null
+++ b/src/content/reference/en/p5/exp.mdx
@@ -0,0 +1,45 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: exp
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Returns Euler's number e (2.71828...) raised to the power of the
+  <code>n</code>
+
+  parameter.</p>
+line: 184
+params:
+  - name: 'n'
+    description: |
+      <p>exponent to raise.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -height);
+
+      let x = frameCount;
+      let y = 0.005 * exp(x * 0.1);
+      point(x, y);
+
+      describe('A series of black dots that grow exponentially from left to right.');
+    }
+    </code>
+    </div>
+return:
+  description: e^n
+  type: Number
+chainable: false
+---
+
+
+# exp
diff --git a/src/content/reference/en/p5/fill.mdx b/src/content/reference/en/p5/fill.mdx
new file mode 100644
index 0000000000..89caedeb26
--- /dev/null
+++ b/src/content/reference/en/p5/fill.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: FILL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 665
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# FILL
diff --git a/src/content/reference/en/p5/filter.mdx b/src/content/reference/en/p5/filter.mdx
new file mode 100644
index 0000000000..741ed31f03
--- /dev/null
+++ b/src/content/reference/en/p5/filter.mdx
@@ -0,0 +1,236 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: filter
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Applies an image filter to the canvas. The preset options are:</p>
+
+  <p><code>INVERT</code>
+
+  Inverts the colors in the image. No parameter is used.</p>
+
+  <p><code>GRAY</code>
+
+  Converts the image to grayscale. No parameter is used.</p>
+
+  <p><code>THRESHOLD</code>
+
+  Converts the image to black and white. Pixels with a grayscale value
+
+  above a given threshold are converted to white. The rest are converted to
+
+  black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+
+  value is specified, 0.5 is used.</p>
+
+  <p><code>OPAQUE</code>
+
+  Sets the alpha channel to entirely opaque. No parameter is used.</p>
+
+  <p><code>POSTERIZE</code>
+
+  Limits the number of colors in the image. Each color channel is limited to
+
+  the number of colors specified. Values between 2 and 255 are valid, but
+
+  results are most noticeable with lower values. The default value is 4.</p>
+
+  <p><code>BLUR</code>
+
+  Blurs the image. The level of blurring is specified by a blur radius. Larger
+
+  values increase the blur. The default value is 4. A gaussian blur is used
+
+  in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>
+
+  <p><code>ERODE</code>
+
+  Reduces the light areas. No parameter is used.</p>
+
+  <p><code>DILATE</code>
+
+  Increases the light areas. No parameter is used.</p>
+
+  <p><code>filter()</code> uses WebGL in the background by default because it's
+  faster.
+
+  This can be disabled in <code>P2D</code> mode by adding a <code>false</code>
+  argument, as in
+
+  <code>filter(BLUR, false)</code>. This may be useful to keep computation off
+  the GPU
+
+  or to work around a lack of WebGL support.</p>
+
+  <p>In <code>WEBGL</code> mode, <code>filter()</code> can also use custom
+  shaders. See
+
+  <a href="#/p5/createFilterShader">createFilterShader()</a> for more
+
+  information.</p>
+line: 343
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(INVERT);
+
+      describe('A blue brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(GRAY);
+
+      describe('A brick wall drawn in grayscale.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(THRESHOLD);
+
+      describe('A brick wall drawn in black and white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(OPAQUE);
+
+      describe('A red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(POSTERIZE, 3);
+
+      describe('An image of a red brick wall drawn with limited color palette.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(BLUR, 3);
+
+      describe('A blurry image of a red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(DILATE);
+
+      describe('A red brick wall with bright lines between each brick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      filter(ERODE);
+
+      describe('A red brick wall with faint lines between each brick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      // Don't use WebGL.
+      filter(BLUR, 3, false);
+
+      describe('A blurry image of a red brick wall.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# filter
diff --git a/src/content/reference/en/p5/floor.mdx b/src/content/reference/en/p5/floor.mdx
new file mode 100644
index 0000000000..e9dae098e1
--- /dev/null
+++ b/src/content/reference/en/p5/floor.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: floor
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the closest integer value that is less than or equal to the
+  value of the <code>n</code> parameter.</p>
+line: 210
+params:
+  - name: 'n'
+    description: |
+      <p>number to round down.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Set the range for RGB values from 0 to 1.
+
+    colorMode(RGB, 1);
+
+    noStroke();
+
+
+    let r = 0.8;
+
+    fill(r, 0, 0);
+
+    rect(0, 0, width / 2, height);
+
+
+    // Round r down to 0.
+
+    r = floor(r);
+
+    fill(r, 0, 0);
+
+    rect(width / 2, 0, width / 2, height);
+
+
+    describe('Two rectangles. The one on the left is bright red and the one on
+    the right is black.');
+
+    </code>
+
+    </div>
+return:
+  description: rounded down number.
+  type: Integer
+chainable: false
+---
+
+
+# floor
diff --git a/src/content/reference/en/p5/focused.mdx b/src/content/reference/en/p5/focused.mdx
new file mode 100644
index 0000000000..2e1257b45c
--- /dev/null
+++ b/src/content/reference/en/p5/focused.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: focused
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Tracks whether the browser window is focused and can receive user input.
+
+  <code>focused</code> is <code>true</code> if the window if focused and
+  <code>false</code> if not.</p>
+line: 164
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Open this example in two separate browser
+    // windows placed side-by-side to demonstrate.
+
+    function draw() {
+      // Change the background color
+      // when the browser window
+      // goes in/out of focus.
+      if (focused === true) {
+        background(0, 255, 0);
+      } else {
+        background(255, 0, 0);
+      }
+
+      describe('A square changes color from green to red when the browser window is out of focus.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# focused
diff --git a/src/content/reference/en/p5/for.mdx b/src/content/reference/en/p5/for.mdx
new file mode 100644
index 0000000000..0626ed803a
--- /dev/null
+++ b/src/content/reference/en/p5/for.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: for
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p><a href="#/p5/for">for</a> creates a loop that is useful for executing one
+
+  section of code multiple times.</p>
+
+  <p>A 'for loop' consists of three different expressions inside of a
+  parenthesis,
+
+  all of which are optional.These expressions are used to control the number of
+
+  times the loop is run.The first expression is a statement that is used to set
+
+  the initial state for the loop.The second expression is a condition that you
+
+  would like to check before each loop. If this expression returns false then
+
+  the loop will exit.The third expression is executed at the end of each loop.
+
+  These expression are separated by ; (semi-colon).In case of an empty
+  expression,
+
+  only a semi-colon is written.</p>
+
+  <p>The code inside of the loop body (in between the curly braces) is executed
+  between the evaluation of the second
+
+  and third expression.</p>
+
+  <p>As with any loop, it is important to ensure that the loop can 'exit', or
+  that
+
+  the test condition will eventually evaluate to false. The test condition with
+  a <a href="#/p5/for">for</a> loop
+
+  is the second expression detailed above. Ensuring that this expression can
+  eventually
+
+  become false ensures that your loop doesn't attempt to run an infinite amount
+  of times,
+
+  which can crash your browser.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">the
+  MDN entry</a>:
+
+  Creates a loop that executes a specified statement until the test condition
+  evaluates to false.
+
+  The condition is evaluated after executing the statement, resulting in the
+  specified statement executing at least once.</p>
+line: 408
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    for (let i = 0; i < 9; i++) {
+      console.log(i);
+    }
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# for
diff --git a/src/content/reference/en/p5/fract.mdx b/src/content/reference/en/p5/fract.mdx
new file mode 100644
index 0000000000..e9597bf18a
--- /dev/null
+++ b/src/content/reference/en/p5/fract.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: fract
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the fractional part of a number. For example,
+  <code>fract(12.34)</code> returns 0.34.</p>
+line: 730
+params:
+  - name: 'n'
+    description: |
+      <p>number whose fractional part will be found.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let n = 56.78;
+    text(n, 20, 33);
+    let f = fract(n);
+    text(f, 20, 66);
+
+    describe('The number 56.78 written above the number 0.78.');
+    </code>
+    </div>
+return:
+  description: fractional part of n.
+  type: Number
+chainable: false
+---
+
+
+# fract
diff --git a/src/content/reference/en/p5/frameCount.mdx b/src/content/reference/en/p5/frameCount.mdx
new file mode 100644
index 0000000000..a9090e9db7
--- /dev/null
+++ b/src/content/reference/en/p5/frameCount.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: frameCount
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Tracks the number of frames drawn since the sketch started.</p>
+
+  <p><code>frameCount</code>'s value is 0 inside <a
+  href="#/p5/setup">setup()</a>. It
+
+  increments by 1 each time the code in <a href="#/p5/draw">draw()</a>
+
+  finishes executing.</p>
+line: 69
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the value of
+      // frameCount.
+      textSize(30);
+      textAlign(CENTER, CENTER);
+      text(frameCount, 50, 50);
+
+      describe('The number 0 written in black in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Set the frameRate to 30.
+      frameRate(30);
+
+      textSize(30);
+      textAlign(CENTER, CENTER);
+    }
+
+    function draw() {
+      background(200);
+
+      // Display the value of
+      // frameCount.
+      text(frameCount, 50, 50);
+
+      describe('A number written in black in the middle of a gray square. Its value increases rapidly.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# frameCount
diff --git a/src/content/reference/en/p5/frameRate.mdx b/src/content/reference/en/p5/frameRate.mdx
new file mode 100644
index 0000000000..e95233621f
--- /dev/null
+++ b/src/content/reference/en/p5/frameRate.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: frameRate
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Sets the number of frames to draw per second.</p>
+
+  <p>Calling <code>frameRate()</code> with one numeric argument, as in
+  <code>frameRate(30)</code>,
+
+  attempts to draw 30 frames per second (FPS). The target frame rate may not
+
+  be achieved depending on the sketch's processing needs. Most computers
+
+  default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
+
+  fast enough for smooth animations.</p>
+
+  <p>Calling <code>frameRate()</code> without an argument returns the current
+  frame rate.
+
+  The value returned is an approximation.</p>
+line: 302
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // Set the x variable based
+      // on the current frameCount.
+      let x = frameCount % 100;
+
+      // If the mouse is pressed,
+      // decrease the frame rate.
+      if (mouseIsPressed === true) {
+        frameRate(10);
+      } else {
+        frameRate(60);
+      }
+
+      // Use x to set the circle's
+      // position.
+      circle(x, 50, 20);
+
+      describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // If the mouse is pressed, do lots
+      // of math to slow down drawing.
+      if (mouseIsPressed === true) {
+        for (let i = 0; i < 1000000; i += 1) {
+          random();
+        }
+      }
+
+      // Get the current frame rate
+      // and display it.
+      let fps = frameRate();
+      text(fps, 50, 50);
+
+      describe('A number written in black written on a gray background. The number decreases when the mouse is pressed.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# frameRate
diff --git a/src/content/reference/en/p5/freeGeometry.mdx b/src/content/reference/en/p5/freeGeometry.mdx
new file mode 100644
index 0000000000..1647a1f935
--- /dev/null
+++ b/src/content/reference/en/p5/freeGeometry.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: freeGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: |
+  <p>Clears the resources of a model to free up browser memory. A model whose
+  resources have been cleared can still be drawn, but the first time it is
+  drawn again, it might take longer.</p>
+  <p>This method works on models generated with
+  <a href="#/p5/buildGeometry">buildGeometry()</a> as well as those loaded
+  from <a href="#/p5/loadModel">loadModel()</a>.</p>
+line: 167
+params:
+  - name: geometry
+    description: |
+      <p>The geometry whose resources should be freed</p>
+    type: p5.Geometry
+itemtype: method
+class: p5
+chainable: false
+---
+
+
+# freeGeometry
diff --git a/src/content/reference/en/p5/freqToMidi.mdx b/src/content/reference/en/p5/freqToMidi.mdx
new file mode 100644
index 0000000000..1d74f9d7e2
--- /dev/null
+++ b/src/content/reference/en/p5/freqToMidi.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: freqToMidi
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the closest MIDI note value for
+  a given frequency.</p>
+line: 825
+params:
+  - name: frequency
+    description: |
+      <p>A freqeuncy, for example, the "A"
+                                 above Middle C is 440Hz</p>
+    type: Number
+itemtype: method
+class: p5
+return:
+  description: MIDI note value
+  type: Number
+chainable: false
+---
+
+
+# freqToMidi
diff --git a/src/content/reference/en/p5/frustum.mdx b/src/content/reference/en/p5/frustum.mdx
new file mode 100644
index 0000000000..74d8825bae
--- /dev/null
+++ b/src/content/reference/en/p5/frustum.mdx
@@ -0,0 +1,95 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: frustum
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Sets the frustum of the current camera as defined by
+  the parameters.</p>
+  <p>A frustum is a geometric form: a pyramid with its top
+  cut off. With the viewer's eye at the imaginary top of
+  the pyramid, the six planes of the frustum act as clipping
+  planes when rendering a 3D view. Thus, any form inside the
+  clipping planes is visible; anything outside
+  those planes is not visible.</p>
+  <p>Setting the frustum changes the perspective of the scene being rendered.
+  This can be achieved more simply in many cases by using
+  <a href="https://p5js.org/reference/#/p5/perspective">perspective()</a>.</p>
+  <p>If no parameters are given, the following default is used:
+  frustum(-width/20, width/20, height/20, -height/20, eyeZ/10, eyeZ*10),
+  where eyeZ is equal to 800.</p>
+line: 259
+params:
+  - name: left
+    description: |
+      <p>camera frustum left plane</p>
+    type: Number
+    optional: true
+  - name: right
+    description: |
+      <p>camera frustum right plane</p>
+    type: Number
+    optional: true
+  - name: bottom
+    description: |
+      <p>camera frustum bottom plane</p>
+    type: Number
+    optional: true
+  - name: top
+    description: |
+      <p>camera frustum top plane</p>
+    type: Number
+    optional: true
+  - name: near
+    description: |
+      <p>camera frustum near plane</p>
+    type: Number
+    optional: true
+  - name: far
+    description: |
+      <p>camera frustum far plane</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      setAttributes('antialias', true);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
+      describe(
+        'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
+      );
+    }
+    function draw() {
+      background(200);
+      orbitControl();
+      normalMaterial();
+
+      rotateY(-0.2);
+      rotateX(-0.3);
+      push();
+      translate(-15, 0, sin(frameCount / 30) * 25);
+      box(30);
+      pop();
+      push();
+      translate(15, 0, sin(frameCount / 30 + PI) * 25);
+      box(30);
+      pop();
+    }
+    </code>
+    </div>
+alt: >-
+  two 3D boxes move back and forth along same plane, rotating as mouse is
+  dragged.
+chainable: true
+---
+
+
+# frustum
diff --git a/src/content/reference/en/p5/fullscreen.mdx b/src/content/reference/en/p5/fullscreen.mdx
new file mode 100644
index 0000000000..09aa784796
--- /dev/null
+++ b/src/content/reference/en/p5/fullscreen.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: fullscreen
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Toggles full-screen mode or returns the current mode.</p>
+
+  <p>Calling <code>fullscreen(true)</code> makes the sketch full-screen. Calling
+
+  <code>fullscreen(false)</code> makes the sketch its original size.</p>
+
+  <p>Calling <code>fullscreen()</code> without an argument returns
+  <code>true</code> if the sketch
+
+  is in full-screen mode and <code>false</code> if not.</p>
+
+  <p>Note: Due to browser restrictions, <code>fullscreen()</code> can only be
+  called with
+
+  user input such as a mouse press.</p>
+line: 888
+params:
+  - name: val
+    description: |
+      <p>whether the sketch should be in fullscreen mode.</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      describe('A gray canvas that switches between default and full-screen display when clicked.');
+    }
+
+    // If the mouse is pressed,
+    // toggle full-screen mode.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        let fs = fullscreen();
+        fullscreen(!fs);
+      }
+    }
+    </code>
+    </div>
+return:
+  description: current fullscreen state.
+  type: Boolean
+chainable: false
+---
+
+
+# fullscreen
diff --git a/src/content/reference/en/p5/function.mdx b/src/content/reference/en/p5/function.mdx
new file mode 100644
index 0000000000..90576a26d2
--- /dev/null
+++ b/src/content/reference/en/p5/function.mdx
@@ -0,0 +1,55 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: function
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Creates and names a <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">function</a>.
+
+  A <a href="#/p5/function">function</a> is a set of statements that perform a
+  task.</p>
+
+  <p>Optionally, functions can have parameters. <a
+  href="https://developer.mozilla.org/en-US/docs/Glossary/Parameter">Parameters</a>
+
+  are variables that are scoped to the function, that can be assigned a value
+
+  when calling the function.Multiple parameters can be given by seperating them
+
+  with commmas.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">the
+  MDN entry</a>:
+
+  Declares a function with the specified parameters.</p>
+line: 231
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let myName = 'Hridi';
+    function sayHello(name) {
+      console.log('Hello ' + name + '!');
+    }
+    sayHello(myName); // calling the function, prints "Hello Hridi!" to console.
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    let square = number => number * number;
+    console.log(square(5));
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# function
diff --git a/src/content/reference/en/p5/get.mdx b/src/content/reference/en/p5/get.mdx
new file mode 100644
index 0000000000..29b949e0b9
--- /dev/null
+++ b/src/content/reference/en/p5/get.mdx
@@ -0,0 +1,108 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: get
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Gets a pixel or a region of pixels from the canvas.</p>
+
+  <p><code>get()</code> is easy to use but it's not as fast as
+
+  <a href="#/p5/pixels">pixels</a>. Use <a href="#/p5/pixels">pixels</a>
+
+  to read many pixel values.</p>
+
+  <p>The version of <code>get()</code> with no parameters returns the entire
+  canvas.</p>
+
+  <p>The version of <code>get()</code> with two parameters interprets them as
+
+  coordinates. It returns an array with the <code>[R, G, B, A]</code> values of
+  the
+
+  pixel at the given point.</p>
+
+  <p>The version of <code>get()</code> with four parameters interprets them as
+  coordinates
+
+  and dimensions. It returns a subsection of the canvas as a
+
+  <a href="#/p5.Image">p5.Image</a> object. The first two parameters are the
+
+  coordinates for the upper-left corner of the subsection. The last two
+
+  parameters are the width and height of the subsection.</p>
+
+  <p>Use <a href="#/p5.Image/get">p5.Image.get()</a> to work directly with
+
+  <a href="#/p5.Image">p5.Image</a> objects.</p>
+line: 665
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let c = get();
+      image(c, width / 2, 0);
+
+      describe('Two identical mountain landscapes shown side-by-side.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let c = get(50, 90);
+      fill(c);
+      noStroke();
+      square(25, 25, 50);
+
+      describe('A mountain landscape with an olive green square in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      let c = get(0, 0, width / 2, height / 2);
+      image(c, width / 2, height / 2);
+
+      describe('A mountain landscape drawn on top of another mountain landscape.');
+    }
+    </code>
+    </div>
+return:
+  description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5/getAudioContext.mdx b/src/content/reference/en/p5/getAudioContext.mdx
new file mode 100644
index 0000000000..386d5038e5
--- /dev/null
+++ b/src/content/reference/en/p5/getAudioContext.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getAudioContext
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>Returns the Audio Context for this sketch. Useful for users
+  who would like to dig deeper into the <a target='_blank' href=
+  'http://webaudio.github.io/web-audio-api/'>Web Audio API
+  </a>.</p>
+
+  <p>Some browsers require users to startAudioContext
+  with a user gesture, such as touchStarted in the example below.</p>
+line: 159
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+     function draw() {
+       background(255);
+       textAlign(CENTER);
+
+       if (getAudioContext().state !== 'running') {
+         text('click to start audio', width/2, height/2);
+       } else {
+         text('audio is enabled', width/2, height/2);
+       }
+     }
+
+     function touchStarted() {
+       if (getAudioContext().state !== 'running') {
+         getAudioContext().resume();
+       }
+       var synth = new p5.MonoSynth();
+       synth.play('A4', 0.5, 0, 0.2);
+     }
+
+    </div></code>
+return:
+  description: AudioContext for this sketch
+  type: Object
+chainable: false
+---
+
+
+# getAudioContext
diff --git a/src/content/reference/en/p5/getItem.mdx b/src/content/reference/en/p5/getItem.mdx
new file mode 100644
index 0000000000..2b094caead
--- /dev/null
+++ b/src/content/reference/en/p5/getItem.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: |
+  <p>Returns the value of an item that was stored in local storage
+   using storeItem()</p>
+line: 99
+params:
+  - name: key
+    description: |
+      <p>name that you wish to use to store in local storage</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div><code>
+     // Click the mouse to change
+     // the color of the background
+     // Once you have changed the color
+     // it will stay changed even when you
+     // reload the page.
+    let myColor;
+    function setup() {
+       createCanvas(100, 100);
+       myColor = getItem('myColor');
+     }
+    function draw() {
+       if (myColor !== null) {
+         background(myColor);
+       }
+       describe(`If you click, the canvas changes to a random color.·
+         If you reload the page, the canvas is still the color it was when the
+         page was previously loaded.`);
+     }
+    function mousePressed() {
+       myColor = color(random(255), random(255), random(255));
+       storeItem('myColor', myColor);
+     }
+     </code></div>
+return:
+  description: Value of stored item
+  type: Number|Object|String|Boolean|p5.Color|p5.Vector
+chainable: false
+---
+
+
+# getItem
diff --git a/src/content/reference/en/p5/getOutputVolume.mdx b/src/content/reference/en/p5/getOutputVolume.mdx
new file mode 100644
index 0000000000..b553e63a90
--- /dev/null
+++ b/src/content/reference/en/p5/getOutputVolume.mdx
@@ -0,0 +1,22 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getOutputVolume
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a number representing the output volume for sound
+  in this sketch.</p>
+line: 726
+itemtype: method
+class: p5
+return:
+  description: |-
+    Output volume for sound in this sketch.
+                     Should be between 0.0 (silence) and 1.0.
+  type: Number
+chainable: false
+---
+
+
+# getOutputVolume
diff --git a/src/content/reference/en/p5/getTargetFrameRate.mdx b/src/content/reference/en/p5/getTargetFrameRate.mdx
new file mode 100644
index 0000000000..9b9049356c
--- /dev/null
+++ b/src/content/reference/en/p5/getTargetFrameRate.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getTargetFrameRate
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Returns the target frame rate. The value is either the system frame rate or
+  the last value passed to <a href="#/p5/frameRate">frameRate()</a>.</p>
+line: 411
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // Set the frame rate to 20.
+      frameRate(20);
+
+      // Get the target frame rate and
+      // display it.
+      let fps = getTargetFrameRate();
+      text(fps, 43, 54);
+
+      describe('The number 20 written in black on a gray background.');
+    }
+    </code>
+    </div>
+return:
+  description: _targetFrameRate
+  type: Number
+chainable: false
+---
+
+
+# getTargetFrameRate
diff --git a/src/content/reference/en/p5/getURL.mdx b/src/content/reference/en/p5/getURL.mdx
new file mode 100644
index 0000000000..70aa91bf73
--- /dev/null
+++ b/src/content/reference/en/p5/getURL.mdx
@@ -0,0 +1,43 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getURL
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the sketch's current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL"
+  target="_blank">URL</a>
+
+  as a string.</p>
+line: 1081
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL
+      // and display it.
+      let url = getURL();
+      textWrap(CHAR);
+      text(url, 0, 40, 100);
+
+      describe('The URL "https://p5js.org/reference/#/p5/getURL" written in black on a gray background.');
+    }
+    </code>
+    </div>
+return:
+  description: url
+  type: String
+chainable: false
+---
+
+
+# getURL
diff --git a/src/content/reference/en/p5/getURLParams.mdx b/src/content/reference/en/p5/getURLParams.mdx
new file mode 100644
index 0000000000..82d8cc65c0
--- /dev/null
+++ b/src/content/reference/en/p5/getURLParams.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getURLParams
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters"
+  target="_blank">URL parameters</a>
+
+  in an Object.</p>
+
+  <p>For example, calling <code>getURLParams()</code> in a sketch hosted at the
+  URL
+
+  <code>http://p5js.org?year=2014&month=May&day=15</code> returns
+
+  <code>{ year: 2014, month: 'May', day: 15 }</code>.</p>
+line: 1140
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender notest'>
+    <code>
+    // Imagine this sketch is hosted at the following URL:
+    // https://p5js.org?year=2014&month=May&day=15
+
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL
+      // parameters and display
+      // them.
+      let params = getURLParams();
+      text(params.day, 10, 20);
+      text(params.month, 10, 40);
+      text(params.year, 10, 60);
+
+      describe('The text "15", "May", and "2014" written in black on separate lines.');
+    }
+    </code>
+    </div>
+alt: This example does not render anything.
+return:
+  description: URL params
+  type: Object
+chainable: false
+---
+
+
+# getURLParams
diff --git a/src/content/reference/en/p5/getURLPath.mdx b/src/content/reference/en/p5/getURLPath.mdx
new file mode 100644
index 0000000000..adc7f72a44
--- /dev/null
+++ b/src/content/reference/en/p5/getURLPath.mdx
@@ -0,0 +1,55 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: getURLPath
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource"
+  target="_blank">URL</a>
+
+  path as an array of strings.</p>
+
+  <p>For example, consider a sketch hosted at the URL
+
+  <code>https://example.com/sketchbook</code>. Calling <code>getURLPath()</code>
+  returns
+
+  <code>['sketchbook']</code>. For a sketch hosted at the URL
+
+  <code>https://example.com/sketchbook/monday</code>, <code>getURLPath()</code>
+  returns
+
+  <code>['sketchbook', 'monday']</code>.</p>
+line: 1107
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL path
+      // and display the first
+      // part.
+      let path = getURLPath();
+      text(path[0], 25, 54);
+
+      describe('The word "reference" written in black on a gray background.');
+    }
+    </code>
+    </div>
+return:
+  description: path components.
+  type: 'String[]'
+chainable: false
+---
+
+
+# getURLPath
diff --git a/src/content/reference/en/p5/green.mdx b/src/content/reference/en/p5/green.mdx
new file mode 100644
index 0000000000..68f5f9e27a
--- /dev/null
+++ b/src/content/reference/en/p5/green.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: green
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the green value from a <a href="#/p5.Color">p5.Color</a> object,
+  array of color components, or CSS color string.</p>
+line: 303
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    const c = color(20, 75, 200);
+
+    fill(c);
+
+    rect(15, 20, 35, 60);
+
+    // Sets 'greenValue' to 75.
+
+    const greenValue = green(c);
+
+    fill(0, greenValue, 0);
+
+    rect(50, 20, 35, 60);
+
+    describe('Two rectangles. The rectangle on the left is blue and the one on
+    the right is green.');
+
+    </code>
+
+    </div>
+return:
+  description: the green value.
+  type: Number
+chainable: false
+---
+
+
+# green
diff --git a/src/content/reference/en/p5/gridOutput.mdx b/src/content/reference/en/p5/gridOutput.mdx
new file mode 100644
index 0000000000..d054fcff31
--- /dev/null
+++ b/src/content/reference/en/p5/gridOutput.mdx
@@ -0,0 +1,162 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: gridOutput
+module: Environment
+submodule: Environment
+file: src/accessibility/outputs.js
+description: >
+  <p>Creates a screen reader-accessible description for shapes on the canvas.
+
+  <code>gridOutput()</code> adds a general description, table of shapes, and
+  list of
+
+  shapes to the web page.</p>
+
+  <p>The general description includes the canvas size, canvas color, and number
+  of
+
+  shapes. For example,
+
+  <code>gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1
+  square</code>.</p>
+
+  <p><code>gridOutput()</code> uses its table of shapes as a grid. Each shape in
+  the grid
+
+  is placed in a cell whose row and column correspond to the shape's location
+
+  on the canvas. The grid cells describe the color and type of shape at that
+
+  location. For example, <code>red circle</code>. These descriptions can be
+  selected
+
+  individually to get more details. This is different from
+
+  <a href="#/p5/textOutput">textOutput()</a>, which uses its table as a
+  list.</p>
+
+  <p>A list of shapes follows the table. The list describes the color, type,
+
+  location, and area of each shape. For example,
+
+  <code>red circle, location = middle, area = 3 %</code>.</p>
+
+  <p>The <code>display</code> parameter is optional. It determines how the
+  description is
+
+  displayed. If <code>LABEL</code> is passed, as in
+  <code>gridOutput(LABEL)</code>, the description
+
+  will be visible in a div element next to the canvas. Using <code>LABEL</code>
+  creates
+
+  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
+
+  development. If <code>FALLBACK</code> is passed, as in
+  <code>gridOutput(FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a href="/learn/labeling-canvases.html">How to label your p5.js code</a> to
+
+  learn more about making sketches accessible.</p>
+line: 145
+params:
+  - name: display
+    description: |
+      <p>either FALLBACK or LABEL.</p>
+    type: Constant
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Add the grid description.
+      gridOutput();
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Add the grid description and
+      // display it for debugging.
+      gridOutput(LABEL);
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      // Add the grid description.
+      gridOutput();
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      // Add the grid description and
+      // display it for debugging.
+      gridOutput(LABEL);
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# gridOutput
diff --git a/src/content/reference/en/p5/height.mdx b/src/content/reference/en/p5/height.mdx
new file mode 100644
index 0000000000..f81cee2aa1
--- /dev/null
+++ b/src/content/reference/en/p5/height.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: height
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A numeric variable that stores the height of the drawing canvas. Its
+
+  default value is 100.</p>
+
+  <p>Calling <a href="#/p5/createCanvas">createCanvas()</a> or
+
+  <a href="#/p5/resizeCanvas">resizeCanvas()</a> changes the value of
+
+  <code>height</code>. Calling <a href="#/p5/noCanvas">noCanvas()</a> sets its
+  value to
+
+  0.</p>
+line: 819
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 54);
+
+      describe('The number 100 written in black on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 50);
+
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 27);
+
+      describe('The number 50 written in black on a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 54);
+
+      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+    }
+
+    // If the mouse is pressed, reisze
+    // the canvas and display its new
+    // height.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        resizeCanvas(100, 50);
+        background(200);
+        text(height, 42, 27);
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# height
diff --git a/src/content/reference/en/p5/hex.mdx b/src/content/reference/en/p5/hex.mdx
new file mode 100644
index 0000000000..ae437bd125
--- /dev/null
+++ b/src/content/reference/en/p5/hex.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hex
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a number to a string in its equivalent hexadecimal notation. If a
+  second parameter is passed, it is used to set the number of characters to
+  generate in the hexadecimal notation. When an array is passed in, an
+  array of strings in hexadecimal notation of the same length is returned.</p>
+line: 243
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(hex(255)); // "000000FF"
+    print(hex(255, 6)); // "0000FF"
+    print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
+    print(Infinity); // "FFFFFFFF"
+    print(-Infinity); // "00000000"
+    </code></div>
+return:
+  description: hexadecimal string representation of value
+  type: String
+chainable: false
+---
+
+
+# hex
diff --git a/src/content/reference/en/p5/hour.mdx b/src/content/reference/en/p5/hour.mdx
new file mode 100644
index 0000000000..c7d11bc098
--- /dev/null
+++ b/src/content/reference/en/p5/hour.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hour
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>p5.js communicates with the clock on your computer. The <a
+  href="#/p5/hour">hour()</a> function
+
+  returns the current hour as a value from 0 - 23.</p>
+line: 29
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let h = hour();
+    text('Current hour:\n' + h, 5, 50);
+    describe('Current hour is displayed');
+    </code>
+    </div>
+return:
+  description: the current hour
+  type: Integer
+chainable: false
+---
+
+
+# hour
diff --git a/src/content/reference/en/p5/httpDo.mdx b/src/content/reference/en/p5/httpDo.mdx
new file mode 100644
index 0000000000..03d4a61fd5
--- /dev/null
+++ b/src/content/reference/en/p5/httpDo.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: httpDo
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text.<br><br>
+
+  For more advanced use, you may also pass in the path as the first argument
+
+  and a object as the second argument, the signature follows the one specified
+
+  in the Fetch API specification.
+
+  This method is suitable for fetching files up to size of 64MB when "GET" is
+  used.</p>
+line: 907
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Examples use USGS Earthquake API:
+    // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+
+    // displays an animation of all USGS earthquakes
+    let earthquakes;
+    let eqFeatureIndex = 0;
+
+    function preload() {
+      let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+      httpDo(
+        url,
+        {
+          method: 'GET',
+          // Other Request options, like special headers for apis
+          headers: { authorization: 'Bearer secretKey' }
+        },
+        function(res) {
+          earthquakes = res;
+        }
+      );
+    }
+
+    function draw() {
+      // wait until the data is loaded
+      if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+        return;
+      }
+      clear();
+
+      let feature = earthquakes.features[eqFeatureIndex];
+      let mag = feature.properties.mag;
+      let rad = mag / 11 * ((width + height) / 2);
+      fill(255, 0, 0, 100);
+      ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+
+      if (eqFeatureIndex >= earthquakes.features.length) {
+        eqFeatureIndex = 0;
+      } else {
+        eqFeatureIndex += 1;
+      }
+    }
+    </code>
+    </div>
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+chainable: false
+---
+
+
+# httpDo
diff --git a/src/content/reference/en/p5/httpGet.mdx b/src/content/reference/en/p5/httpGet.mdx
new file mode 100644
index 0000000000..ea8e512928
--- /dev/null
+++ b/src/content/reference/en/p5/httpGet.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: httpGet
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP GET request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text. This is equivalent
+  to
+
+  calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
+
+  a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+
+  which can be used to initialize typed arrays (such as Uint8Array).</p>
+line: 740
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    // Examples use USGS Earthquake API:
+    //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
+    let earthquakes;
+    function preload() {
+      // Get the most recent earthquake in the database
+      let url =
+       'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+        'format=geojson&limit=1&orderby=time';
+      httpGet(url, 'jsonp', false, function(response) {
+        // when the HTTP request completes, populate the variable that holds the
+        // earthquake data used in the visualization.
+        earthquakes = response;
+      });
+    }
+
+    function draw() {
+      if (!earthquakes) {
+        // Wait until the earthquake data has loaded before drawing.
+        return;
+      }
+      background(200);
+      // Get the magnitude and name of the earthquake out of the loaded JSON
+      let earthquakeMag = earthquakes.features[0].properties.mag;
+      let earthquakeName = earthquakes.features[0].properties.place;
+      ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+      textAlign(CENTER);
+      text(earthquakeName, 0, height - 30, width, 30);
+      noLoop();
+    }
+    </code></div>
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+chainable: false
+---
+
+
+# httpGet
diff --git a/src/content/reference/en/p5/httpPost.mdx b/src/content/reference/en/p5/httpPost.mdx
new file mode 100644
index 0000000000..db661ae7a7
--- /dev/null
+++ b/src/content/reference/en/p5/httpPost.mdx
@@ -0,0 +1,90 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: httpPost
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP POST request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text. This is equivalent
+  to
+
+  calling <code>httpDo(path, 'POST')</code>.</p>
+line: 817
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Examples use jsonplaceholder.typicode.com for a Mock Data API
+
+
+    let url = 'https://jsonplaceholder.typicode.com/posts';
+
+    let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very
+    cool.' };
+
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+    }
+
+
+    function mousePressed() {
+      httpPost(url, 'json', postData, function(result) {
+        strokeWeight(2);
+        text(result.body, mouseX, mouseY);
+      });
+    }
+
+    </code>
+
+    </div>
+
+
+    <div><code>
+
+    let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+
+    let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+    }
+
+
+    function mousePressed() {
+      httpPost(
+        url,
+        'json',
+        postData,
+        function(result) {
+          // ... won't be called
+        },
+        function(error) {
+          strokeWeight(2);
+          text(error.toString(), mouseX, mouseY);
+        }
+      );
+    }
+
+    </code></div>
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+chainable: false
+---
+
+
+# httpPost
diff --git a/src/content/reference/en/p5/hue.mdx b/src/content/reference/en/p5/hue.mdx
new file mode 100644
index 0000000000..ed851f77cd
--- /dev/null
+++ b/src/content/reference/en/p5/hue.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: hue
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the hue value from a
+  <a href="#/p5.Color">p5.Color</a> object, array of color components, or
+  CSS color string.</p>
+  <p>Hue exists in both HSB and HSL. It describes a color's position on the
+  color wheel. By default, this function returns the HSL-normalized hue. If
+  the <a href="#/colorMode">colorMode()</a> is set to HSB, it returns the
+  HSB-normalized hue.</p>
+line: 330
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - |
+
+    <div>
+    <code>
+    noStroke();
+    colorMode(HSB, 255);
+    const c = color(0, 126, 255);
+    fill(c);
+    rect(15, 20, 35, 60);
+    // Sets 'hueValue' to 0.
+    const hueValue = hue(c);
+    fill(hueValue);
+    rect(50, 20, 35, 60);
+    describe(
+      'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+    );
+    </code>
+    </div>
+return:
+  description: the hue
+  type: Number
+chainable: false
+---
+
+
+# hue
diff --git a/src/content/reference/en/p5/if-else.mdx b/src/content/reference/en/p5/if-else.mdx
new file mode 100644
index 0000000000..88323b6bae
--- /dev/null
+++ b/src/content/reference/en/p5/if-else.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: if-else
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>The <a href="#/p5/if-else">if-else</a> statement helps control the flow of
+  your code.</p>
+
+  <p>A condition is placed between the parenthesis following 'if',
+
+  when that condition evalues to <a
+  href="https://developer.mozilla.org/en-US/docs/Glossary/truthy">truthy</a>,
+
+  the code between the following curly braces is run.
+
+  Alternatively, when the condition evaluates to <a
+  href="https://developer.mozilla.org/en-US/docs/Glossary/Falsy">falsy</a>,
+
+  the code between the curly braces of 'else' block is run instead. Writing an
+
+  else block is optional.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">the
+  MDN entry</a>:
+
+  The 'if' statement executes a statement if a specified condition is truthy.
+
+  If the condition is falsy, another statement can be executed</p>
+line: 200
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let a = 4;
+    if (a > 0) {
+      console.log('positive');
+    } else {
+      console.log('negative');
+    }
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# if-else
diff --git a/src/content/reference/en/p5/imageLight.mdx b/src/content/reference/en/p5/imageLight.mdx
new file mode 100644
index 0000000000..98181e567f
--- /dev/null
+++ b/src/content/reference/en/p5/imageLight.mdx
@@ -0,0 +1,111 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: imageLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: |
+  <p>Creates an image light with the given image.</p>
+  <p>The image light simulates light from all the directions.
+  This is done by using the image as a texture for an infinitely
+  large sphere light. This sphere contains
+  or encapsulates the whole scene/drawing.
+  It will have different effect for varying shininess of the
+  object in the drawing.
+  Under the hood it is mainly doing 2 types of calculations,
+  the first one is creating an irradiance map the
+  environment map of the input image.
+  The second one is managing reflections based on the shininess
+  or roughness of the material used in the scene.</p>
+  <p>Note: The image's diffuse light will be affected by fill()
+  and the specular reflections will be affected by specularMaterial()
+  and shininess().</p>
+line: 497
+params:
+  - name: img
+    description: |
+      <p>image for the background</p>
+    type: p5.image
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/outdoor_image.jpg');
+    }
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
+      perspective(PI/3, 1, 5, 500);
+    }
+    function draw() {
+      background(220);
+
+      push();
+      camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
+      ortho(-1, 1, -1, 1, 0, 1);
+      noLights();
+      noStroke();
+      texture(img);
+      plane(2);
+      pop();
+
+      ambientLight(50);
+      imageLight(img);
+      specularMaterial(20);
+      noStroke();
+      rotateX(frameCount * 0.005);
+      rotateY(frameCount * 0.005);
+      box(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div class="notest">
+    <code>
+    let img;
+    let slider;
+
+    function preload() {
+      img = loadImage('assets/outdoor_spheremap.jpg');
+    }
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      slider = createSlider(0, 400, 100, 1);
+      slider.position(0, height);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
+      perspective(PI/3, 1, 5, 500);
+    }
+    function draw() {
+      background(220);
+
+      push();
+      camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
+      ortho(-1, 1, -1, 1, 0, 1);
+      noLights();
+      noStroke();
+      texture(img);
+      plane(2);
+      pop();
+
+      ambientLight(50);
+      imageLight(img);
+      specularMaterial(20);
+      shininess(slider.value());
+      noStroke();
+      sphere(30);
+    }
+    </code>
+    </div>
+alt: light with slider having a slider for varying roughness
+chainable: false
+---
+
+
+# imageLight
diff --git a/src/content/reference/en/p5/imageMode.mdx b/src/content/reference/en/p5/imageMode.mdx
new file mode 100644
index 0000000000..cb2a955086
--- /dev/null
+++ b/src/content/reference/en/p5/imageMode.mdx
@@ -0,0 +1,103 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: imageMode
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Changes the location from which images are drawn when
+
+  <a href="#/p5/image">image()</a> is called.</p>
+
+  <p>By default, the first
+
+  two parameters of <a href="#/p5/image">image()</a> are the x- and
+
+  y-coordinates of the image's upper-left corner. The next parameters are
+
+  its width and height. This is the same as calling
+  <code>imageMode(CORNER)</code>.</p>
+
+  <p><code>imageMode(CORNERS)</code> also uses the first two parameters of
+
+  <a href="#/p5/image">image()</a> as the x- and y-coordinates of the image's
+
+  top-left corner. The third and fourth parameters are the coordinates of its
+
+  bottom-right corner.</p>
+
+  <p><code>imageMode(CENTER)</code> uses the first two parameters of
+
+  <a href="#/p5/image">image()</a> as the x- and y-coordinates of the image's
+
+  center. The next parameters are its width and height.</p>
+line: 1262
+params:
+  - name: mode
+    description: |
+      <p>either CORNER, CORNERS, or CENTER.</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      background(200);
+      imageMode(CORNER);
+      image(img, 10, 10, 50, 50);
+
+      describe('A square image of a brick wall is drawn at the top left of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      background(200);
+      imageMode(CORNERS);
+      image(img, 10, 10, 90, 40);
+
+      describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/bricks.jpg');
+    }
+
+    function setup() {
+      background(200);
+      imageMode(CENTER);
+      image(img, 50, 50, 80, 80);
+
+      describe('A square image of a brick wall is drawn on a gray square.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# imageMode
diff --git a/src/content/reference/en/p5/input.mdx b/src/content/reference/en/p5/input.mdx
new file mode 100644
index 0000000000..6958bc54c0
--- /dev/null
+++ b/src/content/reference/en/p5/input.mdx
@@ -0,0 +1,76 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: input
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p><code>myElement.input()</code> sets a function to call when input is
+  detected within
+
+  the <a href="#/p5.Element">p5.Element</a> object. It's often used to with
+
+  text inputs and sliders. Calling <code>myElement.input(false)</code> disables
+  the
+
+  function.</p>
+line: 371
+params:
+  - name: fxn
+    description: |
+      <p>function to call when input is detected within
+                                     the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a slider and place it beneath the canvas.
+      let slider = createSlider(0, 255, 200);
+      slider.position(0, 100);
+
+      // When the slider changes, use its value to paint
+      // the background.
+      slider.input(() => {
+        let g = slider.value();
+        background(g);
+      });
+
+      describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an input and place it beneath the canvas.
+      let inp = createInput('');
+      inp.position(0, 100);
+
+      // When input is detected, paint the background gray
+      // and display the text.
+      inp.input(() => {
+        background(200);
+        let msg = inp.value();
+        text(msg, 5, 50);
+      });
+
+      describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# input
diff --git a/src/content/reference/en/p5/int.mdx b/src/content/reference/en/p5/int.mdx
new file mode 100644
index 0000000000..f029fb06bd
--- /dev/null
+++ b/src/content/reference/en/p5/int.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: int
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a boolean, string, or float to its integer representation.
+  When an array of values is passed in, then an int array of the same length
+  is returned.</p>
+line: 42
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(int('10')); // 10
+    print(int(10.31)); // 10
+    print(int(-10)); // -10
+    print(int(true)); // 1
+    print(int(false)); // 0
+    print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
+    print(int(Infinity)); // Infinity
+    print(int('-Infinity')); // -Infinity
+    </code></div>
+return:
+  description: integer representation of value
+  type: Number
+chainable: false
+---
+
+
+# int
diff --git a/src/content/reference/en/p5/isLooping.mdx b/src/content/reference/en/p5/isLooping.mdx
new file mode 100644
index 0000000000..ac5562e1cc
--- /dev/null
+++ b/src/content/reference/en/p5/isLooping.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: isLooping
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>By default, p5.js loops through <a href="#/p5/draw">draw()</a>
+  continuously,
+
+  executing the code within it. If the sketch is stopped with
+
+  <a href="#/p5/noLoop">noLoop()</a> or resumed with <a
+  href="#/p5/loop">loop()</a>,
+
+  isLooping() returns the current state for use within custom event
+  handlers.</p>
+line: 133
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let checkbox, button, colBG, colFill;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      button = createButton('Colorize if loop()');
+      button.position(0, 120);
+      button.mousePressed(changeBG);
+
+      checkbox = createCheckbox('loop()', true);
+      checkbox.changed(checkLoop);
+
+      colBG = color(0);
+      colFill = color(255);
+    }
+
+    function changeBG() {
+      if (isLooping()) {
+        colBG = color(random(255), random(255), random(255));
+        colFill = color(random(255), random(255), random(255));
+      }
+    }
+
+    function checkLoop() {
+      if (this.checked()) {
+        loop();
+      } else {
+        noLoop();
+      }
+    }
+
+    function draw() {
+      background(colBG);
+      fill(colFill);
+      ellipse(frameCount % width, height / 2, 50);
+    }
+    </code>
+    </div>
+alt: |-
+  Ellipse moves slowly from left. Checkbox toggles loop()/noLoop().
+  Button colorizes sketch if isLooping().
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# isLooping
diff --git a/src/content/reference/en/p5/join.mdx b/src/content/reference/en/p5/join.mdx
new file mode 100644
index 0000000000..ec293209aa
--- /dev/null
+++ b/src/content/reference/en/p5/join.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: join
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Combines an array of Strings into one String, each separated by the
+
+  character(s) used for the separator parameter. To join arrays of ints or
+
+  floats, it's necessary to first convert them to Strings using <a
+  href="#/p5/nf">nf()</a> or
+
+  nfs().</p>
+line: 15
+params:
+  - name: list
+    description: |
+      <p>array of Strings to be joined</p>
+    type: Array
+  - name: separator
+    description: |
+      <p>String to be placed between each item</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let array = ['Hello', 'world!'];
+    let separator = ' ';
+    let message = join(array, separator);
+    text(message, 5, 50);
+    describe('“Hello world!” displayed middle left of canvas.');
+    </code>
+    </div>
+return:
+  description: joined String
+  type: String
+chainable: false
+---
+
+
+# join
diff --git a/src/content/reference/en/p5/key.mdx b/src/content/reference/en/p5/key.mdx
new file mode 100644
index 0000000000..c5dec37919
--- /dev/null
+++ b/src/content/reference/en/p5/key.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: key
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>The system variable key always contains the value of the most recent
+
+  key on the keyboard that was typed. To get the proper capitalization, it
+
+  is best to use it within <a href="#/p5/keyTyped">keyTyped()</a>. For non-ASCII
+  keys, use the <a href="#/p5/keyCode">keyCode</a>
+
+  variable.</p>
+line: 34
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div><code>
+    // Click any key to display it!
+    // (Not Guaranteed to be Case Sensitive)
+    function setup() {
+      fill(245, 123, 158);
+      textSize(50);
+    }
+
+    function draw() {
+      background(200);
+      text(key, 33, 65); // Display last key pressed.
+      describe('canvas displays any key value that is pressed in pink font.');
+    }
+    </code></div>
+chainable: false
+---
+
+
+# key
diff --git a/src/content/reference/en/p5/keyCode.mdx b/src/content/reference/en/p5/keyCode.mdx
new file mode 100644
index 0000000000..6f0997c3dd
--- /dev/null
+++ b/src/content/reference/en/p5/keyCode.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: keyCode
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: |
+  <p>The variable keyCode is used to detect special keys such as BACKSPACE,
+  DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,
+  DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
+  You can also check for custom keys by looking up the keyCode of any key
+  on a site like this: <a href="http://keycode.info/">keycode.info</a>.</p>
+line: 60
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let fillVal = 126;
+    function draw() {
+      fill(fillVal);
+      rect(25, 25, 50, 50);
+      describe(`Grey rect center. turns white when up arrow pressed and black when down.
+        Display key pressed and its keyCode in a yellow box.`);
+    }
+
+    function keyPressed() {
+      if (keyCode === UP_ARROW) {
+        fillVal = 255;
+      } else if (keyCode === DOWN_ARROW) {
+        fillVal = 0;
+      }
+    }
+    </code></div>
+    <div><code>
+    function draw() {}
+    function keyPressed() {
+      background('yellow');
+      text(`${key} ${keyCode}`, 10, 40);
+      print(key, ' ', keyCode);
+    }
+    </code></div>
+chainable: false
+---
+
+
+# keyCode
diff --git a/src/content/reference/en/p5/keyIsDown.mdx b/src/content/reference/en/p5/keyIsDown.mdx
new file mode 100644
index 0000000000..599594048c
--- /dev/null
+++ b/src/content/reference/en/p5/keyIsDown.mdx
@@ -0,0 +1,97 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: keyIsDown
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>The <a href="#/p5/keyIsDown">keyIsDown()</a> function checks if the key is
+  currently down, i.e. pressed.
+
+  It can be used if you have an object that moves, and you want several keys
+
+  to be able to affect its behaviour simultaneously, such as moving a
+
+  sprite diagonally. You can put in any number representing the keyCode of
+
+  the key, or use any of the variable <a href="#/p5/keyCode">keyCode</a> names
+  listed
+
+  <a href="http://p5js.org/reference/#p5/keyCode">here</a>.</p>
+line: 301
+params:
+  - name: code
+    description: |
+      <p>The key to check for.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let x = 100;
+    let y = 100;
+
+    function setup() {
+      createCanvas(512, 512);
+      fill(255, 0, 0);
+    }
+
+    function draw() {
+      if (keyIsDown(LEFT_ARROW)) {
+        x -= 5;
+      }
+
+      if (keyIsDown(RIGHT_ARROW)) {
+        x += 5;
+      }
+
+      if (keyIsDown(UP_ARROW)) {
+        y -= 5;
+      }
+
+      if (keyIsDown(DOWN_ARROW)) {
+        y += 5;
+      }
+
+      clear();
+      ellipse(x, y, 50, 50);
+      describe(`50-by-50 red ellipse moves left, right, up, and
+        down with arrow presses.`);
+    }
+    </code></div>
+
+    <div><code>
+    let diameter = 50;
+
+    function setup() {
+      createCanvas(512, 512);
+    }
+
+    function draw() {
+      // 107 and 187 are keyCodes for "+"
+      if (keyIsDown(107) || keyIsDown(187)) {
+        diameter += 1;
+      }
+
+      // 109 and 189 are keyCodes for "-"
+      if (keyIsDown(109) || keyIsDown(189)) {
+        diameter -= 1;
+      }
+
+      clear();
+      fill(255, 0, 0);
+      ellipse(50, 50, diameter, diameter);
+      describe(`50-by-50 red ellipse gets bigger or smaller when
+        + or - are pressed.`);
+    }
+    </code></div>
+return:
+  description: whether key is down or not
+  type: Boolean
+chainable: false
+---
+
+
+# keyIsDown
diff --git a/src/content/reference/en/p5/keyIsPressed.mdx b/src/content/reference/en/p5/keyIsPressed.mdx
new file mode 100644
index 0000000000..0be24214a1
--- /dev/null
+++ b/src/content/reference/en/p5/keyIsPressed.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: keyIsPressed
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>The boolean system variable <a href="#/p5/keyIsPressed">keyIsPressed</a> is
+  true if any key is pressed
+
+  and false if no keys are pressed.</p>
+line: 10
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      if (keyIsPressed === true) {
+        fill(0);
+      } else {
+        fill(255);
+      }
+      rect(25, 25, 50, 50);
+      describe('50-by-50 white rect that turns black on keypress.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# keyIsPressed
diff --git a/src/content/reference/en/p5/keyPressed.mdx b/src/content/reference/en/p5/keyPressed.mdx
new file mode 100644
index 0000000000..08b9161088
--- /dev/null
+++ b/src/content/reference/en/p5/keyPressed.mdx
@@ -0,0 +1,104 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: keyPressed
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>The <a href="#/p5/keyPressed">keyPressed()</a> function is called once
+  every time a key is pressed. The
+
+  keyCode for the key that was pressed is stored in the <a
+  href="#/p5/keyCode">keyCode</a> variable.</p>
+
+  <p>For non-ASCII keys, use the keyCode variable. You can check if the keyCode
+
+  equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,
+
+  OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.</p>
+
+  <p>For ASCII keys, the key that was pressed is stored in the key variable.
+  However, it
+
+  does not distinguish between uppercase and lowercase. For this reason, it
+
+  is recommended to use <a href="#/p5/keyTyped">keyTyped()</a> to read the key
+  variable, in which the
+
+  case of the variable will be distinguished.</p>
+
+  <p>Because of how operating systems handle key repeats, holding down a key
+
+  may cause multiple calls to <a href="#/p5/keyTyped">keyTyped()</a> (and <a
+  href="#/p5/keyReleased">keyReleased()</a> as well). The
+
+  rate of repeat is set by the operating system and how each computer is
+
+  configured.<br><br>
+
+  Browsers may have different default
+
+  behaviors attached to various key events. To prevent any default
+
+  behavior for this event, add "return false" to the end of the method.</p>
+line: 98
+params:
+  - name: event
+    description: |
+      <p>optional KeyboardEvent callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`black rect center. turns white when key pressed and black
+        when released.`);
+    }
+    function keyPressed() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+    <div>
+    <code>
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`black rect center. turns white when left arrow pressed and
+        black when right.`);
+    }
+    function keyPressed() {
+      if (keyCode === LEFT_ARROW) {
+        value = 255;
+      } else if (keyCode === RIGHT_ARROW) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+    <div class="norender">
+    <code>
+    function keyPressed() {
+      // Do something
+      return false; // prevent any default behaviour
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# keyPressed
diff --git a/src/content/reference/en/p5/keyReleased.mdx b/src/content/reference/en/p5/keyReleased.mdx
new file mode 100644
index 0000000000..53e10915b1
--- /dev/null
+++ b/src/content/reference/en/p5/keyReleased.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: keyReleased
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>The <a href="#/p5/keyReleased">keyReleased()</a> function is called once
+  every time a key is released.
+
+  See <a href="#/p5/key">key</a> and <a href="#/p5/keyCode">keyCode</a> for more
+  information.<br><br>
+
+  Browsers may have different default
+
+  behaviors attached to various key events. To prevent any default
+
+  behavior for this event, add "return false" to the end of the function.</p>
+line: 185
+params:
+  - name: event
+    description: |
+      <p>optional KeyboardEvent callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`black rect center. turns white when key pressed and black
+        when pressed again`);
+    }
+    function keyReleased() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      return false; // prevent any default behavior
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# keyReleased
diff --git a/src/content/reference/en/p5/keyTyped.mdx b/src/content/reference/en/p5/keyTyped.mdx
new file mode 100644
index 0000000000..29351f4249
--- /dev/null
+++ b/src/content/reference/en/p5/keyTyped.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: keyTyped
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>The <a href="#/p5/keyTyped">keyTyped()</a> function is called once every
+  time a key is pressed, but
+
+  action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If
+  you are trying to detect
+
+  a keyCode for one of these keys, use the <a
+  href="#/p5/keyPressed">keyPressed()</a> function instead.
+
+  The most recent key typed will be stored in the key variable.</p>
+
+  <p>Because of how operating systems handle key repeats, holding down a key
+
+  will cause multiple calls to <a href="#/p5/keyTyped">keyTyped()</a> (and <a
+  href="#/p5/keyReleased">keyReleased()</a> as well). The
+
+  rate of repeat is set by the operating system and how each computer is
+
+  configured.<br><br>
+
+  Browsers may have different default behaviors attached to various key
+
+  events. To prevent any default behavior for this event, add "return false"
+
+  to the end of the function.</p>
+line: 237
+params:
+  - name: event
+    description: |
+      <p>optional KeyboardEvent callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`black rect center. turns white when 'a' key typed and
+        black when 'b' pressed`);
+    }
+    function keyTyped() {
+      if (key === 'a') {
+        value = 255;
+      } else if (key === 'b') {
+        value = 0;
+      }
+      // uncomment to prevent any default behavior
+      // return false;
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# keyTyped
diff --git a/src/content/reference/en/p5/lerp.mdx b/src/content/reference/en/p5/lerp.mdx
new file mode 100644
index 0000000000..939238f381
--- /dev/null
+++ b/src/content/reference/en/p5/lerp.mdx
@@ -0,0 +1,101 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: lerp
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates a number between two numbers at a specific increment. The
+  <code>amt</code>
+
+  parameter is the amount to interpolate between the two numbers. 0.0 is
+
+  equal to the first number, 0.1 is very near the first number, 0.5 is
+
+  half-way in between, and 1.0 is equal to the second number. The
+  <code>lerp()</code>
+
+  function is convenient for creating motion along a straight path and for
+
+  drawing dotted lines.</p>
+
+  <p>If the value of <code>amt</code> is less than 0 or more than 1,
+  <code>lerp()</code> will return a
+
+  number outside of the original interval. For example, calling
+
+  <code>lerp(0, 10, 1.5)</code> will return 15.</p>
+line: 239
+params:
+  - name: start
+    description: |
+      <p>first value.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>second value.</p>
+    type: Number
+  - name: amt
+    description: |
+      <p>number.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let a = 20;
+
+    let b = 80;
+
+    let c = lerp(a, b, 0.2);
+
+    let d = lerp(a, b, 0.5);
+
+    let e = lerp(a, b, 0.8);
+
+
+    let y = 50;
+
+
+    strokeWeight(5);
+
+
+    // Draw the original points in black.
+
+    stroke(0);
+
+    point(a, y);
+
+    point(b, y);
+
+
+    // Draw the lerped points in gray.
+
+    stroke(100);
+
+    point(c, y);
+
+    point(d, y);
+
+    point(e, y);
+
+
+    describe('Five points in a horizontal line. The outer points are black and
+    the inner points are gray.');
+
+    </code>
+
+    </div>
+return:
+  description: lerped value.
+  type: Number
+chainable: false
+---
+
+
+# lerp
diff --git a/src/content/reference/en/p5/lerpColor.mdx b/src/content/reference/en/p5/lerpColor.mdx
new file mode 100644
index 0000000000..b8aa3f9549
--- /dev/null
+++ b/src/content/reference/en/p5/lerpColor.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: lerpColor
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Blends two colors to find a third color between them. The <code>amt</code>
+  parameter
+
+  specifies the amount to interpolate between the two values. 0 is equal to
+
+  the first color, 0.1 is very near the first color, 0.5 is halfway between
+
+  the two colors, and so on. Negative numbers are set to 0. Numbers greater
+
+  than 1 are set to 1. This differs from the behavior of
+
+  <a href="#/lerp">lerp</a>. It's necessary because numbers outside of the
+
+  interval [0, 1] will produce strange and unexpected colors.</p>
+
+  <p>The way that colors are interpolated depends on the current
+
+  <a href="#/colorMode">colorMode()</a>.</p>
+line: 368
+params:
+  - name: c1
+    description: |
+      <p>interpolate from this color.</p>
+    type: p5.Color
+  - name: c2
+    description: |
+      <p>interpolate to this color.</p>
+    type: p5.Color
+  - name: amt
+    description: |
+      <p>number between 0 and 1.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    colorMode(RGB);
+    stroke(255);
+    background(51);
+    const from = color(218, 165, 32);
+    const to = color(72, 61, 139);
+    colorMode(RGB);
+    const interA = lerpColor(from, to, 0.33);
+    const interB = lerpColor(from, to, 0.66);
+    fill(from);
+    rect(10, 20, 20, 60);
+    fill(interA);
+    rect(30, 20, 20, 60);
+    fill(interB);
+    rect(50, 20, 20, 60);
+    fill(to);
+    rect(70, 20, 20, 60);
+    describe(
+      'Four rectangles with white edges. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
+    );
+    </code>
+    </div>
+return:
+  description: interpolated color.
+  type: p5.Color
+chainable: false
+---
+
+
+# lerpColor
diff --git a/src/content/reference/en/p5/let.mdx b/src/content/reference/en/p5/let.mdx
new file mode 100644
index 0000000000..d910912631
--- /dev/null
+++ b/src/content/reference/en/p5/let.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: let
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Creates and names a new variable. A variable is a container for a
+  value.</p>
+
+  <p>Variables that are declared with <a href="#/p5/let">let</a> will have
+  block-scope.
+
+  This means that the variable only exists within the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block">
+
+  block</a> that it is created within.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">the
+  MDN entry</a>:
+
+  Declares a block scope local variable, optionally initializing it to a
+  value.</p>
+line: 7
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let x = 2;
+    console.log(x); // prints 2 to the console
+    x = 1;
+    console.log(x); // prints 1 to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# let
diff --git a/src/content/reference/en/p5/lightFalloff.mdx b/src/content/reference/en/p5/lightFalloff.mdx
new file mode 100644
index 0000000000..9bb7d8c87a
--- /dev/null
+++ b/src/content/reference/en/p5/lightFalloff.mdx
@@ -0,0 +1,78 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: lightFalloff
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Sets the falloff rate for <a href="#/p5/pointLight">pointLight()</a>
+
+  and <a href="#/p5/spotLight">spotLight()</a>.</p>
+
+  <p>lightFalloff() affects only the lights which are created after it
+
+  in the code.</p>
+
+  <p>The <code>constant</code>, <code>linear</code>, an <code>quadratic</code>
+  parameters are used to calculate falloff as follows:</p>
+
+  <p>d = distance from light position to vertex position</p>
+
+  <p>falloff = 1 / (CONSTANT + d * LINEAR + (d * d) * QUADRATIC)</p>
+line: 646
+params:
+  - name: constant
+    description: |
+      <p>CONSTANT value for determining falloff</p>
+    type: Number
+  - name: linear
+    description: |
+      <p>LINEAR value for determining falloff</p>
+    type: Number
+  - name: quadratic
+    description: |
+      <p>QUADRATIC value for determining falloff</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      describe(
+        'Two spheres with different falloff values show different intensity of light'
+      );
+    }
+    function draw() {
+      background(125);
+
+      let locX = mouseX - width / 2;
+      let locY = mouseY - height / 2;
+      locX /= 2; // half scale
+
+      lightFalloff(1, 0, 0);
+      push();
+      translate(-25, 0, 0);
+      pointLight(250, 250, 250, locX - 25, locY, 50);
+      sphere(20);
+      pop();
+
+      lightFalloff(0.97, 0.03, 0);
+      push();
+      translate(25, 0, 0);
+      pointLight(250, 250, 250, locX + 25, locY, 50);
+      sphere(20);
+      pop();
+    }
+    </code>
+    </div>
+alt: Two spheres with different falloff values show different intensity of light
+chainable: true
+---
+
+
+# lightFalloff
diff --git a/src/content/reference/en/p5/lightness.mdx b/src/content/reference/en/p5/lightness.mdx
new file mode 100644
index 0000000000..25b1784743
--- /dev/null
+++ b/src/content/reference/en/p5/lightness.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: lightness
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the HSL lightness value from a
+  <a href="#/p5.Color">p5.Color</a> object, array of color components, or
+  CSS color string.</p>
+line: 474
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    noStroke();
+
+    colorMode(HSL);
+
+    const c = color(156, 100, 50, 1);
+
+    fill(c);
+
+    rect(15, 20, 35, 60);
+
+    // Sets 'lightValue' to 50.
+
+    const lightValue = lightness(c);
+
+    fill(lightValue);
+
+    rect(50, 20, 35, 60);
+
+    describe('Two rectangles. The rectangle on the left is light green and the
+    one on the right is gray.');
+
+    </code>
+
+    </div>
+return:
+  description: the lightness
+  type: Number
+chainable: false
+---
+
+
+# lightness
diff --git a/src/content/reference/en/p5/lights.mdx b/src/content/reference/en/p5/lights.mdx
new file mode 100644
index 0000000000..27d3fc909a
--- /dev/null
+++ b/src/content/reference/en/p5/lights.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: lights
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: |
+  <p>Places an ambient and directional light in the scene.
+  The lights are set to ambientLight(128, 128, 128) and
+  directionalLight(128, 128, 128, 0, 0, -1).</p>
+  <p>Note: lights need to be called (whether directly or indirectly)
+  within draw() to remain persistent in a looping program.
+  Placing them in setup() will cause them to only have an effect
+  the first time through the loop.</p>
+line: 602
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      describe('the light is partially ambient and partially directional');
+    }
+    function draw() {
+      background(0);
+      lights();
+      rotateX(millis() / 1000);
+      rotateY(millis() / 1000);
+      rotateZ(millis() / 1000);
+      box();
+    }
+    </code>
+    </div>
+alt: the light is partially ambient and partially directional
+chainable: true
+---
+
+
+# lights
diff --git a/src/content/reference/en/p5/line.mdx b/src/content/reference/en/p5/line.mdx
new file mode 100644
index 0000000000..45b92b7d9f
--- /dev/null
+++ b/src/content/reference/en/p5/line.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: line
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a line, a straight path between two points. Its default width is one
+  pixel.
+
+  The version of <code>line()</code> with four parameters draws the line in 2D.
+  To color a line,
+
+  use the <a href="#/p5/stroke">stroke()</a> function. To change its width, use
+  the
+
+  <a href="#/p5/strokeWeight">strokeWeight()</a> function. A line
+
+  can't be filled, so the <a href="#/p5/fill">fill()</a> function won't affect
+
+  the color of a  line.</p>
+
+  <p>The version of <code>line()</code> with six parameters allows the line to
+  be drawn in 3D
+
+  space. Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="#/p5/createCanvas">createCanvas()</a>.</p>
+line: 334
+itemtype: method
+class: p5
+example:
+  - |
+
+    <div>
+    <code>
+    line(30, 20, 85, 75);
+    describe(
+      'A black line on a gray canvas running from top-center to bottom-right.'
+    );
+    </code>
+    </div>
+
+    <div>
+    <code>
+    line(30, 20, 85, 20);
+    stroke(126);
+    line(85, 20, 85, 75);
+    stroke(255);
+    line(85, 75, 30, 75);
+    describe(
+      'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
+    );
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('A black line drawn on a gray canvas.');
+    }
+
+    function draw() {
+      background(220);
+      line(0, 0, 0, 10, 10, 0);
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# line
diff --git a/src/content/reference/en/p5/loadBytes.mdx b/src/content/reference/en/p5/loadBytes.mdx
new file mode 100644
index 0000000000..e7dbe3dacb
--- /dev/null
+++ b/src/content/reference/en/p5/loadBytes.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadBytes
+module: IO
+submodule: Input
+file: src/io/files.js
+description: |
+  <p>This method is suitable for fetching files up to size of 64MB.</p>
+line: 683
+params:
+  - name: file
+    description: |
+      <p>name of the file or URL to load</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
+                                         completes</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if there
+                                         is an error</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    let data;
+
+    function preload() {
+      data = loadBytes('assets/mammals.xml');
+    }
+
+    function setup() {
+      for (let i = 0; i < 5; i++) {
+        console.log(data.bytes[i].toString(16));
+      }
+      describe('no image displayed');
+    }
+    </code></div>
+return:
+  description: an object whose 'bytes' property will be the loaded buffer
+  type: Object
+chainable: false
+---
+
+
+# loadBytes
diff --git a/src/content/reference/en/p5/loadFont.mdx b/src/content/reference/en/p5/loadFont.mdx
new file mode 100644
index 0000000000..c39a4f0ab0
--- /dev/null
+++ b/src/content/reference/en/p5/loadFont.mdx
@@ -0,0 +1,165 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadFont
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Loads a font and creates a <a href="#/p5.Font">p5.Font</a> object.
+
+  <code>loadFont()</code> can load fonts in either .otf or .ttf format. Loaded
+  fonts can
+
+  be used to style text on the canvas and in HTML elements.</p>
+
+  <p>The first parameter, <code>path</code>, is the path to a font file.
+
+  Paths to local files should be relative. For example,
+
+  <code>'assets/inconsolata.otf'</code>. The Inconsolata font used in the
+  following
+
+  examples can be downloaded for free
+
+  <a href="https://www.fontsquirrel.com/fonts/inconsolata"
+  target="_blank">here</a>.
+
+  Paths to remote files should be URLs. For example,
+
+  <code>'https://example.com/inconsolata.otf'</code>. URLs may be blocked due to
+  browser
+
+  security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, it will be called once the font has loaded. The callback function
+
+  may use the new <a href="#/p5.Font">p5.Font</a> object if needed.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, it will be called if the font fails to load. The callback function
+
+  may use the error
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event"
+  target="_blank">Event</a>
+
+  object if needed.</p>
+
+  <p>Fonts can take time to load. Calling <code>loadFont()</code> in
+
+  <a href="#/p5/preload">preload()</a> ensures fonts load before they're
+
+  used in <a href="#/p5/setup">setup()</a> or
+
+  <a href="#/p5/draw">draw()</a>.</p>
+line: 16
+params:
+  - name: path
+    description: |
+      <p>path of the font to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function called with the
+                                                <a href="#/p5.Font">p5.Font</a> object after it
+                                                loads.</p>
+    type: Function
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function called with the error
+                                                <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
+                                                object if the font fails to load.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadFont('assets/inconsolata.otf', font => {
+        fill('deeppink');
+        textFont(font);
+        textSize(36);
+        text('p5*js', 10, 50);
+
+        describe('The text "p5*js" written in pink on a white background.');
+      });
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadFont('assets/inconsolata.otf', success, failure);
+    }
+
+    function success(font) {
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+
+    function failure(event) {
+      console.error('Oops!', event);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function preload() {
+      loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      let p = createP('p5*js');
+      p.style('color', 'deeppink');
+      p.style('font-family', 'Inconsolata');
+      p.style('font-size', '36px');
+      p.position(10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+    </code>
+    </div>
+return:
+  description: <a href="#/p5.Font">p5.Font</a> object.
+  type: p5.Font
+chainable: false
+---
+
+
+# loadFont
diff --git a/src/content/reference/en/p5/loadImage.mdx b/src/content/reference/en/p5/loadImage.mdx
new file mode 100644
index 0000000000..f5b8c3d0f7
--- /dev/null
+++ b/src/content/reference/en/p5/loadImage.mdx
@@ -0,0 +1,117 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadImage
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Loads an image to create a <a href="#/p5.Image">p5.Image</a> object.</p>
+
+  <p><code>loadImage()</code> interprets the first parameter one of three ways.
+  If the path
+
+  to an image file is provided, <code>loadImage()</code> will load it. Paths to
+  local
+
+  files should be relative, such as <code>'assets/thundercat.jpg'</code>. URLs
+  such as
+
+  <code>'https://example.com/thundercat.jpg'</code> may be blocked due to
+  browser
+
+  security. Raw image data can also be passed as a base64 encoded image in
+
+  the form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>.</p>
+
+  <p>The second parameter is optional. If a function is passed, it will be
+
+  called once the image has loaded. The callback function can optionally use
+
+  the new <a href="#/p5.Image">p5.Image</a> object.</p>
+
+  <p>The third parameter is also optional. If a function is passed, it will be
+
+  called if the image fails to load. The callback function can optionally use
+
+  the event error.</p>
+
+  <p>Images can take time to load. Calling <code>loadImage()</code> in
+
+  <a href="#/p5/preload">preload()</a> ensures images load before they're
+
+  used in <a href="#/p5/setup">setup()</a> or <a
+  href="#/p5/draw">draw()</a>.</p>
+line: 18
+params:
+  - name: path
+    description: |
+      <p>path of the image to be loaded or base64 encoded image.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function called with
+                                    <a href="#/p5.Image">p5.Image</a> once it
+                                    loads.</p>
+    type: function(p5.Image)
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function called with event
+                                    error if the image fails to load.</p>
+    type: Function(Event)
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadImage('assets/laDefense.jpg', img => {
+        image(img, 0, 0);
+      });
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadImage('assets/laDefense.jpg', success, failure);
+    }
+
+    function success(img) {
+      image(img, 0, 0);
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+
+    function failure(event) {
+      console.error('Oops!', event);
+    }
+    </code>
+    </div>
+return:
+  description: the <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# loadImage
diff --git a/src/content/reference/en/p5/loadJSON.mdx b/src/content/reference/en/p5/loadJSON.mdx
new file mode 100644
index 0000000000..394736c3fc
--- /dev/null
+++ b/src/content/reference/en/p5/loadJSON.mdx
@@ -0,0 +1,107 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadJSON
+module: IO
+submodule: Input
+file: src/io/files.js
+description: |
+  <p>Loads a JSON file from a file or a URL, and returns an Object.
+  Note that even if the JSON file contains an Array, an Object will be
+  returned with index numbers as keys.</p>
+  <p>This method is asynchronous, meaning it may not finish before the next
+  line in your sketch is executed. JSONP is supported via a polyfill and you
+  can pass in as the second argument an object with definitions of the json
+  callback following the syntax specified <a href="https://github.com/camsong/
+  fetch-jsonp">here</a>.</p>
+  <p>This method is suitable for fetching files up to size of 64MB.</p>
+line: 17
+itemtype: method
+class: p5
+example:
+  - >-
+
+
+    Calling <a href="#/p5/loadJSON">loadJSON()</a> inside <a
+    href="#/p5/preload">preload()</a> guarantees to complete the
+
+    operation before <a href="#/p5/setup">setup()</a> and <a
+    href="#/p5/draw">draw()</a> are called.
+
+
+    <div><code>
+
+    // Examples use USGS Earthquake API:
+
+    //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
+
+    let earthquakes;
+
+    function preload() {
+      // Get the most recent earthquake in the database
+      let url =
+       'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+        'summary/all_day.geojson';
+      earthquakes = loadJSON(url);
+    }
+
+
+    function setup() {
+      noLoop();
+    }
+
+
+    function draw() {
+      background(200);
+      // Get the magnitude and name of the earthquake out of the loaded JSON
+      let earthquakeMag = earthquakes.features[0].properties.mag;
+      let earthquakeName = earthquakes.features[0].properties.place;
+      ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+      textAlign(CENTER);
+      text(earthquakeName, 0, height - 30, width, 30);
+      describe(`50×50 ellipse that changes from black to white
+        depending on the current humidity`);
+    }
+
+    </code></div>
+
+
+    Outside of preload(), you may supply a callback function to handle the
+
+    object:
+
+    <div><code>
+
+    function setup() {
+      noLoop();
+      let url =
+       'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
+        'summary/all_day.geojson';
+      loadJSON(url, drawEarthquake);
+    }
+
+
+    function draw() {
+      background(200);
+      describe(`50×50 ellipse that changes from black to white
+        depending on the current humidity`);
+    }
+
+
+    function drawEarthquake(earthquakes) {
+      // Get the magnitude and name of the earthquake out of the loaded JSON
+      let earthquakeMag = earthquakes.features[0].properties.mag;
+      let earthquakeName = earthquakes.features[0].properties.place;
+      ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+      textAlign(CENTER);
+      text(earthquakeName, 0, height - 30, width, 30);
+    }
+
+    </code></div>
+return:
+  description: JSON data
+  type: Object|Array
+chainable: false
+---
+
+
+# loadJSON
diff --git a/src/content/reference/en/p5/loadModel.mdx b/src/content/reference/en/p5/loadModel.mdx
new file mode 100644
index 0000000000..35961e6bb3
--- /dev/null
+++ b/src/content/reference/en/p5/loadModel.mdx
@@ -0,0 +1,121 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadModel
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: >
+  <p>Load a 3d model from an OBJ or STL file.</p>
+
+  <p><a href="#/p5/loadModel">loadModel()</a> should be placed inside of <a
+  href="#/p5/preload">preload()</a>.
+
+  This allows the model to load fully before the rest of your code is run.</p>
+
+  <p>One of the limitations of the OBJ and STL format is that it doesn't have a
+  built-in
+
+  sense of scale. This means that models exported from different programs might
+
+  be very different sizes. If your model isn't displaying, try calling
+
+  <a href="#/p5/loadModel">loadModel()</a> with the normalized parameter set to
+  true. This will resize the
+
+  model to a scale appropriate for p5. You can also make additional changes to
+
+  the final size of your model with the <a href="#/p5/scale">scale()</a>
+  function.</p>
+
+  <p>Also, the support for colored STL files is not present. STL files with
+  color will be
+
+  rendered without color properties.</p>
+
+  <p>Options can include:</p>
+
+  <ul>
+
+  <li><code>path</code>: Specifies the location or path of the 3D model file for
+  loading.</li>
+
+  <li><code>normalize</code>: Enables standardized size scaling during loading
+  if set to true.</li>
+
+  <li><code>successCallback</code>: Callback for post-loading actions with the
+  3D model object.</li>
+
+  <li><code>failureCallback</code>: Handles errors if model loading fails,
+  receiving an event error.</li>
+
+  <li><code>fileType</code>: Defines the file extension of the model.</li>
+
+  <li><code>flipU</code>: Flips the U texture coordinates of the model.</li>
+
+  <li><code>flipV</code>: Flips the V texture coordinates of the model.</li>
+
+  </ul>
+line: 12
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    //draw a spinning octahedron
+    let octahedron;
+
+    function preload() {
+      octahedron = loadModel('assets/octahedron.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('Vertically rotating 3-d octahedron.');
+    }
+
+    function draw() {
+      background(200);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      model(octahedron);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    //draw a spinning teapot
+    let teapot;
+
+    function preload() {
+      // Load model with normalise parameter set to true
+      teapot = loadModel('assets/teapot.obj', true);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('Vertically rotating 3-d teapot with red, green and blue gradient.');
+    }
+
+    function draw() {
+      background(200);
+      scale(0.4); // Scaled to make model fit into canvas
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      normalMaterial(); // For effect
+      model(teapot);
+    }
+    </code>
+    </div>
+alt: 'Vertically rotating 3-d teapot with red, green and blue gradient.'
+return:
+  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+  type: p5.Geometry
+chainable: false
+---
+
+
+# loadModel
diff --git a/src/content/reference/en/p5/loadPixels.mdx b/src/content/reference/en/p5/loadPixels.mdx
new file mode 100644
index 0000000000..6409f4046f
--- /dev/null
+++ b/src/content/reference/en/p5/loadPixels.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadPixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: |
+  <p>Loads the current value of each pixel on the canvas into the
+  <a href="#/p5/pixels">pixels</a> array. This
+  function must be called before reading from or writing to
+  <a href="#/p5/pixels">pixels</a>.</p>
+line: 765
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0, width, height);
+      let d = pixelDensity();
+      let halfImage = 4 * (d * width) * (d * height / 2);
+      loadPixels();
+      for (let i = 0; i < halfImage; i += 1) {
+        pixels[i + halfImage] = pixels[i];
+      }
+      updatePixels();
+
+      describe('Two identical images of mountain landscapes, one on top of the other.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# loadPixels
diff --git a/src/content/reference/en/p5/loadShader.mdx b/src/content/reference/en/p5/loadShader.mdx
new file mode 100644
index 0000000000..4641c16eda
--- /dev/null
+++ b/src/content/reference/en/p5/loadShader.mdx
@@ -0,0 +1,87 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Creates a new <a href="#/p5.Shader">p5.Shader</a> object
+
+  from the provided vertex and fragment shader files.</p>
+
+  <p>The shader files are loaded asynchronously in the
+
+  background, so this method should be used in <a
+  href="#/p5/preload">preload()</a>.</p>
+
+  <p>Shaders can alter the positioning of shapes drawn with them.
+
+  To ensure consistency in rendering, it's recommended to use the vertex shader
+  in the <a href="#/p5/createShader">createShader example</a>.</p>
+
+  <p>Note, shaders can only be used in WEBGL mode.</p>
+line: 12
+params:
+  - name: vertFilename
+    description: |
+      <p>path to file containing vertex shader
+      source code</p>
+    type: String
+  - name: fragFilename
+    description: |
+      <p>path to file containing fragment shader
+      source code</p>
+    type: String
+  - name: callback
+    description: >
+      <p>callback to be executed after loadShader
+
+      completes. On success, the p5.Shader object is passed as the first
+      argument.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>callback to be executed when an error
+      occurs inside loadShader. On error, the error is passed as the first
+      argument.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let mandel;
+    function preload() {
+      // load the shader definitions from files
+      mandel = loadShader('assets/shader.vert', 'assets/shader.frag');
+    }
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      // use the shader
+      shader(mandel);
+      noStroke();
+      mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
+      describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
+    }
+
+    function draw() {
+      mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+    </code>
+    </div>
+alt: 'zooming Mandelbrot set. a colorful, infinitely detailed fractal.'
+return:
+  description: |-
+    a shader object created from the provided
+    vertex and fragment shader files.
+  type: p5.Shader
+chainable: false
+---
+
+
+# loadShader
diff --git a/src/content/reference/en/p5/loadSound.mdx b/src/content/reference/en/p5/loadSound.mdx
new file mode 100644
index 0000000000..d828c41023
--- /dev/null
+++ b/src/content/reference/en/p5/loadSound.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadSound
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>loadSound() returns a new p5.SoundFile from a specified
+  path. If called during preload(), the p5.SoundFile will be ready
+  to play in time for setup() and draw(). If called outside of
+  preload, the p5.SoundFile will not be ready immediately, so
+  loadSound accepts a callback as the second parameter. Using a
+  <a href="https://github.com/processing/p5.js/wiki/Local-server">
+  local server</a> is recommended when loading external files.</p>
+line: 2946
+params:
+  - name: path
+    description: |
+      <p>Path to the sound file, or an array with
+                                        paths to soundfiles in multiple formats
+                                        i.e. ['sound.ogg', 'sound.mp3'].
+                                        Alternately, accepts an object: either
+                                        from the HTML5 File API, or a p5.File.</p>
+    type: String|Array
+  - name: successCallback
+    description: |
+      <p>Name of a function to call once file loads</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>Name of a function to call if there is
+                                          an error loading the file.</p>
+    type: Function
+    optional: true
+  - name: whileLoading
+    description: |
+      <p>Name of a function to call while file is loading.
+                                     This function will receive the percentage loaded
+                                     so far, from 0.0 to 1.0.</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let mySound;
+    function preload() {
+      soundFormats('mp3', 'ogg');
+      mySound = loadSound('assets/doorbell');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+      background(220);
+      text('tap here to play', 10, 20);
+    }
+
+    function canvasPressed() {
+      // playing a sound file on a user gesture
+      // is equivalent to `userStartAudio()`
+      mySound.play();
+    }
+    </code></div>
+return:
+  description: Returns a p5.SoundFile
+  type: SoundFile
+chainable: false
+---
+
+
+# loadSound
diff --git a/src/content/reference/en/p5/loadStrings.mdx b/src/content/reference/en/p5/loadStrings.mdx
new file mode 100644
index 0000000000..f6d5806fea
--- /dev/null
+++ b/src/content/reference/en/p5/loadStrings.mdx
@@ -0,0 +1,98 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadStrings
+module: IO
+submodule: Input
+file: src/io/files.js
+description: |
+  <p>Reads the contents of a file and creates a String array of its individual
+  lines. If the name of the file is used as the parameter, as in the above
+  example, the file must be located in the sketch directory/folder.</p>
+  <p>Alternatively, the file may be loaded from anywhere on the local
+  computer using an absolute path (something that starts with / on Unix and
+  Linux, or a drive letter on Windows), or the filename parameter can be a
+  URL for a file found on a network.</p>
+  <p>This method is asynchronous, meaning it may not finish before the next
+  line in your sketch is executed.</p>
+  <p>This method is suitable for fetching files up to size of 64MB.</p>
+line: 180
+params:
+  - name: filename
+    description: |
+      <p>name of the file or url to load</p>
+    type: String
+  - name: callback
+    description: >
+      <p>function to be executed after <a
+      href="#/p5/loadStrings">loadStrings()</a>
+                                    completes, Array is passed in as first
+                                    argument</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if
+                                    there is an error, response is passed
+                                    in as first argument</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - >-
+
+
+    Calling loadStrings() inside <a href="#/p5/preload">preload()</a> guarantees
+    to complete the
+
+    operation before <a href="#/p5/setup">setup()</a> and <a
+    href="#/p5/draw">draw()</a> are called.
+
+
+    <div><code>
+
+    let result;
+
+    function preload() {
+      result = loadStrings('assets/test.txt');
+    }
+
+
+    function setup() {
+      background(200);
+      text(random(result), 10, 10, 80, 80);
+      describe(`randomly generated text from a file,
+        for example "i smell like butter"`);
+    }
+
+    </code></div>
+
+
+    Outside of preload(), you may supply a callback function to handle the
+
+    object:
+
+
+    <div><code>
+
+    function setup() {
+      loadStrings('assets/test.txt', pickString);
+      describe(`randomly generated text from a file,
+        for example "i have three feet"`);
+    }
+
+
+    function pickString(result) {
+      background(200);
+      text(random(result), 10, 10, 80, 80);
+    }
+
+    </code></div>
+return:
+  description: Array of Strings
+  type: 'String[]'
+chainable: false
+---
+
+
+# loadStrings
diff --git a/src/content/reference/en/p5/loadTable.mdx b/src/content/reference/en/p5/loadTable.mdx
new file mode 100644
index 0000000000..f940821424
--- /dev/null
+++ b/src/content/reference/en/p5/loadTable.mdx
@@ -0,0 +1,120 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadTable
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Reads the contents of a file or URL and creates a <a
+  href="#/p5.Table">p5.Table</a> object with
+
+  its values. If a file is specified, it must be located in the sketch's
+
+  "data" folder. The filename parameter can also be a URL to a file found
+
+  online. By default, the file is assumed to be comma-separated (in CSV
+
+  format). Table only looks for a header row if the 'header' option is
+
+  included.</p>
+
+  <p>This method is asynchronous, meaning it may not finish before the next
+
+  line in your sketch is executed. Calling <a
+  href="#/p5/loadTable">loadTable()</a> inside <a
+  href="#/p5/preload">preload()</a>
+
+  guarantees to complete the operation before <a href="#/p5/setup">setup()</a>
+  and <a href="#/p5/draw">draw()</a> are called.
+
+  Outside of <a href="#/p5/preload">preload()</a>, you may supply a callback
+  function to handle the
+
+  object:</p>
+
+  <p>All files loaded and saved use UTF-8 encoding. This method is suitable for
+  fetching files up to size of 64MB.</p>
+line: 300
+params:
+  - name: filename
+    description: |
+      <p>name of the file or URL to load</p>
+    type: String
+  - name: extension
+    description: |
+      <p>parse the table by comma-separated values "csv", semicolon-separated
+                                           values "ssv", or tab-separated values "tsv"</p>
+    type: String
+    optional: true
+  - name: header
+    description: |
+      <p>"header" to indicate table has header row</p>
+    type: String
+    optional: true
+  - name: callback
+    description: |
+      <p>function to be executed after
+                                           <a href="#/p5/loadTable">loadTable()</a> completes. On success, the
+                                           <a href="#/p5.Table">Table</a> object is passed in as the
+                                           first argument.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if
+                                           there is an error, response is passed
+                                           in as first argument</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // Given the following CSV file called "mammals.csv"
+    // located in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('assets/mammals.csv', 'csv', 'header');
+      //the file can be remote
+      //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+      //                  "csv", "header");
+    }
+
+    function setup() {
+      //count the columns
+      print(table.getRowCount() + ' total rows in table');
+      print(table.getColumnCount() + ' total columns in table');
+
+      print(table.getColumn('name'));
+      //["Goat", "Leopard", "Zebra"]
+
+      //cycle through the table
+      for (let r = 0; r < table.getRowCount(); r++)
+        for (let c = 0; c < table.getColumnCount(); c++) {
+          print(table.getString(r, c));
+        }
+      describe(`randomly generated text from a file,
+        for example "i smell like butter"`);
+    }
+    </code>
+    </div>
+return:
+  description: <a href="#/p5.Table">Table</a> object containing data
+  type: Object
+chainable: false
+---
+
+
+# loadTable
diff --git a/src/content/reference/en/p5/loadXML.mdx b/src/content/reference/en/p5/loadXML.mdx
new file mode 100644
index 0000000000..bfcce5e978
--- /dev/null
+++ b/src/content/reference/en/p5/loadXML.mdx
@@ -0,0 +1,102 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loadXML
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Reads the contents of a file and creates an XML object with its values.
+
+  If the name of the file is used as the parameter, as in the above example,
+
+  the file must be located in the sketch directory/folder.</p>
+
+  <p>Alternatively, the file maybe be loaded from anywhere on the local
+
+  computer using an absolute path (something that starts with / on Unix and
+
+  Linux, or a drive letter on Windows), or the filename parameter can be a
+
+  URL for a file found on a network.</p>
+
+  <p>This method is asynchronous, meaning it may not finish before the next
+
+  line in your sketch is executed. Calling <a href="#/p5/loadXML">loadXML()</a>
+  inside <a href="#/p5/preload">preload()</a>
+
+  guarantees to complete the operation before <a href="#/p5/setup">setup()</a>
+  and <a href="#/p5/draw">draw()</a> are called.</p>
+
+  <p>Outside of <a href="#/p5/preload">preload()</a>, you may supply a callback
+  function to handle the
+
+  object.</p>
+
+  <p>This method is suitable for fetching files up to size of 64MB.</p>
+line: 575
+params:
+  - name: filename
+    description: |
+      <p>name of the file or URL to load</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to be executed after <a href="#/p5/loadXML">loadXML()</a>
+                                    completes, XML object is passed in as
+                                    first argument</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if
+                                    there is an error, response is passed
+                                    in as first argument</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    // The following short XML file called "mammals.xml" is parsed
+    // in the code below.
+    //
+    // <?xml version="1.0"?>
+    // &lt;mammals&gt;
+    //   &lt;animal id="0" species="Capra hircus">Goat&lt;/animal&gt;
+    //   &lt;animal id="1" species="Panthera pardus">Leopard&lt;/animal&gt;
+    //   &lt;animal id="2" species="Equus zebra">Zebra&lt;/animal&gt;
+    // &lt;/mammals&gt;
+
+    let xml;
+
+    function preload() {
+      xml = loadXML('assets/mammals.xml');
+    }
+
+    function setup() {
+      let children = xml.getChildren('animal');
+
+      for (let i = 0; i < children.length; i++) {
+        let id = children[i].getNum('id');
+        let coloring = children[i].getString('species');
+        let name = children[i].getContent();
+        print(id + ', ' + coloring + ', ' + name);
+      }
+      describe('no image displayed');
+    }
+
+    // Sketch prints:
+    // 0, Capra hircus, Goat
+    // 1, Panthera pardus, Leopard
+    // 2, Equus zebra, Zebra
+    </code></div>
+return:
+  description: XML object containing data
+  type: Object
+chainable: false
+---
+
+
+# loadXML
diff --git a/src/content/reference/en/p5/log.mdx b/src/content/reference/en/p5/log.mdx
new file mode 100644
index 0000000000..092097b518
--- /dev/null
+++ b/src/content/reference/en/p5/log.mdx
@@ -0,0 +1,45 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: log
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the natural logarithm (the base-e logarithm) of a number. This
+
+  function expects the <code>n</code> parameter to be a value greater than
+  0.0.</p>
+line: 289
+params:
+  - name: 'n'
+    description: |
+      <p>number greater than 0.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -height);
+
+      let x = frameCount;
+      let y = 15 * log(x);
+      point(x, y);
+
+      describe('A series of black dots that get higher slowly from left to right.');
+    }
+    </code>
+    </div>
+return:
+  description: natural logarithm of n.
+  type: Number
+chainable: false
+---
+
+
+# log
diff --git a/src/content/reference/en/p5/loop.mdx b/src/content/reference/en/p5/loop.mdx
new file mode 100644
index 0000000000..a1bceb60b3
--- /dev/null
+++ b/src/content/reference/en/p5/loop.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: loop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>By default, p5.js loops through draw() continuously, executing the code
+  within
+
+  it. However, the <a href="#/p5/draw">draw()</a> loop may be stopped by calling
+
+  <a href="#/p5/noLoop">noLoop()</a>. In that case, the <a
+  href="#/p5/draw">draw()</a>
+
+  loop can be resumed with loop().</p>
+
+  <p>Avoid calling loop() from inside setup().</p>
+
+  <p>Use <a href="#/p5/isLooping">isLooping()</a> to check the current state of
+  <a href="#/p5/loop">loop()</a>.</p>
+line: 82
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let x = 0;
+    function setup() {
+      createCanvas(100, 100);
+      noLoop();
+    }
+
+    function draw() {
+      background(204);
+      x = x + 0.1;
+      if (x > width) {
+        x = 0;
+      }
+      line(x, 0, x, height);
+    }
+
+    function mousePressed() {
+      loop();
+    }
+
+    function mouseReleased() {
+      noLoop();
+    }
+    </code>
+    </div>
+alt: horizontal line moves slowly from left. Loops but stops on mouse press.
+chainable: false
+---
+
+
+# loop
diff --git a/src/content/reference/en/p5/mag.mdx b/src/content/reference/en/p5/mag.mdx
new file mode 100644
index 0000000000..5e26677ce9
--- /dev/null
+++ b/src/content/reference/en/p5/mag.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mag
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the magnitude, or length, of a vector. A vector is like an arrow
+
+  pointing in space. Vectors are commonly used for programming motion.</p>
+
+  <p>Vectors don't have a "start" position because the same arrow can be drawn
+
+  anywhere. A vector's magnitude can be thought of as the distance from the
+
+  origin (0, 0) to its tip at (x, y). <code>mag(x, y)</code> is a shortcut for
+  calling
+
+  <code>dist(0, 0, x, y)</code>.</p>
+line: 315
+params:
+  - name: x
+    description: |
+      <p>first component.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>second component.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let x = 30;
+
+    let y = 40;
+
+    let m = mag(x, y);
+
+
+    line(0, 0, x, y);
+
+    text(m, x, y);
+
+
+    describe('A diagonal line is drawn from the top left of the canvas. The
+    number 50 is written at the end of the line.');
+
+    </code>
+
+    </div>
+return:
+  description: 'magnitude of vector from (0,0) to (x,y).'
+  type: Number
+chainable: false
+---
+
+
+# mag
diff --git a/src/content/reference/en/p5/map.mdx b/src/content/reference/en/p5/map.mdx
new file mode 100644
index 0000000000..90a940442b
--- /dev/null
+++ b/src/content/reference/en/p5/map.mdx
@@ -0,0 +1,90 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: map
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Re-maps a number from one range to another.</p>
+
+  <p>For example, calling <code>map(2, 0, 10, 0, 100)</code> returns 20. The
+  first three
+
+  arguments set the original value to 2 and the original range from 0 to 10.
+
+  The last two arguments set the target range from 0 to 100. 20's position
+
+  in the target range [0, 100] is proportional to 2's position in the
+
+  original range [0, 10].</p>
+line: 347
+params:
+  - name: value
+    description: |
+      <p>the incoming value to be converted.</p>
+    type: Number
+  - name: start1
+    description: |
+      <p>lower bound of the value's current range.</p>
+    type: Number
+  - name: stop1
+    description: |
+      <p>upper bound of the value's current range.</p>
+    type: Number
+  - name: start2
+    description: |
+      <p>lower bound of the value's target range.</p>
+    type: Number
+  - name: stop2
+    description: |
+      <p>upper bound of the value's target range.</p>
+    type: Number
+  - name: withinBounds
+    description: |
+      <p>constrain the value to the newly mapped range.</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let n = map(7, 0, 10, 0, 100);
+    text(n, 50, 50);
+
+    describe('The number 70 written in the middle of a gray square.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let x = map(2, 0, 10, 0, width);
+    circle(x, 50, 10);
+
+    describe('A white circle drawn on the left side of a gray square.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let c = map(mouseX, 0, width, 0, 255);
+      fill(c);
+      circle(50, 50, 20);
+
+      describe('A circle changes color from black to white as the mouse moves from left to right.');
+    }
+    </code>
+    </div>
+return:
+  description: remapped number.
+  type: Number
+chainable: false
+---
+
+
+# map
diff --git a/src/content/reference/en/p5/match.mdx b/src/content/reference/en/p5/match.mdx
new file mode 100644
index 0000000000..d9ae0898b2
--- /dev/null
+++ b/src/content/reference/en/p5/match.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: match
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: |
+  <p>This function is used to apply a regular expression to a piece of text,
+  and return matching groups (elements found inside parentheses) as a
+  String array. If there are no matches, a null value will be returned.
+  If no groups are specified in the regular expression, but the sequence
+  matches, an array of length 1 (with the matched text as the first element
+  of the array) will be returned.</p>
+  <p>To use the function, first check to see if the result is null. If the
+  result is null, then the sequence did not match at all. If the sequence
+  did match, an array is returned.</p>
+  <p>If there are groups (specified by sets of parentheses) in the regular
+  expression, then the contents of each will be returned in the array.
+  Element [0] of a regular expression match returns the entire matching
+  string, and the match groups start at element [1] (the first group is [1],
+  the second [2], and so on).</p>
+line: 41
+params:
+  - name: str
+    description: |
+      <p>the String to be searched</p>
+    type: String
+  - name: regexp
+    description: |
+      <p>the regexp to be used for matching</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let string = 'Hello p5js*!';
+    let regexp = 'p5js\\*';
+    let m = match(string, regexp);
+    text(m, 5, 50);
+    describe('“p5js*” displayed middle left of canvas.');
+    </code>
+    </div>
+return:
+  description: Array of Strings found
+  type: 'String[]'
+chainable: false
+---
+
+
+# match
diff --git a/src/content/reference/en/p5/matchAll.mdx b/src/content/reference/en/p5/matchAll.mdx
new file mode 100644
index 0000000000..0141f19fbc
--- /dev/null
+++ b/src/content/reference/en/p5/matchAll.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: matchAll
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: |
+  <p>This function is used to apply a regular expression to a piece of text,
+  and return a list of matching groups (elements found inside parentheses)
+  as a two-dimensional String array. If there are no matches, a null value
+  will be returned. If no groups are specified in the regular expression,
+  but the sequence matches, a two dimensional array is still returned, but
+  the second dimension is only of length one.</p>
+  <p>To use the function, first check to see if the result is null. If the
+  result is null, then the sequence did not match at all. If the sequence
+  did match, a 2D array is returned.</p>
+  <p>If there are groups (specified by sets of parentheses) in the regular
+  expression, then the contents of each will be returned in the array.
+  Assuming a loop with counter variable i, element [i][0] of a regular
+  expression match returns the entire matching string, and the match groups
+  start at element [i][1] (the first group is [i][1], the second [i][2],
+  and so on).</p>
+line: 79
+params:
+  - name: str
+    description: |
+      <p>the String to be searched</p>
+    type: String
+  - name: regexp
+    description: |
+      <p>the regexp to be used for matching</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    let string = 'Hello p5js*! Hello world!';
+    let regexp = 'Hello';
+    matchAll(string, regexp);
+    </code>
+    </div>
+return:
+  description: 2d Array of Strings found
+  type: 'String[]'
+chainable: false
+---
+
+
+# matchAll
diff --git a/src/content/reference/en/p5/max.mdx b/src/content/reference/en/p5/max.mdx
new file mode 100644
index 0000000000..205fc35ffa
--- /dev/null
+++ b/src/content/reference/en/p5/max.mdx
@@ -0,0 +1,105 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: max
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Returns the largest value in a sequence of numbers.</p>
+
+  <p>The version of <code>max()</code> with one parameter interprets it as an
+  array of
+
+  numbers and returns the largest number.</p>
+
+  <p>The version of <code>max()</code> with two or more parameters interprets
+  them as
+
+  individual numbers and returns the largest number.</p>
+line: 410
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let m = max(10, 20);
+
+    text(m, 50, 50);
+
+
+    describe('The number 20 written in the middle of a gray square.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let m = max([10, 20]);
+
+    text(m, 50, 50);
+
+
+    describe('The number 20 written in the middle of a gray square.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let numbers = [2, 1, 5, 4, 8, 9];
+
+
+    // Draw all of the numbers in the array.
+
+    noStroke();
+
+    let spacing = 15;
+
+    numbers.forEach((n, index) => {
+      let x = index * spacing;
+      let y = 25;
+      text(n, x, y);
+    });
+
+
+    // Draw the maximum value in the array.
+
+    let m = max(numbers);
+
+    let maxX = 33;
+
+    let maxY = 80;
+
+
+    textSize(32);
+
+    text(m, maxX, maxY);
+
+
+    describe('The numbers 2 1 5 4 8 9 are written in small text at the top of a
+    gray square. The number 9 is written in large text at the center of the
+    square.');
+
+    </code>
+
+    </div>
+return:
+  description: maximum number.
+  type: Number
+chainable: false
+---
+
+
+# max
diff --git a/src/content/reference/en/p5/metalness.mdx b/src/content/reference/en/p5/metalness.mdx
new file mode 100644
index 0000000000..f01b2c30f0
--- /dev/null
+++ b/src/content/reference/en/p5/metalness.mdx
@@ -0,0 +1,113 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: metalness
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the metalness property of a material used in 3D rendering.</p>
+
+  <p>The metalness property controls the degree to which the material
+
+  appears metallic. A higher metalness value makes the material look
+
+  more metallic, while a lower value makes it appear less metallic.</p>
+
+  <p>The default and minimum value is 0, indicating a non-metallic
+  appearance.</p>
+
+  <p>Unlike other materials, metals exclusively rely on reflections,
+  particularly
+
+  those produced by specular lights (mirrorLike lights). They don't incorporate
+
+  diffuse or ambient lighting. Metals use a fill color to influence the overall
+
+  color of their reflections. Pick a fill color, and you can easily change the
+
+  appearance of the metal surfaces. When no fill color is provided, it defaults
+
+  to using white.</p>
+line: 1186
+params:
+  - name: metallic
+    description: |
+      <ul>
+      <li>The degree of metalness.</li>
+      </ul>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    let img;
+    let slider;
+    let slider2;
+    function preload() {
+      img = loadImage('assets/outdoor_spheremap.jpg');
+    }
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      slider = createSlider(0, 300, 100, 1);
+      let sliderLabel = createP('Metalness');
+      sliderLabel.position(100, height - 25);
+      slider2 = createSlider(0, 350, 100);
+      slider2.position(0, height + 20);
+      slider2Label = createP('Shininess');
+      slider2Label.position(100, height);
+    }
+    function draw() {
+      background(220);
+      imageMode(CENTER);
+      push();
+      image(img, 0, 0, width, height);
+      clearDepth();
+      pop();
+      imageLight(img);
+      fill('gray');
+      specularMaterial('gray');
+      shininess(slider2.value());
+      metalness(slider.value());
+      noStroke();
+      sphere(30);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let slider;
+    let slider2;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      slider = createSlider(0, 200, 100);
+      let sliderLabel = createP('Metalness');
+      sliderLabel.position(100, height - 25);
+      slider2 = createSlider(0, 200, 2);
+      slider2.position(0, height + 25);
+      let slider2Label = createP('Shininess');
+      slider2Label.position(100, height);
+    }
+    function draw() {
+      noStroke();
+      background(100);
+      fill(255, 215, 0);
+      pointLight(255, 255, 255, 5000, 5000, 75);
+      specularMaterial('gray');
+      ambientLight(100);
+      shininess(slider2.value());
+      metalness(slider.value());
+      rotateY(frameCount * 0.01);
+      torus(20, 10);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# metalness
diff --git a/src/content/reference/en/p5/midiToFreq.mdx b/src/content/reference/en/p5/midiToFreq.mdx
new file mode 100644
index 0000000000..919ab415f6
--- /dev/null
+++ b/src/content/reference/en/p5/midiToFreq.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: midiToFreq
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the frequency value of a MIDI note value.
+  General MIDI treats notes as integers where middle C
+  is 60, C# is 61, D is 62 etc. Useful for generating
+  musical frequencies with oscillators.</p>
+line: 841
+params:
+  - name: midiNote
+    description: |
+      <p>The number of a MIDI note</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let midiNotes = [60, 64, 67, 72];
+    let noteIndex = 0;
+    let midiVal, freq;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(startSound);
+      osc = new p5.TriOsc();
+      env = new p5.Envelope();
+    }
+
+    function draw() {
+      background(220);
+      text('tap to play', 10, 20);
+      if (midiVal) {
+        text('MIDI: ' + midiVal, 10, 40);
+        text('Freq: ' + freq, 10, 60);
+      }
+    }
+
+    function startSound() {
+      // see also: userStartAudio();
+      osc.start();
+
+      midiVal = midiNotes[noteIndex % midiNotes.length];
+      freq = midiToFreq(midiVal);
+      osc.freq(freq);
+      env.ramp(osc, 0, 1.0, 0);
+
+      noteIndex++;
+    }
+    </code></div>
+return:
+  description: Frequency value of the given MIDI note
+  type: Number
+chainable: false
+---
+
+
+# midiToFreq
diff --git a/src/content/reference/en/p5/millis.mdx b/src/content/reference/en/p5/millis.mdx
new file mode 100644
index 0000000000..d6730cfc27
--- /dev/null
+++ b/src/content/reference/en/p5/millis.mdx
@@ -0,0 +1,34 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: millis
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>Returns the number of milliseconds (thousandths of a second) since
+
+  starting the sketch (when <code>setup()</code> is called). This information is
+  often
+
+  used for timing events and animation sequences.</p>
+line: 67
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let millisecond = millis();
+    text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
+    describe('number of milliseconds since sketch has started displayed');
+    </code>
+    </div>
+return:
+  description: the number of milliseconds since starting the sketch
+  type: Number
+chainable: false
+---
+
+
+# millis
diff --git a/src/content/reference/en/p5/min.mdx b/src/content/reference/en/p5/min.mdx
new file mode 100644
index 0000000000..a970d25a6b
--- /dev/null
+++ b/src/content/reference/en/p5/min.mdx
@@ -0,0 +1,105 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: min
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Returns the smallest value in a sequence of numbers.</p>
+
+  <p>The version of <code>min()</code> with one parameter interprets it as an
+  array of
+
+  numbers and returns the smallest number.</p>
+
+  <p>The version of <code>min()</code> with two or more parameters interprets
+  them as
+
+  individual numbers and returns the smallest number.</p>
+line: 488
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let m = min(10, 20);
+
+    text(m, 50, 50);
+
+
+    describe('The number 10 written in the middle of a gray square.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let m = min([10, 20]);
+
+    text(m, 50, 50);
+
+
+    describe('The number 10 written in the middle of a gray square.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let numbers = [2, 1, 5, 4, 8, 9];
+
+
+    // Draw all of the numbers in the array.
+
+    noStroke();
+
+    let spacing = 15;
+
+    numbers.forEach((n, index) => {
+      let x = index * spacing;
+      let y = 25;
+      text(n, x, y);
+    });
+
+
+    // Draw the minimum value in the array.
+
+    let m = min(numbers);
+
+    let minX = 33;
+
+    let minY = 80;
+
+
+    textSize(32);
+
+    text(m, minX, minY);
+
+
+    describe('The numbers 2 1 5 4 8 9 are written in small text at the top of a
+    gray square. The number 1 is written in large text at the center of the
+    square.');
+
+    </code>
+
+    </div>
+return:
+  description: minimum number.
+  type: Number
+chainable: false
+---
+
+
+# min
diff --git a/src/content/reference/en/p5/minute.mdx b/src/content/reference/en/p5/minute.mdx
new file mode 100644
index 0000000000..fa08a33636
--- /dev/null
+++ b/src/content/reference/en/p5/minute.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: minute
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>p5.js communicates with the clock on your computer. The <a
+  href="#/p5/minute">minute()</a> function
+
+  returns the current minute as a value from 0 - 59.</p>
+line: 48
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let m = minute();
+    text('Current minute: \n' + m, 5, 50);
+    describe('Current minute is displayed');
+    </code>
+    </div>
+return:
+  description: the current minute
+  type: Integer
+chainable: false
+---
+
+
+# minute
diff --git a/src/content/reference/en/p5/model.mdx b/src/content/reference/en/p5/model.mdx
new file mode 100644
index 0000000000..f1e08804f3
--- /dev/null
+++ b/src/content/reference/en/p5/model.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: model
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: |
+  <p>Render a 3d model to the screen.</p>
+line: 636
+params:
+  - name: model
+    description: |
+      <p>Loaded 3d model to be rendered</p>
+    type: p5.Geometry
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    //draw a spinning octahedron
+    let octahedron;
+
+    function preload() {
+      octahedron = loadModel('assets/octahedron.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('Vertically rotating 3-d octahedron.');
+    }
+
+    function draw() {
+      background(200);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      model(octahedron);
+    }
+    </code>
+    </div>
+alt: Vertically rotating 3-d octahedron.
+chainable: false
+---
+
+
+# model
diff --git a/src/content/reference/en/p5/month.mdx b/src/content/reference/en/p5/month.mdx
new file mode 100644
index 0000000000..3b3bcabb67
--- /dev/null
+++ b/src/content/reference/en/p5/month.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: month
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>p5.js communicates with the clock on your computer. The <a
+  href="#/p5/month">month()</a> function
+
+  returns the current month as a value from 1 - 12.</p>
+line: 92
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let m = month();
+    text('Current month: \n' + m, 5, 50);
+    describe('Current month is displayed');
+    </code>
+    </div>
+return:
+  description: the current month
+  type: Integer
+chainable: false
+---
+
+
+# month
diff --git a/src/content/reference/en/p5/mouseButton.mdx b/src/content/reference/en/p5/mouseButton.mdx
new file mode 100644
index 0000000000..1ee24e7256
--- /dev/null
+++ b/src/content/reference/en/p5/mouseButton.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseButton
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>p5 automatically tracks if the mouse button is pressed and which
+  button is pressed. The value of the system variable mouseButton is either
+  LEFT, RIGHT, or CENTER depending on which button was pressed last.
+  Warning: different browsers may track mouseButton differently.</p>
+line: 341
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(237, 34, 93);
+      fill(0);
+
+      if (mouseIsPressed === true) {
+        if (mouseButton === LEFT) {
+          ellipse(50, 50, 50, 50);
+        }
+        if (mouseButton === RIGHT) {
+          rect(25, 25, 50, 50);
+        }
+        if (mouseButton === CENTER) {
+          triangle(23, 75, 50, 20, 78, 75);
+        }
+      }
+
+      print(mouseButton);
+      describe(`50-by-50 black ellipse appears on center of fuchsia
+        canvas on mouse click/press.`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseButton
diff --git a/src/content/reference/en/p5/mouseClicked.mdx b/src/content/reference/en/p5/mouseClicked.mdx
new file mode 100644
index 0000000000..bf26df51fd
--- /dev/null
+++ b/src/content/reference/en/p5/mouseClicked.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseClicked
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The <a href="#/p5/mouseClicked">mouseClicked()</a> function is called once
+  after a mouse button has been
+
+  pressed and then released.<br><br>
+
+  Browsers handle clicks differently, so this function is only guaranteed to be
+
+  run when the left mouse button is clicked. To handle other mouse buttons
+
+  being pressed or released, see <a href="#/p5/mousePressed">mousePressed()</a>
+  or <a href="#/p5/mouseReleased">mouseReleased()</a>.<br><br>
+
+  Browsers may have different default
+
+  behaviors attached to various mouse events. To prevent any default
+
+  behavior for this event, add "return false" to the end of the function.</p>
+line: 760
+params:
+  - name: event
+    description: |
+      <p>optional MouseEvent callback argument.</p>
+    type: MouseEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click within the image to change
+    // the value of the rectangle
+    // after the mouse has been clicked
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe('black 50-by-50 rect turns white with mouse click/press.');
+    }
+
+    function mouseClicked() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function mouseClicked() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a MouseEvent object
+    // as a callback argument
+    function mouseClicked(event) {
+      console.log(event);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseClicked
diff --git a/src/content/reference/en/p5/mouseDragged.mdx b/src/content/reference/en/p5/mouseDragged.mdx
new file mode 100644
index 0000000000..f073b93cc1
--- /dev/null
+++ b/src/content/reference/en/p5/mouseDragged.mdx
@@ -0,0 +1,78 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseDragged
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The <a href="#/p5/mouseDragged">mouseDragged()</a> function is called once
+  every time the mouse moves and
+
+  a mouse button is pressed. If no <a
+  href="#/p5/mouseDragged">mouseDragged()</a> function is defined, the
+
+  <a href="#/p5/touchMoved">touchMoved()</a> function will be called instead if
+  it is defined.<br><br>
+
+  Browsers may have different default
+
+  behaviors attached to various mouse events. To prevent any default
+
+  behavior for this event, add "return false" to the end of the function.</p>
+line: 521
+params:
+  - name: event
+    description: |
+      <p>optional MouseEvent callback argument.</p>
+    type: MouseEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Drag the mouse across the page
+    // to change its value
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`black 50-by-50 rect turns lighter with mouse click and
+        drag until white, resets`);
+    }
+    function mouseDragged() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function mouseDragged() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a MouseEvent object
+    // as a callback argument
+    function mouseDragged(event) {
+      console.log(event);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseDragged
diff --git a/src/content/reference/en/p5/mouseIsPressed.mdx b/src/content/reference/en/p5/mouseIsPressed.mdx
new file mode 100644
index 0000000000..49f7996a47
--- /dev/null
+++ b/src/content/reference/en/p5/mouseIsPressed.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseIsPressed
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>The boolean system variable mouseIsPressed is true if the mouse is pressed
+  and false if not.</p>
+line: 378
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(237, 34, 93);
+      fill(0);
+
+      if (mouseIsPressed === true) {
+        ellipse(50, 50, 50, 50);
+      } else {
+        rect(25, 25, 50, 50);
+      }
+
+      print(mouseIsPressed);
+      describe(`black 50-by-50 rect becomes ellipse with mouse click/press.
+        fuchsia background.`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseIsPressed
diff --git a/src/content/reference/en/p5/mouseMoved.mdx b/src/content/reference/en/p5/mouseMoved.mdx
new file mode 100644
index 0000000000..68dea0f7e4
--- /dev/null
+++ b/src/content/reference/en/p5/mouseMoved.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseMoved
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The <a href="#/p5/mouseMoved">mouseMoved()</a> function is called every
+  time the mouse moves and a mouse
+
+  button is not pressed.<br><br>
+
+  Browsers may have different default
+
+  behaviors attached to various mouse events. To prevent any default
+
+  behavior for this event, add "return false" to the end of the method.</p>
+line: 469
+params:
+  - name: event
+    description: |
+      <p>optional MouseEvent callback argument.</p>
+    type: MouseEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move the mouse across the page
+    // to change its value
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`black 50-by-50 rect becomes lighter with mouse movements until
+      white then resets no image displayed`);
+    }
+    function mouseMoved() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function mouseMoved() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a MouseEvent object
+    // as a callback argument
+    function mouseMoved(event) {
+      console.log(event);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseMoved
diff --git a/src/content/reference/en/p5/mousePressed.mdx b/src/content/reference/en/p5/mousePressed.mdx
new file mode 100644
index 0000000000..a6576a4a4d
--- /dev/null
+++ b/src/content/reference/en/p5/mousePressed.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mousePressed
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The <a href="#/p5/mousePressed">mousePressed()</a> function is called once
+  after every time a mouse button
+
+  is pressed. The mouseButton variable (see the related reference entry)
+
+  can be used to determine which button has been pressed. If no
+
+  <a href="#/p5/mousePressed">mousePressed()</a> function is defined, the <a
+  href="#/p5/touchStarted">touchStarted()</a> function will be
+
+  called instead if it is defined.<br><br>
+
+  Browsers may have different default
+
+  behaviors attached to various mouse events. To prevent any default
+
+  behavior for this event, add "return false" to the end of the function.</p>
+line: 599
+params:
+  - name: event
+    description: |
+      <p>optional MouseEvent callback argument.</p>
+    type: MouseEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click anywhere in the webpage to change
+    // the color value of the rectangle
+
+    let colorValue = 0;
+    function draw() {
+      fill(colorValue);
+      rect(25, 25, 50, 50);
+      describe('black 50-by-50 rect turns white with mouse click/press.');
+    }
+    function mousePressed() {
+      if (colorValue === 0) {
+        colorValue = 255;
+      } else {
+        colorValue = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function mousePressed() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a MouseEvent object
+    // as a callback argument
+    function mousePressed(event) {
+      console.log(event);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mousePressed
diff --git a/src/content/reference/en/p5/mouseReleased.mdx b/src/content/reference/en/p5/mouseReleased.mdx
new file mode 100644
index 0000000000..e931c1579b
--- /dev/null
+++ b/src/content/reference/en/p5/mouseReleased.mdx
@@ -0,0 +1,78 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseReleased
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The <a href="#/p5/mouseReleased">mouseReleased()</a> function is called
+  every time a mouse button is
+
+  released. If no <a href="#/p5/mouseReleased">mouseReleased()</a> function is
+  defined, the <a href="#/p5/touchEnded">touchEnded()</a>
+
+  function will be called instead if it is defined.<br><br>
+
+  Browsers may have different default
+
+  behaviors attached to various mouse events. To prevent any default
+
+  behavior for this event, add "return false" to the end of the function.</p>
+line: 680
+params:
+  - name: event
+    description: |
+      <p>optional MouseEvent callback argument.</p>
+    type: MouseEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click within the image to change
+    // the value of the rectangle
+    // after the mouse has been clicked
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe('black 50-by-50 rect turns white with mouse click/press.');
+    }
+    function mouseReleased() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function mouseReleased() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a MouseEvent object
+    // as a callback argument
+    function mouseReleased(event) {
+      console.log(event);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseReleased
diff --git a/src/content/reference/en/p5/mouseWheel.mdx b/src/content/reference/en/p5/mouseWheel.mdx
new file mode 100644
index 0000000000..2daacc7364
--- /dev/null
+++ b/src/content/reference/en/p5/mouseWheel.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseWheel
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The function <a href="#/p5/mouseWheel">mouseWheel()</a> is executed every
+  time a vertical mouse wheel
+
+  event is detected either triggered by an actual mouse wheel or by a
+
+  touchpad.<br><br>
+
+  The event.delta property returns the amount the mouse wheel
+
+  have scrolled. The values can be positive or negative depending on the
+
+  scroll direction (on macOS with "natural" scrolling enabled, the signs
+
+  are inverted).<br><br>
+
+  Browsers may have different default behaviors attached to various
+
+  mouse events. To prevent any default behavior for this event, add
+
+  "return false" to the end of the method.<br><br>
+
+  Due to the current support of the "wheel" event on Safari, the function
+
+  may only work as expected if "return false" is included while using
+  Safari.</p>
+line: 908
+params:
+  - name: event
+    description: |
+      <p>optional WheelEvent callback argument.</p>
+    type: WheelEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let pos = 25;
+
+    function draw() {
+      background(237, 34, 93);
+      fill(0);
+      rect(25, pos, 50, 50);
+      describe(`black 50-by-50 rect moves up and down with vertical scroll.
+        fuchsia background`);
+    }
+
+    function mouseWheel(event) {
+      print(event.delta);
+      //move the square according to the vertical scroll amount
+      pos += event.delta;
+      //uncomment to block page scrolling
+      //return false;
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseWheel
diff --git a/src/content/reference/en/p5/mouseX.mdx b/src/content/reference/en/p5/mouseX.mdx
new file mode 100644
index 0000000000..618dc0e93f
--- /dev/null
+++ b/src/content/reference/en/p5/mouseX.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>The system variable mouseX always contains the current horizontal
+  position of the mouse, relative to (0, 0) of the canvas. The value at
+  the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+  If touch is used instead of mouse input, mouseX will hold the x value
+  of the most recent touch point.</p>
+line: 80
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move the mouse across the canvas
+    function draw() {
+      background(244, 248, 252);
+      line(mouseX, 0, mouseX, 100);
+      describe('horizontal black line moves left and right with mouse x-position');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseX
diff --git a/src/content/reference/en/p5/mouseY.mdx b/src/content/reference/en/p5/mouseY.mdx
new file mode 100644
index 0000000000..e504359935
--- /dev/null
+++ b/src/content/reference/en/p5/mouseY.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: mouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>The system variable mouseY always contains the current vertical
+  position of the mouse, relative to (0, 0) of the canvas. The value at
+  the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+  If touch is used instead of mouse input, mouseY will hold the y value
+  of the most recent touch point.</p>
+line: 104
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move the mouse across the canvas
+    function draw() {
+      background(244, 248, 252);
+      line(0, mouseY, 100, mouseY);
+      describe('vertical black line moves up and down with mouse y-position');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# mouseY
diff --git a/src/content/reference/en/p5/movedX.mdx b/src/content/reference/en/p5/movedX.mdx
new file mode 100644
index 0000000000..5b9c08484f
--- /dev/null
+++ b/src/content/reference/en/p5/movedX.mdx
@@ -0,0 +1,41 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: movedX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The variable movedX contains the horizontal movement of the mouse since the
+  last frame</p>
+line: 12
+itemtype: property
+class: p5
+example:
+  - |2-
+
+     <div class="notest">
+     <code>
+     let x = 50;
+     function setup() {
+       rectMode(CENTER);
+     }
+    function draw() {
+       if (x > 48) {
+         x -= 2;
+       } else if (x < 48) {
+         x += 2;
+       }
+       x += floor(movedX / 5);
+       background(237, 34, 93);
+       fill(0);
+       rect(x, 50, 50, 50);
+       describe(`box moves left and right according to mouse movement
+         then slowly back towards the center`);
+     }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# movedX
diff --git a/src/content/reference/en/p5/movedY.mdx b/src/content/reference/en/p5/movedY.mdx
new file mode 100644
index 0000000000..c1dc03f53b
--- /dev/null
+++ b/src/content/reference/en/p5/movedY.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: movedY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The variable movedY contains the vertical movement of the mouse since the
+  last frame</p>
+line: 43
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    let y = 50;
+    function setup() {
+      rectMode(CENTER);
+    }
+
+    function draw() {
+      if (y > 48) {
+        y -= 2;
+      } else if (y < 48) {
+        y += 2;
+      }
+      y += floor(movedY / 5);
+      background(237, 34, 93);
+      fill(0);
+      rect(50, y, 50, 50);
+      describe(`box moves up and down according to mouse movement then
+        slowly back towards the center`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# movedY
diff --git a/src/content/reference/en/p5/nf.mdx b/src/content/reference/en/p5/nf.mdx
new file mode 100644
index 0000000000..e92b806625
--- /dev/null
+++ b/src/content/reference/en/p5/nf.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: nf
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Utility function for formatting numbers into strings. There are two
+
+  versions: one for formatting floats, and one for formatting ints.</p>
+
+  <p>The values for the digits, left, and right parameters should always
+
+  be positive integers.</p>
+
+  <p>(NOTE): Be cautious when using left and right parameters as it prepends
+  numbers of 0's if the parameter
+
+  if greater than the current length of the number.</p>
+
+  <p>For example if number is 123.2 and left parameter passed is 4 which is
+  greater than length of 123
+
+  (integer part) i.e 3 than result will be 0123.2. Same case for right parameter
+  i.e. if right is 3 than
+
+  the result will be 123.200.</p>
+line: 126
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      let num1 = 321;
+      let num2 = -1321;
+
+      noStroke();
+      fill(0);
+      textSize(16);
+
+      text(nf(num1, 4, 2), 10, 30);
+      text(nf(num2, 4, 2), 10, 80);
+      // Draw dividing line
+      stroke(120);
+      line(0, 50, width, 50);
+
+      describe('“0321.00” middle top, “-1321.00” middle bottom canvas');
+    }
+    </code>
+    </div>
+return:
+  description: formatted String
+  type: String
+chainable: false
+---
+
+
+# nf
diff --git a/src/content/reference/en/p5/nfc.mdx b/src/content/reference/en/p5/nfc.mdx
new file mode 100644
index 0000000000..80cf8e9c38
--- /dev/null
+++ b/src/content/reference/en/p5/nfc.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: nfc
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: |
+  <p>Utility function for formatting numbers into strings and placing
+  appropriate commas to mark units of 1000. There are two versions: one
+  for formatting ints, and one for formatting an array of ints. The value
+  for the right parameter should always be a positive integer.</p>
+line: 216
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      let num = 11253106.115;
+      let numArr = [1, 1, 2];
+
+      noStroke();
+      fill(0);
+      textSize(12);
+
+      // Draw formatted numbers
+      text(nfc(num, 4), 10, 30);
+      text(nfc(numArr, 2), 10, 80);
+
+      // Draw dividing line
+      stroke(120);
+      line(0, 50, width, 50);
+
+      describe('“11,253,106.115” top middle and “1.00,1.00,2.00” displayed bottom mid');
+    }
+    </code>
+    </div>
+return:
+  description: formatted String
+  type: String
+chainable: false
+---
+
+
+# nfc
diff --git a/src/content/reference/en/p5/nfp.mdx b/src/content/reference/en/p5/nfp.mdx
new file mode 100644
index 0000000000..94085c0a4b
--- /dev/null
+++ b/src/content/reference/en/p5/nfp.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: nfp
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Utility function for formatting numbers into strings. Similar to <a
+  href="#/p5/nf">nf()</a> but
+
+  puts a "+" in front of positive numbers and a "-" in front of negative
+
+  numbers. There are two versions: one for formatting floats, and one for
+
+  formatting ints. The values for left, and right parameters
+
+  should always be positive integers.</p>
+line: 289
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      let num1 = 11253106.115;
+      let num2 = -11253106.115;
+
+      noStroke();
+      fill(0);
+      textSize(12);
+
+      // Draw formatted numbers
+      text(nfp(num1, 4, 2), 10, 30);
+      text(nfp(num2, 4, 2), 10, 80);
+
+      // Draw dividing line
+      stroke(120);
+      line(0, 50, width, 50);
+
+      describe('“+11253106.11” top middle and “-11253106.11” displayed bottom middle');
+    }
+    </code>
+    </div>
+return:
+  description: formatted String
+  type: String
+chainable: false
+---
+
+
+# nfp
diff --git a/src/content/reference/en/p5/nfs.mdx b/src/content/reference/en/p5/nfs.mdx
new file mode 100644
index 0000000000..2a99e22b06
--- /dev/null
+++ b/src/content/reference/en/p5/nfs.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: nfs
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Utility function for formatting numbers into strings. Similar to <a
+  href="#/p5/nf">nf()</a> but
+
+  puts an additional "_" (space) in front of positive numbers just in case to
+  align it with negative
+
+  numbers which includes "-" (minus) sign.</p>
+
+  <p>The main usecase of nfs() can be seen when one wants to align the digits
+  (place values) of a non-negative
+
+  number with some negative number (See the example to get a clear picture).
+
+  There are two versions: one for formatting float, and one for formatting
+  int.</p>
+
+  <p>The values for the digits, left, and right parameters should always be
+  positive integers.</p>
+
+  <p>(IMP): The result on the canvas basically the expected alignment can vary
+  based on the typeface you are using.</p>
+
+  <p>(NOTE): Be cautious when using left and right parameters as it prepends
+  numbers of 0's if the parameter
+
+  if greater than the current length of the number.</p>
+
+  <p>For example if number is 123.2 and left parameter passed is 4 which is
+  greater than length of 123
+
+  (integer part) i.e 3 than result will be 0123.2. Same case for right parameter
+  i.e. if right is 3 than
+
+  the result will be 123.200.</p>
+line: 350
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      let num1 = 321;
+      let num2 = -1321;
+
+      noStroke();
+      fill(0);
+      textSize(16);
+
+      // nfs() aligns num1 (positive number) with num2 (negative number) by
+      // adding a blank space in front of the num1 (positive number)
+      // [left = 4] in num1 add one 0 in front, to align the digits with num2
+      // [right = 2] in num1 and num2 adds two 0's after both numbers
+      // To see the differences check the example of nf() too.
+      text(nfs(num1, 4, 2), 10, 30);
+      text(nfs(num2, 4, 2), 10, 80);
+      // Draw dividing line
+      stroke(120);
+      line(0, 50, width, 50);
+
+      describe('“0321.00” top middle and “-1321.00” displayed bottom middle');
+    }
+    </code>
+    </div>
+return:
+  description: formatted String
+  type: String
+chainable: false
+---
+
+
+# nfs
diff --git a/src/content/reference/en/p5/noCanvas.mdx b/src/content/reference/en/p5/noCanvas.mdx
new file mode 100644
index 0000000000..dffc0a0208
--- /dev/null
+++ b/src/content/reference/en/p5/noCanvas.mdx
@@ -0,0 +1,28 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Removes the default canvas for a p5 sketch that doesn't require a
+  canvas</p>
+line: 222
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      noCanvas();
+    }
+    </code>
+    </div>
+alt: no image displayed
+chainable: false
+---
+
+
+# noCanvas
diff --git a/src/content/reference/en/p5/noCursor.mdx b/src/content/reference/en/p5/noCursor.mdx
new file mode 100644
index 0000000000..4bae90ddf3
--- /dev/null
+++ b/src/content/reference/en/p5/noCursor.mdx
@@ -0,0 +1,35 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noCursor
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Hides the cursor from view.</p>
+line: 440
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Hide the cursor.
+      noCursor();
+    }
+
+    function draw() {
+      background(200);
+
+      circle(mouseX, mouseY, 10);
+
+      describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# noCursor
diff --git a/src/content/reference/en/p5/noDebugMode.mdx b/src/content/reference/en/p5/noDebugMode.mdx
new file mode 100644
index 0000000000..29311fe087
--- /dev/null
+++ b/src/content/reference/en/p5/noDebugMode.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noDebugMode
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: |
+  <p>Turns off debugMode() in a 3D sketch.</p>
+line: 602
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      normalMaterial();
+      debugMode();
+      describe(
+        'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
+      );
+    }
+
+    function draw() {
+      background(200);
+      orbitControl();
+      box(15, 30);
+      // Press the spacebar to turn debugMode off!
+      if (keyIsDown(32)) {
+        noDebugMode();
+      }
+    }
+    </code>
+    </div>
+alt: |-
+  a 3D box is centered on a grid in a 3D sketch. an icon
+  indicates the direction of each axis: a red line points +X,
+  a green line +Y, and a blue line +Z. the grid and icon disappear when the
+  spacebar is pressed.
+chainable: false
+---
+
+
+# noDebugMode
diff --git a/src/content/reference/en/p5/noErase.mdx b/src/content/reference/en/p5/noErase.mdx
new file mode 100644
index 0000000000..d7fffaf264
--- /dev/null
+++ b/src/content/reference/en/p5/noErase.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noErase
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: |
+  <p>Ends erasing that was started with <a href="#/p5/erase">erase()</a>.
+  The <a href="#/p5/fill">fill()</a>, <a href="#/p5/stroke">stroke()</a>, and
+  <a href="#/p5/blendMode">blendMode()</a> settings will return to what they
+  were prior to calling <a href="#/p5/erase">erase()</a>.</p>
+line: 1086
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    background(235, 145, 15);
+
+    noStroke();
+
+    fill(30, 45, 220);
+
+    rect(30, 10, 10, 80);
+
+    erase();
+
+    circle(50, 50, 60);
+
+    noErase();
+
+    rect(70, 10, 10, 80);
+
+    describe('An orange canvas with two tall blue rectangles. A circular hole in
+    the center erases the rectangle on the left but not the one on the right.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# noErase
diff --git a/src/content/reference/en/p5/noFill.mdx b/src/content/reference/en/p5/noFill.mdx
new file mode 100644
index 0000000000..ed76870f98
--- /dev/null
+++ b/src/content/reference/en/p5/noFill.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noFill
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: |
+  <p>Disables setting the interior color of shapes. This is the same as making
+  the fill completely transparent. If both
+  <a href="#/p5/noStroke">noStroke()</a> and
+  <a href="#/p5/noFill">noFill()</a> are called, nothing will be drawn to the
+  screen.</p>
+line: 747
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    square(32, 10, 35);
+
+    noFill();
+
+    square(32, 55, 35);
+
+    describe('A white square on top of an empty square. Both squares have black
+    outlines.');
+
+    </code>
+
+    </div>
+
+
+    <div modernizr='webgl'>
+
+    <code>
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+
+    function draw() {
+      background(0);
+      noFill();
+      stroke(100, 100, 240);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(45, 45, 45);
+      describe('A purple cube wireframe spinning on a black canvas.');
+    }
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# noFill
diff --git a/src/content/reference/en/p5/noLights.mdx b/src/content/reference/en/p5/noLights.mdx
new file mode 100644
index 0000000000..b56b517363
--- /dev/null
+++ b/src/content/reference/en/p5/noLights.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noLights
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: |
+  <p>Removes all lights present in a sketch.</p>
+  <p>All subsequent geometry is rendered without lighting (until a new
+  light is created with a call to one of the lighting functions
+  (<a href="#/p5/lights">lights()</a>,
+  <a href="#/p5/ambientLight">ambientLight()</a>,
+  <a href="#/p5/directionalLight">directionalLight()</a>,
+  <a href="#/p5/pointLight">pointLight()</a>,
+  <a href="#/p5/spotLight">spotLight()</a>).</p>
+line: 1108
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe(
+        'Three white spheres. Each appears as a different color due to lighting.'
+      );
+    }
+    function draw() {
+      background(200);
+      noStroke();
+
+      ambientLight(255, 0, 0);
+      translate(-30, 0, 0);
+      ambientMaterial(255);
+      sphere(13);
+
+      noLights();
+      translate(30, 0, 0);
+      ambientMaterial(255);
+      sphere(13);
+
+      ambientLight(0, 255, 0);
+      translate(30, 0, 0);
+      ambientMaterial(255);
+      sphere(13);
+    }
+    </code>
+    </div>
+alt: |-
+  Three white spheres. Each appears as a different
+  color due to lighting.
+chainable: true
+---
+
+
+# noLights
diff --git a/src/content/reference/en/p5/noLoop.mdx b/src/content/reference/en/p5/noLoop.mdx
new file mode 100644
index 0000000000..ce4d70ae8c
--- /dev/null
+++ b/src/content/reference/en/p5/noLoop.mdx
@@ -0,0 +1,101 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noLoop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Stops p5.js from continuously executing the code within <a
+  href="#/p5/draw">draw()</a>.
+
+  If <a href="#/p5/loop">loop()</a> is called, the code in <a
+  href="#/p5/draw">draw()</a>
+
+  begins to run continuously again. If using <a href="#/p5/noLoop">noLoop()</a>
+
+  in <a href="#/p5/setup">setup()</a>, it should be the last line inside the
+  block.</p>
+
+  <p>When <a href="#/p5/noLoop">noLoop()</a> is used, it's not possible to
+  manipulate
+
+  or access the screen inside event handling functions such as
+
+  <a href="#/p5/mousePressed">mousePressed()</a> or
+
+  <a href="#/p5/keyPressed">keyPressed()</a>. Instead, use those functions to
+
+  call <a href="#/p5/redraw">redraw()</a> or <a href="#/p5/loop">loop()</a>,
+
+  which will run <a href="#/p5/draw">draw()</a>, which can update the screen
+
+  properly. This means that when <a href="#/p5/noLoop">noLoop()</a> has been
+
+  called, no drawing can happen, and functions like <a
+  href="#/p5/saveFrames">saveFrames()</a>
+
+  or <a href="#/p5/loadPixels">loadPixels()</a> may not be used.</p>
+
+  <p>Note that if the sketch is resized, <a href="#/p5/redraw">redraw()</a> will
+
+  be called to update the sketch, even after <a href="#/p5/noLoop">noLoop()</a>
+
+  has been specified. Otherwise, the sketch would enter an odd state until
+
+  <a href="#/p5/loop">loop()</a> was called.</p>
+
+  <p>Use <a href="#/p5/isLooping">isLooping()</a> to check the current state of
+  <a href="#/p5/loop">loop()</a>.</p>
+line: 9
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+      noLoop();
+    }
+
+    function draw() {
+      line(10, 10, 90, 90);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let x = 0;
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      background(204);
+      x = x + 0.1;
+      if (x > width) {
+        x = 0;
+      }
+      line(x, 0, x, height);
+    }
+
+    function mousePressed() {
+      noLoop();
+    }
+
+    function mouseReleased() {
+      loop();
+    }
+    </code>
+    </div>
+alt: |-
+  113 pixel long line extending from top-left to bottom right of canvas.
+  horizontal line moves slowly from left. Loops but stops on mouse press.
+chainable: false
+---
+
+
+# noLoop
diff --git a/src/content/reference/en/p5/noSmooth.mdx b/src/content/reference/en/p5/noSmooth.mdx
new file mode 100644
index 0000000000..76a06d19f3
--- /dev/null
+++ b/src/content/reference/en/p5/noSmooth.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noSmooth
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Draws all geometry with jagged (aliased) edges.</p>
+
+  <p><a href="#/p5/smooth">smooth()</a> is active by default in 2D mode. It's
+  necessary to call
+
+  <a href="#/p5/noSmooth">noSmooth()</a> to disable smoothing of geometry,
+  images, and fonts.</p>
+
+  <p>In WebGL mode, <a href="#/p5/noSmooth">noSmooth()</a> is active by default.
+  It's necessary
+
+  to call <a href="#/p5/smooth">smooth()</a> to draw smooth (antialiased)
+  edges.</p>
+line: 73
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    background(0);
+    noStroke();
+    smooth();
+    ellipse(30, 48, 36, 36);
+    noSmooth();
+    ellipse(70, 48, 36, 36);
+    describe('Two pixelated white circles on a black background.');
+    </code>
+    </div>
+chainable: true
+---
+
+
+# noSmooth
diff --git a/src/content/reference/en/p5/noStroke.mdx b/src/content/reference/en/p5/noStroke.mdx
new file mode 100644
index 0000000000..3c8d2e3faf
--- /dev/null
+++ b/src/content/reference/en/p5/noStroke.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noStroke
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: |
+  <p>Disables drawing the stroke (outline). If both
+  <a href="#/p5/noStroke">noStroke()</a> and
+  <a href="#/p5/noFill">noFill()</a> are called, nothing will be drawn to the
+  screen.</p>
+line: 789
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noStroke();
+    square(20, 20, 60);
+    describe('A white square with no outline.');
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(0);
+      noStroke();
+      fill(240, 150, 150);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(45, 45, 45);
+      describe('A pink cube with no edge outlines spinning on a black canvas.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# noStroke
diff --git a/src/content/reference/en/p5/noTint.mdx b/src/content/reference/en/p5/noTint.mdx
new file mode 100644
index 0000000000..84ea66b481
--- /dev/null
+++ b/src/content/reference/en/p5/noTint.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noTint
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: |
+  <p>Removes the current tint set by <a href="#/p5/tint">tint()</a> and restores
+  images to their original colors.</p>
+line: 1223
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+    function setup() {
+      tint('red');
+      image(img, 0, 0);
+      noTint();
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# noTint
diff --git a/src/content/reference/en/p5/noise.mdx b/src/content/reference/en/p5/noise.mdx
new file mode 100644
index 0000000000..2729f4f5fd
--- /dev/null
+++ b/src/content/reference/en/p5/noise.mdx
@@ -0,0 +1,222 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noise
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Returns random numbers that can be tuned to feel more organic. The values
+
+  returned will always be between 0 and 1.</p>
+
+  <p>Values returned by <a href="#/p5/random">random()</a> and
+
+  <a href="#/p5/randomGaussian">randomGaussian()</a> can change by large
+
+  amounts between function calls. By contrast, values returned by
+  <code>noise()</code>
+
+  can be made "smooth". Calls to <code>noise()</code> with similar inputs will
+  produce
+
+  similar outputs. <code>noise()</code> is used to create textures, motion,
+  shapes,
+
+  terrains, and so on. Ken Perlin invented <code>noise()</code> while animating
+  the
+
+  original <em>Tron</em> film in the 1980s.</p>
+
+  <p><code>noise()</code> returns the same value for a given input while a
+  sketch is
+
+  running. It produces different results each time a sketch runs. The
+
+  <a href="#/p5/noiseSeed">noiseSeed()</a> function can be used to generate
+
+  the same sequence of Perlin noise values each time a sketch runs.</p>
+
+  <p>The character of the noise can be adjusted in two ways. The first way is to
+
+  scale the inputs. <code>noise()</code> interprets inputs as coordinates. The
+  sequence
+
+  of noise values will be smoother when the input coordinates are closer. The
+
+  second way is to use the <a href="#/p5/noiseDetail">noiseDetail()</a>
+
+  function.</p>
+
+  <p>The version of <code>noise()</code> with one parameter computes noise
+  values in one
+
+  dimension. This dimension can be thought of as space, as in
+  <code>noise(x)</code>, or
+
+  time, as in <code>noise(t)</code>.</p>
+
+  <p>The version of <code>noise()</code> with two parameters computes noise
+  values in two
+
+  dimensions. These dimensions can be thought of as space, as in
+
+  <code>noise(x, y)</code>, or space and time, as in <code>noise(x,
+  t)</code>.</p>
+
+  <p>The version of <code>noise()</code> with three parameters computes noise
+  values in
+
+  three dimensions. These dimensions can be thought of as space, as in
+
+  <code>noise(x, y, z)</code>, or space and time, as in <code>noise(x, y,
+  t)</code>.</p>
+line: 36
+params:
+  - name: x
+    description: |
+      <p>x-coordinate in noise space.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate in noise space.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z-coordinate in noise space.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let x = 100 * noise(0.005 * frameCount);
+      let y = 100 * noise(0.005 * frameCount + 10000);
+
+      strokeWeight(5);
+      point(x, y);
+
+      describe('A black dot moves randomly on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let noiseLevel = 100;
+      let noiseScale = 0.005;
+      // Scale input coordinate.
+      let nt = noiseScale * frameCount;
+      // Compute noise value.
+      let x = noiseLevel * noise(nt);
+      let y = noiseLevel * noise(nt + 10000);
+      // Render.
+      strokeWeight(5);
+      point(x, y);
+
+      describe('A black dot moves randomly on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      let noiseLevel = 100;
+      let noiseScale = 0.02;
+      // Scale input coordinate.
+      let x = frameCount;
+      let nx = noiseScale * x;
+      // Compute noise value.
+      let y = noiseLevel * noise(nx);
+      // Render.
+      line(x, 0, x, y);
+
+      describe('A hilly terrain drawn in gray against a black sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let noiseLevel = 100;
+      let noiseScale = 0.002;
+      for (let x = 0; x < width; x += 1) {
+        // Scale input coordinates.
+        let nx = noiseScale * x;
+        let nt = noiseScale * frameCount;
+        // Compute noise value.
+        let y = noiseLevel * noise(nx, nt);
+        // Render.
+        line(x, 0, x, y);
+      }
+
+      describe('A calm sea drawn in gray against a black sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let noiseLevel = 255;
+    let noiseScale = 0.01;
+    for (let y = 0; y < height; y += 1) {
+      for (let x = 0; x < width; x += 1) {
+        // Scale input coordinates.
+        let nx = noiseScale * x;
+        let ny = noiseScale * y;
+        // Compute noise value.
+        let c = noiseLevel * noise(nx, ny);
+        // Render.
+        stroke(c);
+        point(x, y);
+      }
+    }
+
+    describe('A gray cloudy pattern.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      let noiseLevel = 255;
+      let noiseScale = 0.009;
+      for (let y = 0; y < height; y += 1) {
+        for (let x = 0; x < width; x += 1) {
+          // Scale input coordinates.
+          let nx = noiseScale * x;
+          let ny = noiseScale * y;
+          let nt = noiseScale * frameCount;
+          // Compute noise value.
+          let c = noiseLevel * noise(nx, ny, nt);
+          // Render.
+          stroke(c);
+          point(x, y);
+        }
+      }
+
+      describe('A gray cloudy pattern that changes.');
+    }
+    </code>
+    </div>
+return:
+  description: Perlin noise value at specified coordinates.
+  type: Number
+chainable: false
+---
+
+
+# noise
diff --git a/src/content/reference/en/p5/noiseDetail.mdx b/src/content/reference/en/p5/noiseDetail.mdx
new file mode 100644
index 0000000000..f6717a1812
--- /dev/null
+++ b/src/content/reference/en/p5/noiseDetail.mdx
@@ -0,0 +1,92 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noiseDetail
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Adjusts the character of the noise produced by the
+
+  <a href="#/p5/noise">noise()</a> function.</p>
+
+  <p>Perlin noise values are created by adding layers of noise together. The
+
+  noise layers, called octaves, are similar to harmonics in music. Lower
+
+  octaves contribute more to the output signal. They define the overall
+
+  intensity of the noise. Higher octaves create finer-grained details.</p>
+
+  <p>By default, noise values are created by combining four octaves. Each higher
+
+  octave contributes half as much (50% less) compared to its predecessor.
+
+  <code>noiseDetail()</code> changes the number of octaves and the falloff
+  amount. For
+
+  example, calling <code>noiseDetail(6, 0.25)</code> ensures that
+
+  <a href="#/p5/noise">noise()</a> will use six octaves. Each higher octave
+
+  will contribute 25% as much (75% less) compared to its predecessor. Falloff
+
+  values between 0 and 1 are valid. However, falloff values greater than 0.5
+
+  might result in noise values greater than 1.</p>
+line: 277
+params:
+  - name: lod
+    description: |
+      <p>number of octaves to be used by the noise.</p>
+    type: Number
+  - name: falloff
+    description: |
+      <p>falloff factor for each octave.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let noiseLevel = 255;
+
+    let noiseScale = 0.02;
+
+    for (let y = 0; y < height; y += 1) {
+      for (let x = 0; x < width / 2; x += 1) {
+        // Scale input coordinates.
+        let nx = noiseScale * x;
+        let ny = noiseScale * y;
+
+        // Compute noise value.
+        noiseDetail(6, 0.25);
+        let c = noiseLevel * noise(nx, ny);
+        // Render left side.
+        stroke(c);
+        point(x, y);
+
+        // Compute noise value.
+        noiseDetail(4, 0.5);
+        c = noiseLevel * noise(nx, ny);
+        // Render right side.
+        stroke(c);
+        point(x + width / 2, y);
+      }
+    }
+
+
+    describe('Two gray cloudy patterns. The pattern on the right is cloudier
+    than the pattern on the left.');
+
+    </code>
+
+    </div>
+chainable: false
+---
+
+
+# noiseDetail
diff --git a/src/content/reference/en/p5/noiseSeed.mdx b/src/content/reference/en/p5/noiseSeed.mdx
new file mode 100644
index 0000000000..08a2019aa0
--- /dev/null
+++ b/src/content/reference/en/p5/noiseSeed.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: noiseSeed
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Sets the seed value for <a href="#/p5/noise">noise()</a>. By default,
+
+  <a href="#/p5/noise">noise()</a> produces different results each time
+
+  a sketch is run. Calling <code>noiseSeed()</code> with a constant
+
+  argument, such as <code>noiseSeed(99)</code>, makes <a
+  href="#/p5/noise">noise()</a>
+
+  produce the same results each time a sketch is run.</p>
+line: 338
+params:
+  - name: seed
+    description: |
+      <p>seed value.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      noiseSeed(99);
+      background(255);
+    }
+
+    function draw() {
+      let noiseLevel = 100;
+      let noiseScale = 0.005;
+      // Scale input coordinate.
+      let nt = noiseScale * frameCount;
+      // Compute noise value.
+      let x = noiseLevel * noise(nt);
+      // Render.
+      line(x, 0, x, height);
+
+      describe('A black rectangle that grows randomly, first to the right and then to the left.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# noiseSeed
diff --git a/src/content/reference/en/p5/norm.mdx b/src/content/reference/en/p5/norm.mdx
new file mode 100644
index 0000000000..5635ba414e
--- /dev/null
+++ b/src/content/reference/en/p5/norm.mdx
@@ -0,0 +1,59 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: norm
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Maps a number from one range to a value between 0 and 1.</p>
+
+  <p>For example, <code>norm(2, 0, 10)</code> returns 0.2. 2's position in the
+  original
+
+  range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
+
+  is equivalent to calling <code>map(2, 0, 10, 0, 1)</code>.</p>
+
+  <p>Numbers outside of the original range are not constrained between 0 and 1.
+
+  Out-of-range values are often intentional and useful.</p>
+line: 566
+params:
+  - name: value
+    description: |
+      <p>incoming value to be normalized.</p>
+    type: Number
+  - name: start
+    description: |
+      <p>lower bound of the value's current range.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>upper bound of the value's current range.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      // Set the range for RGB values from 0 to 1.
+      colorMode(RGB, 1);
+
+      let r = norm(mouseX, 0, width);
+      background(r, 0, 0);
+
+      describe('A square changes color from black to red as the mouse moves from left to right.');
+    }
+    </code>
+    </div>
+return:
+  description: normalized number.
+  type: Number
+chainable: false
+---
+
+
+# norm
diff --git a/src/content/reference/en/p5/normal.mdx b/src/content/reference/en/p5/normal.mdx
new file mode 100644
index 0000000000..7a109df343
--- /dev/null
+++ b/src/content/reference/en/p5/normal.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: NORMAL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 601
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# NORMAL
diff --git a/src/content/reference/en/p5/normalMaterial.mdx b/src/content/reference/en/p5/normalMaterial.mdx
new file mode 100644
index 0000000000..490cbbc0a8
--- /dev/null
+++ b/src/content/reference/en/p5/normalMaterial.mdx
@@ -0,0 +1,40 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: normalMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: |
+  <p>Sets the current material as a normal material.</p>
+  <p>A normal material is not affected by light. It is often used as
+  a placeholder material when debugging.</p>
+  <p>Surfaces facing the X-axis become red, those facing the Y-axis
+  become green, and those facing the Z-axis become blue.</p>
+  <p>You can view more materials in this
+  <a href="https://p5js.org/examples/3d-materials.html">example</a>.</p>
+line: 824
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('Sphere with normal material');
+    }
+
+    function draw() {
+      background(200);
+      normalMaterial();
+      sphere(40);
+    }
+    </code>
+    </div>
+alt: Sphere with normal material
+chainable: true
+---
+
+
+# normalMaterial
diff --git a/src/content/reference/en/p5/number.mdx b/src/content/reference/en/p5/number.mdx
new file mode 100644
index 0000000000..11fe7de54e
--- /dev/null
+++ b/src/content/reference/en/p5/number.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: number
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A <a href="#/p5/number">number</a> is one of the 7 <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">primitive
+  data types</a> in Javascript.
+
+  A number can be a whole number or a decimal number.</p>
+
+  <p><a href="https://developer.mozilla.org/en-US/docs/Glossary/number">The MDN
+  entry for number</a></p>
+line: 331
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let num = 46.5;
+    console.log(typeof num); // prints 'number' to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# number
diff --git a/src/content/reference/en/p5/object.mdx b/src/content/reference/en/p5/object.mdx
new file mode 100644
index 0000000000..dadba9e743
--- /dev/null
+++ b/src/content/reference/en/p5/object.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: object
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">MDN's
+  object basics</a>:
+   An <a href="#/p5/object">object</a> is a collection of related data and/or
+   functionality (which usually consists of several variables and functions —
+   which are called properties and methods when they are inside objects.)</p>
+line: 351
+itemtype: property
+class: p5
+example:
+  - |2-
+
+     <div class='norender'>
+     <code>
+     let author = {
+       name: 'Ursula K Le Guin',
+       books: [
+         'The Left Hand of Darkness',
+         'The Dispossessed',
+         'A Wizard of Earthsea'
+       ]
+     };
+     console.log(author.name); // prints 'Ursula K Le Guin' to the console
+     </code>
+     </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# object
diff --git a/src/content/reference/en/p5/orbitControl.mdx b/src/content/reference/en/p5/orbitControl.mdx
new file mode 100644
index 0000000000..f6739d222e
--- /dev/null
+++ b/src/content/reference/en/p5/orbitControl.mdx
@@ -0,0 +1,100 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: orbitControl
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: |
+  <p>Allows movement around a 3D sketch using a mouse or trackpad or touch.
+  Left-clicking and dragging or swipe motion will rotate the camera position
+  about the center of the sketch, right-clicking and dragging or multi-swipe
+  will pan the camera position without rotation, and using the mouse wheel
+  (scrolling) or pinch in/out will move the camera further or closer
+  from the center of the sketch. This function can be called with parameters
+  dictating sensitivity to mouse/touch movement along the X and Y axes.
+  Calling this function without parameters is equivalent to calling
+  orbitControl(1,1). To reverse direction of movement in either axis,
+  enter a negative number for sensitivity.</p>
+line: 11
+params:
+  - name: sensitivityX
+    description: |
+      <p>sensitivity to mouse movement along X axis</p>
+    type: Number
+    optional: true
+  - name: sensitivityY
+    description: |
+      <p>sensitivity to mouse movement along Y axis</p>
+    type: Number
+    optional: true
+  - name: sensitivityZ
+    description: |
+      <p>sensitivity to scroll movement along Z axis</p>
+    type: Number
+    optional: true
+  - name: options
+    description: >
+      <p>An optional object that can contain additional settings,
+
+      disableTouchActions - Boolean, default value is true.
+
+      Setting this to true makes mobile interactions smoother by preventing
+
+      accidental interactions with the page while orbiting. But if you're
+      already
+
+      doing it via css or want the default touch actions, consider setting it to
+      false.
+
+      freeRotation - Boolean, default value is false.
+
+      By default, horizontal movement of the mouse or touch pointer rotates the
+      camera
+
+      around the y-axis, and vertical movement rotates the camera around the
+      x-axis.
+
+      But if setting this option to true, the camera always rotates in the
+      direction
+
+      the pointer is moving. For zoom and move, the behavior is the same
+      regardless of
+
+      true/false.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+      describe(
+        'Camera orbits around a box when mouse is hold-clicked & then moved.'
+      );
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+    }
+    function draw() {
+      background(200);
+
+      // If you execute the line commented out instead of next line, the direction of rotation
+      // will be the direction the mouse or touch pointer moves, not around the X or Y axis.
+      orbitControl();
+      // orbitControl(1, 1, 1, {freeRotation: true});
+
+      rotateY(0.5);
+      box(30, 50);
+    }
+    </code>
+    </div>
+alt: Camera orbits around a box when mouse is hold-clicked & then moved.
+chainable: true
+---
+
+
+# orbitControl
diff --git a/src/content/reference/en/p5/ortho.mdx b/src/content/reference/en/p5/ortho.mdx
new file mode 100644
index 0000000000..103f12991e
--- /dev/null
+++ b/src/content/reference/en/p5/ortho.mdx
@@ -0,0 +1,101 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: ortho
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets an orthographic projection for the current camera in a 3D sketch
+
+  and defines a box-shaped viewing frustum within which objects are seen.
+
+  In this projection, all objects with the same dimension appear the same
+
+  size, regardless of whether they are near or far from the camera.</p>
+
+  <p>The parameters to this function specify the viewing frustum where
+
+  left and right are the minimum and maximum x values, top and bottom are
+
+  the minimum and maximum y values, and near and far are the minimum and
+
+  maximum z values.</p>
+
+  <p>If no parameters are given, the following default is used:
+
+  ortho(-width/2, width/2, -height/2, height/2, 0, max(width, height) +
+  800).</p>
+line: 196
+params:
+  - name: left
+    description: |
+      <p>camera frustum left plane</p>
+    type: Number
+    optional: true
+  - name: right
+    description: |
+      <p>camera frustum right plane</p>
+    type: Number
+    optional: true
+  - name: bottom
+    description: |
+      <p>camera frustum bottom plane</p>
+    type: Number
+    optional: true
+  - name: top
+    description: |
+      <p>camera frustum top plane</p>
+    type: Number
+    optional: true
+  - name: near
+    description: |
+      <p>camera frustum near plane</p>
+    type: Number
+    optional: true
+  - name: far
+    description: |
+      <p>camera frustum far plane</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    //drag the mouse to look around!
+    //there's no vanishing point
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      ortho();
+      describe(
+        'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
+      );
+    }
+    function draw() {
+      background(200);
+      orbitControl();
+      normalMaterial();
+
+      rotateX(0.2);
+      rotateY(-0.2);
+      push();
+      translate(-15, 0, sin(frameCount / 30) * 65);
+      box(30);
+      pop();
+      push();
+      translate(15, 0, sin(frameCount / 30 + PI) * 65);
+      box(30);
+      pop();
+    }
+    </code>
+    </div>
+alt: >-
+  two 3D boxes move back and forth along same plane, rotating as mouse is
+  dragged.
+chainable: true
+---
+
+
+# ortho
diff --git a/src/content/reference/en/p5/outputVolume.mdx b/src/content/reference/en/p5/outputVolume.mdx
new file mode 100644
index 0000000000..470cd6a066
--- /dev/null
+++ b/src/content/reference/en/p5/outputVolume.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: outputVolume
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>Scale the output of all sound in this sketch</p>
+  Scaled between 0.0 (silence) and 1.0 (full volume).
+  1.0 is the maximum amplitude of a digital sound, so multiplying
+  by greater than 1.0 may cause digital distortion. To
+  fade, provide a <code>rampTime</code> parameter. For more
+  complex fades, see the Envelope class.
+
+  <p>Alternately, you can pass in a signal source such as an
+  oscillator to modulate the amplitude with an audio signal.</p>
+  <p><b>How This Works</b>: When you load the p5.sound module, it
+  creates a single instance of p5sound. All sound objects in this
+  module output to p5sound before reaching your computer's output.
+  So if you change the amplitude of p5sound, it impacts all of the
+  sound in this module.</p>
+
+  <p>If no value is provided, returns a Web Audio API Gain Node</p>
+line: 738
+params:
+  - name: volume
+    description: |
+      <p>Volume (amplitude) between 0.0
+                                         and 1.0 or modulating signal/oscillator</p>
+    type: Number|Object
+  - name: rampTime
+    description: |
+      <p>Fade for t seconds</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>Schedule this event to happen at
+                                     t seconds in the future</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+chainable: false
+---
+
+
+# outputVolume
diff --git a/src/content/reference/en/p5/p5.Camera.mdx b/src/content/reference/en/p5/p5.Camera.mdx
new file mode 100644
index 0000000000..a9cb688bbc
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Camera.mdx
@@ -0,0 +1,119 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: p5.Camera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>This class describes a camera for use in p5's
+
+  <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5">
+
+  WebGL mode</a>. It contains camera position, orientation, and projection
+
+  information necessary for rendering a 3D scene.</p>
+
+  <p>New p5.Camera objects can be made through the
+
+  <a href="#/p5/createCamera">createCamera()</a> function and controlled through
+
+  the methods described below. A camera created in this way will use a default
+
+  position in the scene and a default perspective projection until these
+
+  properties are changed through the various methods available. It is possible
+
+  to create multiple cameras, in which case the current camera
+
+  can be set through the <a href="#/p5/setCamera">setCamera()</a> method.</p>
+
+  <p>Note:
+
+  The methods below operate in two coordinate systems: the 'world' coordinate
+
+  system describe positions in terms of their relationship to the origin along
+
+  the X, Y and Z axes whereas the camera's 'local' coordinate system
+
+  describes positions from the camera's point of view: left-right, up-down,
+
+  and forward-backward. The <a href="#/p5.Camera/move">move()</a> method,
+
+  for instance, moves the camera along its own axes, whereas the
+
+  <a href="#/p5.Camera/setPosition">setPosition()</a>
+
+  method sets the camera's position in world-space.</p>
+
+  <p>The camera object properties
+
+  <code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>
+
+  which describes camera position, orientation, and projection
+
+  are also accessible via the camera object generated using
+
+  <a href="#/p5/createCamera">createCamera()</a></p>
+line: 401
+params:
+  - name: rendererGL
+    description: |
+      <p>instance of WebGL renderer</p>
+    type: RendererGL
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+    let delta = 0.01;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+      cam = createCamera();
+      cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      // set initial pan angle
+      cam.pan(-0.8);
+      describe(
+        'camera view pans left and right across a series of rotating 3D boxes.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // pan camera according to angle 'delta'
+      cam.pan(delta);
+
+      // every 160 frames, switch direction
+      if (frameCount % 160 === 0) {
+        delta *= -1;
+      }
+
+      rotateX(frameCount * 0.01);
+      translate(-100, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+    }
+    </code>
+    </div>
+alt: camera view pans left and right across a series of rotating 3D boxes.
+chainable: false
+---
+
+
+# p5.Camera
diff --git a/src/content/reference/en/p5/p5.Color.mdx b/src/content/reference/en/p5/p5.Color.mdx
new file mode 100644
index 0000000000..4aeab46fb5
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Color.mdx
@@ -0,0 +1,85 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Color
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: >
+  <p>A class to describe a color. Each <code>p5.Color</code> object stores the
+  color mode
+
+  and level maxes that were active during its construction. These values are
+
+  used to interpret the arguments passed to the object's constructor. They
+
+  also determine output formatting such as when
+
+  <a href="#/p5/saturation">saturation()</a> is called.</p>
+
+  <p>Color is stored internally as an array of ideal RGBA values in floating
+
+  point form, normalized from 0 to 1. These values are used to calculate the
+
+  closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+
+  are sent to the renderer.</p>
+
+  <p>When different color representations are calculated, the results are cached
+
+  for performance. These values are normalized, floating-point numbers.</p>
+
+  <p><a href="#/p5/color">color()</a> is the recommended way to create an
+  instance
+
+  of this class.</p>
+isConstructor: true
+line: 318
+params:
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+  - name: vals
+    description: |
+      <p>an array containing the color values
+                                               for red, green, blue and alpha channel
+                                               or CSS color.</p>
+    type: 'Number[]|String'
+memberMethodPreviews:
+  toString:
+    description: |
+      <p>Returns the color formatted as a string. Doing so can be useful for
+      debugging, or for using p5.js with other libraries.</p>
+    path: .././src/content/reference/en//p5.Color/toString
+  setRed:
+    description: |
+      <p>Sets the red component of a color. The range depends on the
+      <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+      between 0 and 255.</p>
+    path: .././src/content/reference/en//p5.Color/setRed
+  setGreen:
+    description: |
+      <p>Sets the green component of a color. The range depends on the
+      <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+      between 0 and 255.</p>
+    path: .././src/content/reference/en//p5.Color/setGreen
+  setBlue:
+    description: |
+      <p>Sets the blue component of a color. The range depends on the
+      <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+      between 0 and 255.</p>
+    path: .././src/content/reference/en//p5.Color/setBlue
+  setAlpha:
+    description: >
+      <p>Sets the alpha (transparency) value of a color. The range depends on
+      the
+
+      <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+
+      between 0 and 255.</p>
+    path: .././src/content/reference/en//p5.Color/setAlpha
+---
+
+
+# p5.Color
diff --git a/src/content/reference/en/p5/p5.Element.mdx b/src/content/reference/en/p5/p5.Element.mdx
new file mode 100644
index 0000000000..3bc44e6442
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Element.mdx
@@ -0,0 +1,434 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Element
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>A class to describe an
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
+  target="_blank">HTML element</a>.
+
+  Sketches can use many elements. Common elements include the drawing canvas,
+
+  buttons, sliders, webcam feeds, and so on.</p>
+
+  <p>All elements share the methods of the <code>p5.Element</code> class.
+  They're created
+
+  with functions such as <a href="#/p5/createCanvas">createCanvas()</a> and
+
+  <a href="#/p5/createButton">createButton()</a>.</p>
+isConstructor: true
+line: 9
+params:
+  - name: elt
+    description: |
+      <p>wrapped DOM element.</p>
+    type: HTMLElement
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+memberMethodPreviews:
+  elt:
+    description: >
+      <p>Underlying
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"
+      target="_blank">HTMLElement</a>
+
+      object. Its properties and methods can be used directly.</p>
+    path: .././src/content/reference/en//p5.Element/elt
+  parent:
+    description: >
+      <p>Attaches this element to a parent element.</p>
+
+      <p>For example, a <code>&lt;div&gt;&lt;/div&gt;</code> element may be used
+      as a box to
+
+      hold two pieces of text, a header and a paragraph. The
+
+      <code>&lt;div&gt;&lt;/div&gt;</code> is the parent element of both the
+      header and
+
+      paragraph.</p>
+
+      <p>The parameter <code>parent</code> can have one of three types.
+      <code>parent</code> can be a
+
+      string with the parent element's ID, as in
+
+      <code>myElement.parent('container')</code>. It can also be another
+
+      <a href="#/p5.Element">p5.Element</a> object, as in
+
+      <code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be
+      an <code>HTMLElement</code>
+
+      object, as in <code>myElement.parent(anotherElement)</code>.</p>
+
+      <p>Calling <code>myElement.parent()</code> without an argument returns
+      this element's
+
+      parent.</p>
+    path: .././src/content/reference/en//p5.Element/parent
+  id:
+    description: >
+      <p>Sets this element's ID using a given string.</p>
+
+      <p>Calling <code>myElement.id()</code> without an argument returns its ID
+      as a string.</p>
+    path: .././src/content/reference/en//p5.Element/id
+  class:
+    description: >
+      <p>Adds a
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class"
+      target="_blank">class attribute</a>
+
+      to the element.</p>
+
+      <p>Calling <code>myElement.class()</code> without an argument returns a
+      string with its current classes.</p>
+    path: .././src/content/reference/en//p5.Element/class
+  mousePressed:
+    description: >
+      <p>Calls a function when the mouse is pressed over the element.
+
+      Calling <code>myElement.mousePressed(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: .././src/content/reference/en//p5.Element/mousePressed
+  doubleClicked:
+    description: >
+      <p>Calls a function when the mouse is pressed twice over the element.
+
+      Calling <code>myElement.doubleClicked(false)</code> disables the
+      function.</p>
+    path: .././src/content/reference/en//p5.Element/doubleClicked
+  mouseWheel:
+    description: >
+      <p>Calls a function when the mouse wheel scrolls over th element.</p>
+
+      <p>The callback function, <code>fxn</code>, is passed an
+      <code>event</code> object. <code>event</code> has
+
+      two numeric properties, <code>deltaY</code> and <code>deltaX</code>.
+      <code>event.deltaY</code> is
+
+      negative if the mouse wheel rotates away from the user. It's positive if
+
+      the mouse wheel rotates toward the user. <code>event.deltaX</code> is
+      positive if
+
+      the mouse wheel moves to the right. It's negative if the mouse wheel moves
+
+      to the left.</p>
+
+      <p>Calling <code>myElement.mouseWheel(false)</code> disables the
+      function.</p>
+    path: .././src/content/reference/en//p5.Element/mouseWheel
+  mouseReleased:
+    description: |
+      <p>Calls a function when the mouse is released over the element. Calling
+      <code>myElement.mouseReleased(false)</code> disables the function.</p>
+      <p>Note: Some mobile browsers may also trigger this event when the element
+      receives a quick tap.</p>
+    path: .././src/content/reference/en//p5.Element/mouseReleased
+  mouseClicked:
+    description: >
+      <p>Calls a function when the mouse is pressed and released over the
+      element.
+
+      Calling <code>myElement.mouseReleased(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: .././src/content/reference/en//p5.Element/mouseClicked
+  mouseMoved:
+    description: |
+      <p>Calls a function when the mouse moves over the element. Calling
+      <code>myElement.mouseMoved(false)</code> disables the function.</p>
+    path: .././src/content/reference/en//p5.Element/mouseMoved
+  mouseOver:
+    description: |
+      <p>Calls a function when the mouse moves onto the element. Calling
+      <code>myElement.mouseOver(false)</code> disables the function.</p>
+    path: .././src/content/reference/en//p5.Element/mouseOver
+  mouseOut:
+    description: |
+      <p>Calls a function when the mouse moves off the element. Calling
+      <code>myElement.mouseOut(false)</code> disables the function.</p>
+    path: .././src/content/reference/en//p5.Element/mouseOut
+  touchStarted:
+    description: |
+      <p>Calls a function when the element is touched. Calling
+      <code>myElement.touchStarted(false)</code> disables the function.</p>
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: .././src/content/reference/en//p5.Element/touchStarted
+  touchMoved:
+    description: |
+      <p>Calls a function when the user touches the element and moves their
+      finger. Calling <code>myElement.touchMoved(false)</code> disables the
+      function.</p>
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: .././src/content/reference/en//p5.Element/touchMoved
+  touchEnded:
+    description: |
+      <p>Calls a function when the user stops touching the element. Calling
+      <code>myElement.touchMoved(false)</code> disables the function.</p>
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: .././src/content/reference/en//p5.Element/touchEnded
+  dragOver:
+    description: |
+      <p>Calls a function when a file is dragged over the element. Calling
+      <code>myElement.dragOver(false)</code> disables the function.</p>
+    path: .././src/content/reference/en//p5.Element/dragOver
+  dragLeave:
+    description: |
+      <p>Calls a function when a file is dragged off the element. Calling
+      Calling <code>myElement.dragLeave(false)</code> disables the function.</p>
+    path: .././src/content/reference/en//p5.Element/dragLeave
+  addClass:
+    description: |
+      <p>Adds specified class to the element.</p>
+    path: .././src/content/reference/en//p5.Element/addClass
+  removeClass:
+    description: |
+      <p>Removes specified class from the element.</p>
+    path: .././src/content/reference/en//p5.Element/removeClass
+  hasClass:
+    description: |
+      <p>Checks if specified class is already applied to element.</p>
+    path: .././src/content/reference/en//p5.Element/hasClass
+  toggleClass:
+    description: |
+      <p>Toggles element class.</p>
+    path: .././src/content/reference/en//p5.Element/toggleClass
+  child:
+    description: |
+      <p>Attaches the element  as a child to the parent specified.
+       Accepts either a string ID, DOM node, or <a href="#/p5.Element">p5.Element</a>.
+       If no argument is specified, an array of children DOM nodes is returned.</p>
+    path: .././src/content/reference/en//p5.Element/child
+  center:
+    description: |
+      <p>Centers a p5.Element either vertically, horizontally,
+      or both, relative to its parent or according to
+      the body if the p5.Element has no parent. If no argument is passed
+      the p5.Element is aligned both vertically and horizontally.</p>
+    path: .././src/content/reference/en//p5.Element/center
+  html:
+    description: |
+      <p>If an argument is given, sets the inner HTML of the element,
+       replacing any existing HTML. If true is included as a second
+       argument, HTML is appended instead of replacing existing HTML.
+       If no arguments are given, returns
+       the inner HTML of the element.</p>
+    path: .././src/content/reference/en//p5.Element/html
+  position:
+    description: >
+      <p>Sets the position of the element. If no position type argument is
+      given, the
+       position will be relative to (0, 0) of the window.
+       Essentially, this sets position:absolute and left and top
+       properties of style. If an optional third argument specifying position type is given,
+       the x and y-coordinates will be interpreted based on the <a target="_blank"
+       href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">positioning scheme</a>.
+       If no arguments given, the function returns the x and y position of the element.
+      found documentation on how to be more specific with object type
+       <a href="https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>
+    path: .././src/content/reference/en//p5.Element/position
+  style:
+    description: >
+      <p>Applies a style to an element by adding a
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax"
+      target="_blank">CSS declaration</a>.</p>
+
+      <p>The first parameter, <code>property</code>, is a string. If the name of
+      a style
+
+      property is passed, as in <code>myElement.style('color')</code>, the
+      method returns
+
+      the current value as a string or <code>null</code> if it hasn't been set.
+      If a
+
+      <code>property:style</code> string is passed, as in
+
+      <code>myElement.style('color:deeppink')</code>, the method sets
+      <code>property</code> to
+
+      <code>value</code>.</p>
+
+      <p>The second parameter, <code>value</code>, is optional. It sets the
+      property's value.
+
+      <code>value</code> can be a string, as in
+
+      <code>myElement.style('color', 'deeppink')</code>, or a
+
+      <a href="#/p5.Color">p5.Color</a> object, as in
+
+      <code>myElement.style('color', myColor)</code>.</p>
+    path: .././src/content/reference/en//p5.Element/style
+  attribute:
+    description: >
+      <p>Adds an
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes"
+      target="_blank">attribute</a>
+
+      to the element. This method is useful for advanced tasks.</p>
+
+      <p>Most commonly-used attributes, such as <code>id</code>, can be set with
+      their
+
+      dedicated methods. For example, <code>nextButton.id('next')</code> sets an
+      element's
+
+      <code>id</code> attribute.</p>
+
+      <p>The first parameter, <code>attr</code>, is the attribute's name as a
+      string. Calling
+
+      <code>myElement.attribute('align')</code> returns the attribute's current
+      value as a
+
+      string or <code>null</code> if it hasn't been set.</p>
+
+      <p>The second parameter, <code>value</code>, is optional. It's a string
+      used to set the
+
+      attribute's value. For example, calling
+
+      <code>myElement.attribute('align', 'center')</code> sets the element's
+      horizontal
+
+      alignment to <code>center</code>.</p>
+    path: .././src/content/reference/en//p5.Element/attribute
+  removeAttribute:
+    description: >
+      <p>Removes an attribute from the element.</p>
+
+      <p>The parameter <code>attr</code> is the attribute's name as a string.
+      For example,
+
+      calling <code>myElement.removeAttribute('align')</code> removes its
+      <code>align</code>
+
+      attribute if it's been set.</p>
+    path: .././src/content/reference/en//p5.Element/removeAttribute
+  value:
+    description: >
+      <p>Returns or sets the element's value.</p>
+
+      <p>Calling <code>myElement.value()</code> returns the element's current
+      value.</p>
+
+      <p>The parameter, <code>value</code>, is an optional number or string. If
+      provided,
+
+      as in <code>myElement.value(123)</code>, it's used to set the element's
+      value.</p>
+    path: .././src/content/reference/en//p5.Element/value
+  show:
+    description: |
+      <p>Shows the current element.</p>
+    path: .././src/content/reference/en//p5.Element/show
+  hide:
+    description: |
+      <p>Hides the current element.</p>
+    path: .././src/content/reference/en//p5.Element/hide
+  size:
+    description: >
+      <p>Sets the element's width and height.</p>
+
+      <p>Calling <code>myElement.size()</code> without an argument returns the
+      element's size
+
+      as an object with the properties <code>width</code> and
+      <code>height</code>. For example,
+       <code>{ width: 20, height: 10 }</code>.</p>
+      <p>The first parameter, <code>width</code>, is optional. It's a number
+      used to set the
+
+      element's width. Calling <code>myElement.size(10)</code></p>
+
+      <p>The second parameter, 'height<code>, is also optional. It's a number
+      used to set the element's height. For example, calling
+      </code>myElement.size(20, 10)` sets the element's width to 20 pixels and
+      height
+
+      to 10 pixels.</p>
+
+      <p>The constant <code>AUTO</code> can be used to adjust one dimension at a
+      time while
+
+      maintaining the aspect ratio, which is <code>width / height</code>. For
+      example,
+
+      consider an element that's 200 pixels wide and 100 pixels tall. Calling
+
+      <code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and
+      height to 10
+
+      pixels.</p>
+
+      <p>Note: In the case of elements that need to load data, such as images,
+      wait
+
+      to call <code>myElement.size()</code> until after the data loads.</p>
+    path: .././src/content/reference/en//p5.Element/size
+  remove:
+    description: |
+      <p>Removes the element, stops all audio/video streams, and removes all
+      callback functions.</p>
+    path: .././src/content/reference/en//p5.Element/remove
+  drop:
+    description: >
+      <p>Sets a function to call when the user drops a file on the element.</p>
+
+      <p>The first parameter, <code>callback</code>, is a function to call once
+      the file loads.
+
+      The callback function should have one parameter, <code>file</code>, that's
+      a
+
+      <a href="#/p5.File">p5.File</a> object. If the user drops multiple files
+      on
+
+      the element, <code>callback</code>, is called once for each file.</p>
+
+      <p>The second parameter, <code>fxn</code>, is a function to call when the
+      browser detects
+
+      one or more dropped files. The callback function should have one
+
+      parameter, <code>event</code>, that's a
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent">DragEvent</a>.</p>
+    path: .././src/content/reference/en//p5.Element/drop
+  draggable:
+    description: >
+      <p>Turns p5.Element into a draggable item. If an argument is given, it
+      will drag that p5.Element instead, ie. drag a entire GUI panel (parent
+      container) with the panel's title bar.</p>
+    path: .././src/content/reference/en//p5.Element/draggable
+---
+
+
+# p5.Element
diff --git a/src/content/reference/en/p5/p5.File.mdx b/src/content/reference/en/p5/p5.File.mdx
new file mode 100644
index 0000000000..119c3efc24
--- /dev/null
+++ b/src/content/reference/en/p5/p5.File.mdx
@@ -0,0 +1,69 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.File
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>A class to describe a file.</p>
+  <p><code>p5.File</code> objects are used by
+  <a href="#/p5.Element/drop">myElement.drop()</a> and
+  created by
+  <a href="#/p5/createFileInput">createFileInput</a>.</p>
+isConstructor: true
+line: 4896
+params:
+  - name: file
+    description: |
+      <p>wrapped file.</p>
+    type: File
+memberMethodPreviews:
+  file:
+    description: >
+      <p>Underlying
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/File"
+      target="_blank">File</a>
+
+      object. All <code>File</code> properties and methods are accessible.</p>
+    path: .././src/content/reference/en//p5.File/file
+  type:
+    description: >
+      <p>The file
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types"
+      target="_blank">MIME type</a>
+
+      as a string. For example, <code>'image'</code>, <code>'text'</code>, and
+      so on.</p>
+    path: .././src/content/reference/en//p5.File/type
+  subtype:
+    description: >
+      <p>The file subtype as a string. For example, a file with an
+      <code>'image'</code>
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types"
+      target="_blank">MIME type</a>
+
+      may have a subtype such as <code>png</code> or <code>jpeg</code>.</p>
+    path: .././src/content/reference/en//p5.File/subtype
+  name:
+    description: |
+      <p>The file name as a string.</p>
+    path: .././src/content/reference/en//p5.File/name
+  size:
+    description: |
+      <p>The number of bytes in the file.</p>
+    path: .././src/content/reference/en//p5.File/size
+  data:
+    description: |
+      <p>A string containing either the file's image data, text contents, or
+      a parsed object in the case of JSON and
+      <a href="#/p5.XML">p5.XML</a> objects.</p>
+    path: .././src/content/reference/en//p5.File/data
+---
+
+
+# p5.File
diff --git a/src/content/reference/en/p5/p5.Font.mdx b/src/content/reference/en/p5/p5.Font.mdx
new file mode 100644
index 0000000000..f8e6b4d295
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Font.mdx
@@ -0,0 +1,94 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Font
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/p5.Font.js
+description: |
+  <p>A class to describe fonts.</p>
+isConstructor: true
+line: 13
+params:
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+memberMethodPreviews:
+  font:
+    description: |
+      <p>Underlying
+      <a href="https://opentype.js.org/" target="_blank">opentype.js</a>
+      font object.</p>
+    path: .././src/content/reference/en//p5.Font/font
+  textBounds:
+    description: >
+      <p>Returns the bounding box for a string of text written using this
+
+      <a href="#/p5.Font">p5.Font</a>.</p>
+
+      <p>The first parameter, <code>str</code>, is a string of text. The second
+      and third
+
+      parameters, <code>x</code> and <code>y</code>, are the text's position. By
+      default, they set the
+
+      coordinates of the bounding box's bottom-left corner. See
+
+      <a href="#/p5/textAlign">textAlign()</a> for more ways to align text.</p>
+
+      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
+      font size used to
+
+      determine the bounding box. By default, <code>font.textBounds()</code>
+      will use the
+
+      current <a href="#/p5/textSize">textSize()</a>.</p>
+    path: .././src/content/reference/en//p5.Font/textBounds
+  textToPoints:
+    description: >
+      <p>Returns an array of points outlining a string of text written using
+      this
+
+      <a href="#/p5.Font">p5.Font</a>.</p>
+
+      <p>The first parameter, <code>str</code>, is a string of text. The second
+      and third
+
+      parameters, <code>x</code> and <code>y</code>, are the text's position. By
+      default, they set the
+
+      coordinates of the bounding box's bottom-left corner. See
+
+      <a href="#/p5/textAlign">textAlign()</a> for more ways to align text.</p>
+
+      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
+      text's font
+
+      size. By default, <code>font.textToPoints()</code> will use the current
+
+      <a href="#/p5/textSize">textSize()</a>.</p>
+
+      <p>The fifth parameter, <code>options</code>, is also optional.
+      <code>font.textToPoints()</code>
+
+      expects an object with the following properties:</p>
+
+      <p><code>sampleFactor</code> is the ratio of the text's path length to the
+      number of
+
+      samples. It defaults to 0.1. Higher values produce more points along the
+
+      path and are more precise.</p>
+
+      <p><code>simplifyThreshold</code> removes collinear points if it's set to
+      a number other
+
+      than 0. The value represents the threshold angle to use when determining
+
+      whether two edges are collinear.</p>
+    path: .././src/content/reference/en//p5.Font/textToPoints
+---
+
+
+# p5.Font
diff --git a/src/content/reference/en/p5/p5.Framebuffer.mdx b/src/content/reference/en/p5/p5.Framebuffer.mdx
new file mode 100644
index 0000000000..c4bef62dca
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Framebuffer.mdx
@@ -0,0 +1,186 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Framebuffer
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
+description: |
+  <p>An object that one can draw to and then read as a texture. While similar
+  to a p5.Graphics, using a p5.Framebuffer as a texture will generally run
+  much faster, as it lives within the same WebGL context as the canvas it
+  is created on. It only works in WebGL mode.</p>
+isConstructor: true
+line: 76
+params:
+  - name: target
+    description: |
+      <p>A p5 global instance or p5.Graphics</p>
+    type: p5.Graphics|p5
+  - name: settings
+    description: |
+      <p>A settings object</p>
+    type: Object
+    optional: true
+memberMethodPreviews:
+  pixels:
+    description: >
+      <p>A <a
+      href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
+
+      /Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>
+
+      containing the values for all the pixels in the Framebuffer.</p>
+
+      <p>Like the <a href="#/p5/pixels">main canvas pixels property</a>, call
+
+      <a href="#/p5.Framebuffer/loadPixels">loadPixels()</a> before reading
+
+      it, and call <a href="#/p5.Framebuffer.updatePixels">updatePixels()</a>
+
+      afterwards to update its data.</p>
+
+      <p>Note that updating pixels via this property will be slower than
+
+      <a href="#/p5.Framebuffer/begin">drawing to the framebuffer directly.</a>
+
+      Consider using a shader instead of looping over pixels.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/pixels
+  resize:
+    description: |
+      <p>Resizes the framebuffer to the given width and height.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/resize
+  pixelDensity:
+    description: |
+      <p>Gets or sets the pixel scaling for high pixel density displays. By
+      default, the density will match that of the canvas the framebuffer was
+      created on, which will match the display density.</p>
+      <p>Call this method with no arguments to get the current density, or pass
+      in a number to set the density.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/pixelDensity
+  autoSized:
+    description: >
+      <p>Gets or sets whether or not this framebuffer will automatically resize
+
+      along with the canvas it's attached to in order to match its size.</p>
+
+      <p>Call this method with no arguments to see if it is currently
+      auto-sized,
+
+      or pass in a boolean to set this property.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/autoSized
+  createCamera:
+    description: |
+      <p>Creates and returns a new
+      <a href="#/p5.FramebufferCamera">p5.FramebufferCamera</a> to be used
+      while drawing to this framebuffer. The camera will be set as the
+      currently active camera.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/createCamera
+  remove:
+    description: |
+      <p>Removes the framebuffer and frees its resources.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/remove
+  begin:
+    description: |
+      <p>Begin drawing to this framebuffer. Subsequent drawing functions to the
+      canvas the framebuffer is attached to will not be immediately visible, and
+      will instead be drawn to the framebuffer's texture. Call
+      <a href="#/p5.Framebuffer/end">end()</a> when finished to make draw
+      functions go right to the canvas again and to be able to read the
+      contents of the framebuffer's texture.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/begin
+  end:
+    description: |
+      <p>After having previously called
+      <a href="#/p5.Framebuffer/begin">begin()</a>, this method stops drawing
+      functions from going to the framebuffer's texture, allowing them to go
+      right to the canvas again. After this, one can read from the framebuffer's
+      texture.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/end
+  draw:
+    description: >
+      <p>Run a function while drawing to the framebuffer rather than to its
+      canvas.
+
+      This is equivalent to calling <code>framebuffer.begin()</code>, running
+      the function,
+
+      and then calling <code>framebuffer.end()</code>, but ensures that one
+      never
+
+      accidentally forgets <code>begin</code> or <code>end</code>.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/draw
+  get:
+    description: >
+      <p>Get a region of pixels from the canvas in the form of a
+
+      <a href="#/p5.Image">p5.Image</a>, or a single pixel as an array of
+
+      numbers.</p>
+
+      <p>Returns an array of [R,G,B,A] values for any pixel or grabs a section
+      of
+
+      an image. If the Framebuffer has been set up to not store alpha values,
+      then
+
+      only [R,G,B] will be returned. If no parameters are specified, the entire
+
+      image is returned.
+
+      Use the x and y parameters to get the value of one pixel. Get a section of
+
+      the display window by specifying additional w and h parameters. When
+
+      getting an image, the x and y parameters define the coordinates for the
+
+      upper-left corner of the image, regardless of the current <a
+      href="#/p5/imageMode">imageMode()</a>.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/get
+  color:
+    description: >
+      <p>A texture with the color information of the framebuffer. Pass this (or
+      the
+
+      framebuffer itself) to <a href="#/p5/texture">texture()</a> to draw it to
+
+      the canvas, or pass it to a shader with
+
+      <a href="#/p5.Shader/setUniform">setUniform()</a> to read its data.</p>
+
+      <p>Since Framebuffers are controlled by WebGL, their y coordinates are
+      stored
+
+      flipped compared to images and videos. When texturing with a framebuffer
+
+      texture, you may want to flip vertically, e.g. with
+
+      <code>plane(framebuffer.width, -framebuffer.height)</code>.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/color
+  depth:
+    description: >
+      <p>A texture with the depth information of the framebuffer. If the
+      framebuffer
+
+      was created with <code>{ depth: false }</code> in its settings, then this
+      property will
+
+      be undefined. Pass this to <a href="#/p5/texture">texture()</a> to draw it
+      to
+
+      the canvas, or pass it to a shader with
+
+      <a href="#/p5.Shader/setUniform">setUniform()</a> to read its data.</p>
+
+      <p>Since Framebuffers are controlled by WebGL, their y coordinates are
+      stored
+
+      flipped compared to images and videos. When texturing with a framebuffer
+
+      texture, you may want to flip vertically, e.g. with
+
+      <code>plane(framebuffer.width, -framebuffer.height)</code>.</p>
+    path: .././src/content/reference/en//p5.Framebuffer/depth
+---
+
+
+# p5.Framebuffer
diff --git a/src/content/reference/en/p5/p5.Geometry.mdx b/src/content/reference/en/p5/p5.Geometry.mdx
new file mode 100644
index 0000000000..c561a01090
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Geometry.mdx
@@ -0,0 +1,89 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Geometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: |
+  <p>p5 Geometry class</p>
+isConstructor: true
+line: 13
+params:
+  - name: detailX
+    description: |
+      <p>number of vertices along the x-axis.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of vertices along the y-axis.</p>
+    type: Integer
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call upon object instantiation.</p>
+    type: Function
+    optional: true
+memberMethodPreviews:
+  clearColors:
+    description: >
+      <p>Removes the internal colors of p5.Geometry.
+
+      Using <code>clearColors()</code>, you can use <code>fill()</code> to
+      supply new colors before drawing each shape.
+
+      If <code>clearColors()</code> is not used, the shapes will use their
+      internal colors by ignoring <code>fill()</code>.</p>
+    path: .././src/content/reference/en//p5.Geometry/clearColors
+  flipU:
+    description: |
+      <p>Flips the U texture coordinates of the model.</p>
+    path: .././src/content/reference/en//p5.Geometry/flipU
+  flipV:
+    description: |
+      <p>Flips the V texture coordinates of the model.</p>
+    path: .././src/content/reference/en//p5.Geometry/flipV
+  computeFaces:
+    description: |
+      <p>computes faces for geometry objects based on the vertices.</p>
+    path: .././src/content/reference/en//p5.Geometry/computeFaces
+  computeNormals:
+    description: >
+      <p>This function calculates normals for each face, where each vertex's
+      normal is the average of the normals of all faces it's connected to.
+
+      i.e computes smooth normals per vertex as an average of each face.</p>
+
+      <p>When using <code>FLAT</code> shading, vertices are
+      disconnected/duplicated i.e each face has its own copy of vertices.
+
+      When using <code>SMOOTH</code> shading, vertices are
+      connected/deduplicated i.e each face has its vertices shared with other
+      faces.</p>
+
+      <p>Options can include:</p>
+
+      <ul>
+
+      <li><code>roundToPrecision</code>: Precision value for rounding
+      computations. Defaults to 3.</li>
+
+      </ul>
+    path: .././src/content/reference/en//p5.Geometry/computeNormals
+  averageNormals:
+    description: |
+      <p>Averages the vertex normals. Used in curved
+      surfaces</p>
+    path: .././src/content/reference/en//p5.Geometry/averageNormals
+  averagePoleNormals:
+    description: |
+      <p>Averages pole normals.  Used in spherical primitives</p>
+    path: .././src/content/reference/en//p5.Geometry/averagePoleNormals
+  normalize:
+    description: |
+      <p>Modifies all vertices to be centered within the range -100 to 100.</p>
+    path: .././src/content/reference/en//p5.Geometry/normalize
+---
+
+
+# p5.Geometry
diff --git a/src/content/reference/en/p5/p5.Graphics.mdx b/src/content/reference/en/p5/p5.Graphics.mdx
new file mode 100644
index 0000000000..e494e7f7f5
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Graphics.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Graphics
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Graphics.js
+description: |
+  <p>Thin wrapper around a renderer, to be used for creating a
+  graphics buffer object. Use this class if you need
+  to draw into an off-screen graphics buffer. The two parameters define the
+  width and height in pixels. The fields and methods for this class are
+  extensive, but mirror the normal drawing API for p5.</p>
+isConstructor: true
+line: 10
+params:
+  - name: w
+    description: |
+      <p>width</p>
+    type: Number
+  - name: h
+    description: |
+      <p>height</p>
+    type: Number
+  - name: renderer
+    description: |
+      <p>the renderer to use, either P2D or WEBGL</p>
+    type: Constant
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance</p>
+    type: P5
+    optional: true
+  - name: canvas
+    description: |
+      <p>existing html canvas element</p>
+    type: HTMLCanvasElement
+    optional: true
+memberMethodPreviews:
+  reset:
+    description: >
+      <p>Resets certain values such as those modified by functions in the
+      Transform category
+
+      and in the Lights category that are not automatically reset
+
+      with graphics buffer objects. Calling this in <a
+      href='#/p5/draw'>draw()</a> will copy the behavior
+
+      of the standard canvas.</p>
+    path: .././src/content/reference/en//p5.Graphics/reset
+  remove:
+    description: |
+      <p>Removes a Graphics object from the page and frees any resources
+      associated with it.</p>
+    path: .././src/content/reference/en//p5.Graphics/remove
+  createFramebuffer:
+    description: >
+      <p>Creates and returns a new <a href="#/p5.Framebuffer">p5.Framebuffer</a>
+
+      inside a p5.Graphics WebGL context.</p>
+
+      <p>This takes the same parameters as the <a
+      href="#/p5/createFramebuffer">global
+
+      createFramebuffer function.</a></p>
+    path: .././src/content/reference/en//p5.Graphics/createFramebuffer
+---
+
+
+# p5.Graphics
diff --git a/src/content/reference/en/p5/p5.Image.mdx b/src/content/reference/en/p5/p5.Image.mdx
new file mode 100644
index 0000000000..f0f45501ce
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Image.mdx
@@ -0,0 +1,363 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Image
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>A class to describe an image. Images are rectangular grids of pixels that
+
+  can be displayed and modified.</p>
+
+  <p>Existing images can be loaded by calling
+
+  <a href="#/p5/loadImage">loadImage()</a>. Blank images can be created by
+
+  calling <a href="#/p5/createImage">createImage()</a>. <code>p5.Image</code>
+  objects
+
+  have methods for common tasks such as applying filters and modifying
+
+  pixel values.</p>
+isConstructor: true
+line: 21
+params:
+  - name: width
+    description: ''
+    type: Number
+  - name: height
+    description: ''
+    type: Number
+memberMethodPreviews:
+  width:
+    description: |
+      <p>Image width.</p>
+    path: .././src/content/reference/en//p5.Image/width
+  height:
+    description: |
+      <p>Image height.</p>
+    path: .././src/content/reference/en//p5.Image/height
+  pixels:
+    description: >
+      <p>An array containing the color of each pixel in the
+
+      <a href="#/p5.Image">p5.Image</a> object. Colors are stored as numbers
+
+      representing red, green, blue, and alpha (RGBA) values.
+      <code>img.pixels</code> is a
+
+      one-dimensional array for performance reasons.</p>
+
+      <p>Each pixel occupies four elements in the pixels array, one for each
+
+      RGBA value. For example, the pixel at coordinates (0, 0) stores its
+
+      RGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>,
+      <code>img.pixels[2]</code>,
+
+      and <code>img.pixels[3]</code>, respectively. The next pixel at
+      coordinates (1, 0)
+
+      stores its RGBA values at <code>img.pixels[4]</code>,
+      <code>img.pixels[5]</code>,
+
+      <code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The
+      <code>img.pixels</code> array
+
+      for a 100×100 <a href="#/p5.Image">p5.Image</a> object has
+
+      100 × 100 × 4 = 40,000 elements.</p>
+
+      <p>Accessing the RGBA values for a pixel in the
+
+      <a href="#/p5.Image">p5.Image</a> object requires a little math as
+
+      shown below. The <a href="#/p5.Image/loadPixels">img.loadPixels()</a>
+
+      method must be called before accessing the <code>img.pixels</code> array.
+      The
+
+      <a href="#/p5.Image/updatePixels">img.updatePixels()</a> method must be
+
+      called after any changes are made.</p>
+    path: .././src/content/reference/en//p5.Image/pixels
+  pixelDensity:
+    description: >
+      <p>Gets or sets the pixel density for high pixel density displays. By
+      default,
+
+      the density will be set to 1.</p>
+
+      <p>Call this method with no arguments to get the default density, or pass
+
+      in a number to set the density. If a non-positive number is provided,
+
+      it defaults to 1.</p>
+    path: .././src/content/reference/en//p5.Image/pixelDensity
+  loadPixels:
+    description: >
+      <p>Loads the current value of each pixel in the
+
+      <a href="#/p5.Image">p5.Image</a> object into the <code>img.pixels</code>
+      array.
+
+      This method must be called before reading or modifying pixel values.</p>
+    path: .././src/content/reference/en//p5.Image/loadPixels
+  updatePixels:
+    description: >
+      <p>Updates the canvas with the RGBA values in the
+
+      <a href="#/p5.Image/pixels">img.pixels</a> array.</p>
+
+      <p><code>img.updatePixels()</code> only needs to be called after changing
+      values in
+
+      the <a href="#/p5.Image/pixels">img.pixels</a> array. Such changes can be
+
+      made directly after calling
+
+      <a href="#/p5.Image/loadPixels">img.loadPixels()</a> or by calling
+
+      <a href="#/p5.Image/set">img.set()</a>.</p>
+
+      <p>The optional parameters <code>x</code>, <code>y</code>,
+      <code>width</code>, and <code>height</code> define a
+
+      subsection of the <a href="#/p5.Image">p5.Image</a> object to update.
+
+      Doing so can improve performance in some cases.</p>
+
+      <p>If the <a href="#/p5.Image">p5.Image</a> object was loaded from a GIF,
+
+      then calling <code>img.updatePixels()</code> will update the pixels in
+      current
+
+      frame.</p>
+    path: .././src/content/reference/en//p5.Image/updatePixels
+  get:
+    description: >
+      <p>Gets a pixel or a region of pixels from a
+
+      <a href="#/p5.Image">p5.Image</a> object.</p>
+
+      <p><code>img.get()</code> is easy to use but it's not as fast as
+
+      <a href="#/p5.Image/pixels">img.pixels</a>. Use
+
+      <a href="#/p5.Image/pixels">img.pixels</a> to read many pixel values.</p>
+
+      <p>The version of <code>img.get()</code> with no parameters returns the
+      entire image.</p>
+
+      <p>The version of <code>img.get()</code> with two parameters interprets
+      them as
+
+      coordinates. It returns an array with the <code>[R, G, B, A]</code> values
+      of the
+
+      pixel at the given point.</p>
+
+      <p>The version of <code>img.get()</code> with four parameters interprets
+      them as
+
+      coordinates and dimensions. It returns a subsection of the canvas as a
+
+      <a href="#/p5.Image">p5.Image</a> object. The first two parameters are
+
+      the coordinates for the upper-left corner of the subsection. The last two
+
+      parameters are the width and height of the subsection.</p>
+
+      <p>Use <a href="#/p5.Image/get">img.get()</a> to work directly with
+
+      <a href="#/p5.Image">p5.Image</a> objects.</p>
+    path: .././src/content/reference/en//p5.Image/get
+  set:
+    description: >
+      <p>Sets the color of one or more pixels within a
+
+      <a href="#/p5.Image">p5.Image</a> object.</p>
+
+      <p><code>img.set()</code> is easy to use but it's not as fast as
+
+      <a href="#/p5.Image/pixels">img.pixels</a>. Use
+
+      <a href="#/p5.Image/pixels">img.pixels</a> to set many pixel values.</p>
+
+      <p><code>img.set()</code> interprets the first two parameters as x- and
+      y-coordinates. It
+
+      interprets the last parameter as a grayscale value, a <code>[R, G, B,
+      A]</code> pixel
+
+      array, a <a href="#/p5.Color">p5.Color</a> object, or another
+
+      <a href="#/p5.Image">p5.Image</a> object.</p>
+
+      <p><a href="#/p5.Image/updatePixels">img.updatePixels()</a> must be called
+
+      after using <code>img.set()</code> for changes to appear.</p>
+    path: .././src/content/reference/en//p5.Image/set
+  resize:
+    description: >
+      <p>Resizes the <a href="#/p5.Image">p5.Image</a> object to a given
+      <code>width</code>
+
+      and <code>height</code>. The image's original aspect ratio can be kept by
+      passing 0
+
+      for either <code>width</code> or <code>height</code>. For example, calling
+      <code>img.resize(50, 0)</code>
+
+      on an image that was 500 × 300 pixels will resize it to
+
+      50 × 30 pixels.</p>
+    path: .././src/content/reference/en//p5.Image/resize
+  copy:
+    description: |
+      <p>Copies pixels from a source <a href="#/p5.Image">p5.Image</a>
+       to this one. Calling <code>img.copy()</code> will scale pixels from the source
+       region if it isn't the same size as the destination region.</p>
+    path: .././src/content/reference/en//p5.Image/copy
+  mask:
+    description: |
+      <p>Masks part of an image from displaying by loading another
+      image and using its alpha channel as an alpha channel for
+      this image. Masks are cumulative, once applied to an image
+      object, they cannot be removed.</p>
+    path: .././src/content/reference/en//p5.Image/mask
+  filter:
+    description: >
+      <p>Applies an image filter to the <a href="#/p5.Image">p5.Image</a>
+      object.
+
+      The preset options are:</p>
+
+      <p><code>INVERT</code>
+
+      Inverts the colors in the image. No parameter is used.</p>
+
+      <p><code>GRAY</code>
+
+      Converts the image to grayscale. No parameter is used.</p>
+
+      <p><code>THRESHOLD</code>
+
+      Converts the image to black and white. Pixels with a grayscale value
+
+      above a given threshold are converted to white. The rest are converted to
+
+      black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+
+      value is specified, 0.5 is used.</p>
+
+      <p><code>OPAQUE</code>
+
+      Sets the alpha channel to be entirely opaque. No parameter is used.</p>
+
+      <p><code>POSTERIZE</code>
+
+      Limits the number of colors in the image. Each color channel is limited to
+
+      the number of colors specified. Values between 2 and 255 are valid, but
+
+      results are most noticeable with lower values. The default value is 4.</p>
+
+      <p><code>BLUR</code>
+
+      Blurs the image. The level of blurring is specified by a blur radius.
+      Larger
+
+      values increase the blur. The default value is 4. A gaussian blur is used
+
+      in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code>
+      mode.</p>
+
+      <p><code>ERODE</code>
+
+      Reduces the light areas. No parameter is used.</p>
+
+      <p><code>DILATE</code>
+
+      Increases the light areas. No parameter is used.</p>
+    path: .././src/content/reference/en//p5.Image/filter
+  blend:
+    description: >
+      <p>Copies a region of pixels from another
+
+      <a href="#/p5.Image">p5.Image</a> object into this one. The
+      <code>blendMode</code>
+
+      parameter blends the images' colors to create different effects.</p>
+    path: .././src/content/reference/en//p5.Image/blend
+  save:
+    description: >
+      <p>Saves the <a href="#/p5.Image">p5.Image</a> object to a file.
+
+      The browser will either save the file immediately or prompt the user
+
+      with a dialogue window.</p>
+
+      <p>By default, calling <code>img.save()</code> will save the image as
+      <code>untitled.png</code>.</p>
+
+      <p>Calling <code>img.save()</code> with one argument, as in
+      <code>img.save('photo.png')</code>,
+
+      will set the image's filename and type together.</p>
+
+      <p>Calling <code>img.save()</code> with two arguments, as in
+
+      <code>image.save('photo', 'png')</code>, will set the image's filename and
+      type
+
+      separately.</p>
+
+      <p>The image will only be downloaded as an animated GIF if the
+
+      <a href="#/p5.Image">p5.Image</a> object was loaded from a GIF file.
+
+      See <a href="#/p5/saveGif">saveGif()</a> to create new GIFs.</p>
+    path: .././src/content/reference/en//p5.Image/save
+  reset:
+    description: |
+      <p>Restarts an animated GIF at its first frame.</p>
+    path: .././src/content/reference/en//p5.Image/reset
+  getCurrentFrame:
+    description: |
+      <p>Gets the index of the current frame in an animated GIF.</p>
+    path: .././src/content/reference/en//p5.Image/getCurrentFrame
+  setFrame:
+    description: |
+      <p>Sets the current frame in an animated GIF.</p>
+    path: .././src/content/reference/en//p5.Image/setFrame
+  numFrames:
+    description: |
+      <p>Returns the number of frames in an animated GIF.</p>
+    path: .././src/content/reference/en//p5.Image/numFrames
+  play:
+    description: |
+      <p>Plays an animated GIF that was paused with
+      <a href="#/p5.Image/pause">img.pause()</a>.</p>
+    path: .././src/content/reference/en//p5.Image/play
+  pause:
+    description: |
+      <p>Pauses an animated GIF. The GIF can be resumed by calling
+      <a href="#/p5.Image/play">img.play()</a>.</p>
+    path: .././src/content/reference/en//p5.Image/pause
+  delay:
+    description: >
+      <p>Changes the delay between frames in an animated GIF.</p>
+
+      <p>The second parameter, <code>index</code>, is optional. If provided,
+      only the frame
+
+      at <code>index</code> will have its delay modified. All other frames will
+      keep
+
+      their default delay.</p>
+    path: .././src/content/reference/en//p5.Image/delay
+---
+
+
+# p5.Image
diff --git a/src/content/reference/en/p5/p5.MediaElement.mdx b/src/content/reference/en/p5/p5.MediaElement.mdx
new file mode 100644
index 0000000000..3847f32298
--- /dev/null
+++ b/src/content/reference/en/p5/p5.MediaElement.mdx
@@ -0,0 +1,212 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.MediaElement
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>A class to handle audio and video.</p>
+
+  <p><code>p5.MediaElement</code> extends <a href="#/p5.Element">p5.Element</a>
+  with
+
+  methods to handle audio and video. <code>p5.MediaElement</code> objects are
+  created by
+
+  calling <a href="#/p5/createVideo">createVideo</a>,
+
+  <a href="#/p5/createAudio">createAudio</a>, and
+
+  <a href="#/p5/createCapture">createCapture</a>.</p>
+isConstructor: true
+line: 3643
+params:
+  - name: elt
+    description: |
+      <p>DOM node that is wrapped</p>
+    type: String
+memberMethodPreviews:
+  src:
+    description: |
+      <p>Path to the media element's source as a string.</p>
+    path: .././src/content/reference/en//p5.MediaElement/src
+  play:
+    description: |
+      <p>Play audio or video from a media element.</p>
+    path: .././src/content/reference/en//p5.MediaElement/play
+  stop:
+    description: >
+      <p>Stops a media element and sets its current time to zero. Calling
+
+      <code>media.play()</code> will restart playing audio/video from the
+      beginning.</p>
+    path: .././src/content/reference/en//p5.MediaElement/stop
+  pause:
+    description: >
+      <p>Pauses a media element. Calling <code>media.play()</code> will resume
+      playing
+
+      audio/video from the moment it paused.</p>
+    path: .././src/content/reference/en//p5.MediaElement/pause
+  loop:
+    description: |
+      <p>Play the audio/video repeatedly in a loop.</p>
+    path: .././src/content/reference/en//p5.MediaElement/loop
+  noLoop:
+    description: |
+      <p>Stops the audio/video from playing in a loop. It will stop when it
+      reaches the end.</p>
+    path: .././src/content/reference/en//p5.MediaElement/noLoop
+  autoplay:
+    description: >
+      <p>Sets the audio/video to play once it's loaded.</p>
+
+      <p>The parameter, <code>shouldAutoplay</code>, is optional. Calling
+
+      <code>media.autoplay()</code> without an argument causes the media to play
+
+      automatically. If <code>true</code> is passed, as in
+      <code>media.autoplay(true)</code>, the
+
+      media will automatically play. If <code>false</code> is passed, as in
+
+      <code>media.autoPlay(false)</code>, it won't play automatically.</p>
+    path: .././src/content/reference/en//p5.MediaElement/autoplay
+  volume:
+    description: >
+      <p>Manages the audio/video volume.</p>
+
+      <p>Calling <code>media.volume()</code> without an argument returns the
+      current volume
+
+      as a number in the range 0 (off) to 1 (maximum).</p>
+
+      <p>The parameter, <code>val</code>, is optional. It's a number that sets
+      the volume
+
+      from 0 (off) to 1 (maximum). For example, calling
+      <code>media.volume(0.5)</code>
+
+      sets the volume to half of its maximum.</p>
+    path: .././src/content/reference/en//p5.MediaElement/volume
+  speed:
+    description: >
+      <p>Manages the audio/video playback speed. Calling
+      <code>media.speed()</code> returns
+
+      the current speed as a number.</p>
+
+      <p>The parameter, <code>val</code>, is optional. It's a number that sets
+      the playback
+
+      speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
+
+      plays it at double speed, and so on. -1 plays the media at normal speed
+
+      in reverse.</p>
+
+      <p>Note: Not all browsers support backward playback. Even if they do,
+
+      playback might not be smooth.</p>
+    path: .././src/content/reference/en//p5.MediaElement/speed
+  time:
+    description: >
+      <p>Manages the media element's playback time. Calling
+      <code>media.time()</code>
+
+      returns the number of seconds the audio/video has played. Time resets to
+
+      0 when the looping media restarts.</p>
+
+      <p>The parameter, <code>time</code>, is optional. It's a number that
+      specifies the
+
+      time, in seconds, to jump to when playback begins.</p>
+    path: .././src/content/reference/en//p5.MediaElement/time
+  duration:
+    description: |
+      <p>Returns the audio/video's duration in seconds.</p>
+    path: .././src/content/reference/en//p5.MediaElement/duration
+  onended:
+    description: >
+      <p>Calls a function when the audio/video reaches the end of its playback
+
+      The function won't be called if the media is looping.</p>
+
+      <p>The <code>p5.MediaElement</code> is passed as an argument to the
+      callback function.</p>
+    path: .././src/content/reference/en//p5.MediaElement/onended
+  connect:
+    description: |
+      <p>Send the audio output of this element to a specified audioNode or
+      p5.sound object. If no element is provided, connects to p5's main
+      output. That connection is established when this method is first called.
+      All connections are removed by the .disconnect() method.</p>
+      <p>This method is meant to be used with the p5.sound.js addon library.</p>
+    path: .././src/content/reference/en//p5.MediaElement/connect
+  disconnect:
+    description: |
+      <p>Disconnect all Web Audio routing, including to main output.
+      This is useful if you want to re-route the output through
+      audio effects, for example.</p>
+    path: .././src/content/reference/en//p5.MediaElement/disconnect
+  showControls:
+    description: >
+      <p>Show the default
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"
+      target="_blank">HTMLMediaElement</a>
+
+      controls. These vary between web browser.</p>
+    path: .././src/content/reference/en//p5.MediaElement/showControls
+  hideControls:
+    description: >
+      <p>Hide the default
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"
+      target="_blank">HTMLMediaElement</a>
+
+      controls.</p>
+    path: .././src/content/reference/en//p5.MediaElement/hideControls
+  addCue:
+    description: >
+      <p>Schedules a function to call when the audio/video reaches a specific
+      time
+
+      during its playback.</p>
+
+      <p>The first parameter, <code>time</code>, is the time, in seconds, when
+      the function
+
+      should run. This value is passed to <code>callback</code> as its first
+      argument.</p>
+
+      <p>The second parameter, <code>callback</code>, is the function to call at
+      the specified
+
+      cue time.</p>
+
+      <p>The third parameter, <code>value</code>, is optional and can be any
+      type of value.
+
+      <code>value</code> is passed to <code>callback</code>.</p>
+
+      <p>Calling <code>media.addCue()</code> returns an ID as a string. This is
+      useful for
+
+      removing the cue later.</p>
+    path: .././src/content/reference/en//p5.MediaElement/addCue
+  removeCue:
+    description: |
+      <p>Remove a callback based on its ID.</p>
+    path: .././src/content/reference/en//p5.MediaElement/removeCue
+  clearCues:
+    description: |
+      <p>Removes all functions scheduled with <code>media.addCue()</code>.</p>
+    path: .././src/content/reference/en//p5.MediaElement/clearCues
+---
+
+
+# p5.MediaElement
diff --git a/src/content/reference/en/p5/p5.NumberDict.mdx b/src/content/reference/en/p5/p5.NumberDict.mdx
new file mode 100644
index 0000000000..c482265ed8
--- /dev/null
+++ b/src/content/reference/en/p5/p5.NumberDict.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.NumberDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>A simple Dictionary class for Numbers.</p>
+isConstructor: true
+line: 415
+memberMethodPreviews:
+  add:
+    description: |
+      <p>Add the given number to the value currently stored at the given key.
+      The sum then replaces the value previously stored in the Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/add
+  sub:
+    description: >
+      <p>Subtract the given number from the value currently stored at the given
+      key.
+
+      The difference then replaces the value previously stored in the
+      Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/sub
+  mult:
+    description: >
+      <p>Multiply the given number with the value currently stored at the given
+      key.
+
+      The product then replaces the value previously stored in the
+      Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/mult
+  div:
+    description: >
+      <p>Divide the given number with the value currently stored at the given
+      key.
+
+      The quotient then replaces the value previously stored in the
+      Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/div
+  minValue:
+    description: |
+      <p>Return the lowest number currently stored in the Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/minValue
+  maxValue:
+    description: |
+      <p>Return the highest number currently stored in the Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/maxValue
+  minKey:
+    description: |
+      <p>Return the lowest key currently used in the Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/minKey
+  maxKey:
+    description: |
+      <p>Return the highest key currently used in the Dictionary.</p>
+    path: .././src/content/reference/en//p5.NumberDict/maxKey
+---
+
+
+# p5.NumberDict
diff --git a/src/content/reference/en/p5/p5.PrintWriter.mdx b/src/content/reference/en/p5/p5.PrintWriter.mdx
new file mode 100644
index 0000000000..5c74183ded
--- /dev/null
+++ b/src/content/reference/en/p5/p5.PrintWriter.mdx
@@ -0,0 +1,21 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: p5.PrintWriter
+module: IO
+submodule: Output
+file: src/io/files.js
+description: ''
+line: 1188
+params:
+  - name: filename
+    description: ''
+    type: String
+  - name: extension
+    description: ''
+    type: String
+    optional: true
+chainable: false
+---
+
+
+# p5.PrintWriter
diff --git a/src/content/reference/en/p5/p5.Renderer.mdx b/src/content/reference/en/p5/p5.Renderer.mdx
new file mode 100644
index 0000000000..c5f1135589
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Renderer.mdx
@@ -0,0 +1,31 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Renderer
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Renderer.js
+description: |
+  <p>Main graphics and rendering context, as well as the base API
+  implementation for p5.js "core". To be used as the superclass for
+  Renderer2D and Renderer3D classes, respectively.</p>
+isConstructor: true
+line: 10
+params:
+  - name: elt
+    description: |
+      <p>DOM node that is wrapped</p>
+    type: HTMLElement
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance</p>
+    type: P5
+    optional: true
+  - name: isMainCanvas
+    description: |
+      <p>whether we're using it as main canvas</p>
+    type: Boolean
+    optional: true
+---
+
+
+# p5.Renderer
diff --git a/src/content/reference/en/p5/p5.Shader.mdx b/src/content/reference/en/p5/p5.Shader.mdx
new file mode 100644
index 0000000000..4115fa2917
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Shader.mdx
@@ -0,0 +1,95 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Shader
+module: 3D
+submodule: Material
+file: src/webgl/p5.Shader.js
+description: |
+  <p>Shader class for WEBGL Mode</p>
+isConstructor: true
+line: 11
+params:
+  - name: renderer
+    description: |
+      <p>an instance of p5.RendererGL that
+      will provide the GL context for this new p5.Shader</p>
+    type: p5.RendererGL
+  - name: vertSrc
+    description: |
+      <p>source code for the vertex shader (as a string)</p>
+    type: String
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader (as a string)</p>
+    type: String
+memberMethodPreviews:
+  copyToContext:
+    description: >
+      <p>Shaders belong to the main canvas or a p5.Graphics. Once they are
+      compiled,
+
+      they can only be used in the context they were compiled on.</p>
+
+      <p>Use this method to make a new copy of a shader that gets compiled on a
+
+      different context.</p>
+    path: .././src/content/reference/en//p5.Shader/copyToContext
+  setUniform:
+    description: >
+      <p>Used to set the uniforms of a
+
+      <a href="#/p5.Shader">p5.Shader</a> object.</p>
+
+      <p>Uniforms are used as a way to provide shader programs
+
+      (which run on the GPU) with values from a sketch
+
+      (which runs on the CPU).</p>
+
+      <p>Here are some examples of uniforms you can make:</p>
+
+      <ul>
+
+      <li>booleans<ul>
+
+      <li>Example: <code>setUniform('x', true)</code> becomes <code>uniform
+      float x</code> with the value <code>1.0</code></li>
+
+      </ul>
+
+      </li>
+
+      <li>numbers<ul>
+
+      <li>Example: <code>setUniform('x', -2)</code> becomes <code>uniform float
+      x</code> with the value <code>-2.0</code></li>
+
+      </ul>
+
+      </li>
+
+      <li>arrays of numbers<ul>
+
+      <li>Example: <code>setUniform('x', [0, 0.5, 1])</code> becomes
+      <code>uniform vec3 x</code> with the value <code>vec3(0.0, 0.5,
+      1.0)</code></li>
+
+      </ul>
+
+      </li>
+
+      <li>a p5.Image, p5.Graphics, p5.MediaElement, or p5.Texture<ul>
+
+      <li>Example: <code>setUniform('x', img)</code> becomes <code>uniform
+      sampler2D x</code></li>
+
+      </ul>
+
+      </li>
+
+      </ul>
+    path: .././src/content/reference/en//p5.Shader/setUniform
+---
+
+
+# p5.Shader
diff --git a/src/content/reference/en/p5/p5.StringDict.mdx b/src/content/reference/en/p5/p5.StringDict.mdx
new file mode 100644
index 0000000000..d10d5b6077
--- /dev/null
+++ b/src/content/reference/en/p5/p5.StringDict.mdx
@@ -0,0 +1,14 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: p5.StringDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>A simple Dictionary class for Strings.</p>
+line: 397
+chainable: false
+---
+
+
+# p5.StringDict
diff --git a/src/content/reference/en/p5/p5.Table.mdx b/src/content/reference/en/p5/p5.Table.mdx
new file mode 100644
index 0000000000..4215034aeb
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Table.mdx
@@ -0,0 +1,207 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Table
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p><a href="#/p5.Table">Table</a> objects store data with multiple rows and
+  columns, much
+
+  like in a traditional spreadsheet. Tables can be generated from
+
+  scratch, dynamically, or using data from an existing file.</p>
+isConstructor: true
+line: 33
+params:
+  - name: rows
+    description: |
+      <p>An array of p5.TableRow objects</p>
+    type: 'p5.TableRow[]'
+    optional: true
+memberMethodPreviews:
+  columns:
+    description: >
+      <p>An array containing the names of the columns in the table, if the
+      "header" the table is
+
+      loaded with the "header" parameter.</p>
+    path: .././src/content/reference/en//p5.Table/columns
+  rows:
+    description: >
+      <p>An array containing the <a href="#/p5.Table">p5.TableRow</a> objects
+      that make up the
+
+      rows of the table. The same result as calling <a
+      href="#/p5/getRows">getRows()</a></p>
+    path: .././src/content/reference/en//p5.Table/rows
+  addRow:
+    description: >
+      <p>Use <a href="#/p5/addRow">addRow()</a> to add a new row of data to a <a
+      href="#/p5.Table">p5.Table</a> object. By default,
+
+      an empty row is created. Typically, you would store a reference to
+
+      the new row in a TableRow object (see newRow in the example above),
+
+      and then set individual values using <a href="#/p5/set">set()</a>.</p>
+
+      <p>If a <a href="#/p5.TableRow">p5.TableRow</a> object is included as a
+      parameter, then that row is
+
+      duplicated and added to the table.</p>
+    path: .././src/content/reference/en//p5.Table/addRow
+  removeRow:
+    description: |
+      <p>Removes a row from the table object.</p>
+    path: .././src/content/reference/en//p5.Table/removeRow
+  getRow:
+    description: >
+      <p>Returns a reference to the specified <a
+      href="#/p5.TableRow">p5.TableRow</a>. The reference
+
+      can then be used to get and set values of the selected row.</p>
+    path: .././src/content/reference/en//p5.Table/getRow
+  getRows:
+    description: >
+      <p>Gets all rows from the table. Returns an array of <a
+      href="#/p5.TableRow">p5.TableRow</a>s.</p>
+    path: .././src/content/reference/en//p5.Table/getRows
+  findRow:
+    description: |
+      <p>Finds the first row in the Table that contains the value
+      provided, and returns a reference to that row. Even if
+      multiple rows are possible matches, only the first matching
+      row is returned. The column to search may be specified by
+      either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/findRow
+  findRows:
+    description: |
+      <p>Finds the rows in the Table that contain the value
+      provided, and returns references to those rows. Returns an
+      Array, so for must be used to iterate through all the rows,
+      as shown in the example above. The column to search may be
+      specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/findRows
+  matchRow:
+    description: |
+      <p>Finds the first row in the Table that matches the regular
+      expression provided, and returns a reference to that row.
+      Even if multiple rows are possible matches, only the first
+      matching row is returned. The column to search may be
+      specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/matchRow
+  matchRows:
+    description: |
+      <p>Finds the rows in the Table that match the regular expression provided,
+      and returns references to those rows. Returns an array, so for must be
+      used to iterate through all the rows, as shown in the example. The
+      column to search may be specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/matchRows
+  getColumn:
+    description: |
+      <p>Retrieves all values in the specified column, and returns them
+      as an array. The column may be specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/getColumn
+  clearRows:
+    description: |
+      <p>Removes all rows from a Table. While all rows are removed,
+      columns and column titles are maintained.</p>
+    path: .././src/content/reference/en//p5.Table/clearRows
+  addColumn:
+    description: >
+      <p>Use <a href="#/p5/addColumn">addColumn()</a> to add a new column to a
+      <a href="#/p5.Table">Table</a> object.
+
+      Typically, you will want to specify a title, so the column
+
+      may be easily referenced later by name. (If no title is
+
+      specified, the new column's title will be null.)</p>
+    path: .././src/content/reference/en//p5.Table/addColumn
+  getColumnCount:
+    description: |
+      <p>Returns the total number of columns in a Table.</p>
+    path: .././src/content/reference/en//p5.Table/getColumnCount
+  getRowCount:
+    description: |
+      <p>Returns the total number of rows in a Table.</p>
+    path: .././src/content/reference/en//p5.Table/getRowCount
+  removeTokens:
+    description: |
+      <p>Removes any of the specified characters (or "tokens").</p>
+      <p>If no column is specified, then the values in all columns and
+      rows are processed. A specific column may be referenced by
+      either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/removeTokens
+  trim:
+    description: |
+      <p>Trims leading and trailing whitespace, such as spaces and tabs,
+      from String table values. If no column is specified, then the
+      values in all columns and rows are trimmed. A specific column
+      may be referenced by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/trim
+  removeColumn:
+    description: >
+      <p>Use <a href="#/p5/removeColumn">removeColumn()</a> to remove an
+      existing column from a Table
+
+      object. The column to be removed may be identified by either
+
+      its title (a String) or its index value (an int).
+
+      removeColumn(0) would remove the first column, removeColumn(1)
+
+      would remove the second column, and so on.</p>
+    path: .././src/content/reference/en//p5.Table/removeColumn
+  set:
+    description: |
+      <p>Stores a value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/set
+  setNum:
+    description: |
+      <p>Stores a Float value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/setNum
+  setString:
+    description: |
+      <p>Stores a String value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/setString
+  get:
+    description: |
+      <p>Retrieves a value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/get
+  getNum:
+    description: |
+      <p>Retrieves a Float value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/getNum
+  getString:
+    description: |
+      <p>Retrieves a String value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: .././src/content/reference/en//p5.Table/getString
+  getObject:
+    description: |
+      <p>Retrieves all table data and returns as an object. If a column name is
+      passed in, each row object will be stored with that attribute as its
+      title.</p>
+    path: .././src/content/reference/en//p5.Table/getObject
+  getArray:
+    description: >
+      <p>Retrieves all table data and returns it as a multidimensional
+      array.</p>
+    path: .././src/content/reference/en//p5.Table/getArray
+---
+
+
+# p5.Table
diff --git a/src/content/reference/en/p5/p5.TableRow.mdx b/src/content/reference/en/p5/p5.TableRow.mdx
new file mode 100644
index 0000000000..7d28e84348
--- /dev/null
+++ b/src/content/reference/en/p5/p5.TableRow.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.TableRow
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>A TableRow object represents a single row of data values,
+  stored in columns, from a table.</p>
+  <p>A Table Row contains both an ordered array, and an unordered
+  JSON object.</p>
+isConstructor: true
+line: 9
+params:
+  - name: str
+    description: |
+      <p>optional: populate the row with a
+                                  string of values, separated by the
+                                  separator</p>
+    type: String
+    optional: true
+  - name: separator
+    description: |
+      <p>comma separated values (csv) by default</p>
+    type: String
+    optional: true
+memberMethodPreviews:
+  set:
+    description: |
+      <p>Stores a value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.TableRow/set
+  setNum:
+    description: |
+      <p>Stores a Float value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.TableRow/setNum
+  setString:
+    description: |
+      <p>Stores a String value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.TableRow/setString
+  get:
+    description: |
+      <p>Retrieves a value from the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: .././src/content/reference/en//p5.TableRow/get
+  getNum:
+    description: |
+      <p>Retrieves a Float value from the TableRow's specified
+      column. The column may be specified by either its ID or
+      title.</p>
+    path: .././src/content/reference/en//p5.TableRow/getNum
+  getString:
+    description: |
+      <p>Retrieves an String value from the TableRow's specified
+      column. The column may be specified by either its ID or
+      title.</p>
+    path: .././src/content/reference/en//p5.TableRow/getString
+---
+
+
+# p5.TableRow
diff --git a/src/content/reference/en/p5/p5.TypedDict.mdx b/src/content/reference/en/p5/p5.TypedDict.mdx
new file mode 100644
index 0000000000..3cf7b096d4
--- /dev/null
+++ b/src/content/reference/en/p5/p5.TypedDict.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.TypedDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Base class for all p5.Dictionary types. Specifically
+   typed Dictionary classes inherit from this class.</p>
+isConstructor: true
+line: 82
+memberMethodPreviews:
+  size:
+    description: >
+      <p>Returns the number of key-value pairs currently stored in the
+      Dictionary.</p>
+    path: .././src/content/reference/en//p5.TypedDict/size
+  hasKey:
+    description: |
+      <p>Returns true if the given key exists in the Dictionary,
+      otherwise returns false.</p>
+    path: .././src/content/reference/en//p5.TypedDict/hasKey
+  get:
+    description: |
+      <p>Returns the value stored at the given key.</p>
+    path: .././src/content/reference/en//p5.TypedDict/get
+  set:
+    description: >
+      <p>Updates the value associated with the given key in case it already
+      exists
+
+      in the Dictionary. Otherwise a new key-value pair is added.</p>
+    path: .././src/content/reference/en//p5.TypedDict/set
+  create:
+    description: |
+      <p>Creates a new key-value pair in the Dictionary.</p>
+    path: .././src/content/reference/en//p5.TypedDict/create
+  clear:
+    description: |
+      <p>Removes all previously stored key-value pairs from the Dictionary.</p>
+    path: .././src/content/reference/en//p5.TypedDict/clear
+  remove:
+    description: >
+      <p>Removes the key-value pair stored at the given key from the
+      Dictionary.</p>
+    path: .././src/content/reference/en//p5.TypedDict/remove
+  print:
+    description: >
+      <p>Logs the set of items currently stored in the Dictionary to the
+      console.</p>
+    path: .././src/content/reference/en//p5.TypedDict/print
+  saveTable:
+    description: |
+      <p>Converts the Dictionary into a CSV file for local download.</p>
+    path: .././src/content/reference/en//p5.TypedDict/saveTable
+  saveJSON:
+    description: |
+      <p>Converts the Dictionary into a JSON file for local download.</p>
+    path: .././src/content/reference/en//p5.TypedDict/saveJSON
+---
+
+
+# p5.TypedDict
diff --git a/src/content/reference/en/p5/p5.Vector.mdx b/src/content/reference/en/p5/p5.Vector.mdx
new file mode 100644
index 0000000000..4a5d2e4636
--- /dev/null
+++ b/src/content/reference/en/p5/p5.Vector.mdx
@@ -0,0 +1,470 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.Vector
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>A class to describe a two or three-dimensional vector. A vector is like an
+
+  arrow pointing in space. Vectors have both magnitude (length) and
+
+  direction.</p>
+
+  <p><code>p5.Vector</code> objects are often used to program motion because
+  they simplify
+
+  the math. For example, a moving ball has a position and a velocity.
+
+  Position describes where the ball is in space. The ball's position vector
+
+  extends from the origin to the ball's center. Velocity describes the ball's
+
+  speed and the direction it's moving. If the ball is moving straight up, its
+
+  velocity vector points straight up. Adding the ball's velocity vector to
+
+  its position vector moves it, as in <code>pos.add(vel)</code>. Vector math
+  relies on
+
+  methods inside the <code>p5.Vector</code> class.</p>
+isConstructor: true
+line: 34
+params:
+  - name: x
+    description: |
+      <p>x component of the vector.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y component of the vector.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z component of the vector.</p>
+    type: Number
+    optional: true
+memberMethodPreviews:
+  x:
+    description: |
+      <p>The x component of the vector</p>
+    path: .././src/content/reference/en//p5.Vector/x
+  'y':
+    description: |
+      <p>The y component of the vector</p>
+    path: .././src/content/reference/en//p5.Vector/y
+  z:
+    description: |
+      <p>The z component of the vector</p>
+    path: .././src/content/reference/en//p5.Vector/z
+  toString:
+    description: |
+      <p>Returns a string representation of a vector. This method is useful for
+      printing vectors to the console while debugging.</p>
+    path: .././src/content/reference/en//p5.Vector/toString
+  set:
+    description: >
+      <p>Sets the <code>x</code>, <code>y</code>, and <code>z</code> components
+      of the vector using separate numbers,
+
+      a <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.
+
+      Calling <code>set()</code> with no arguments sets the vector's components
+      to 0.</p>
+    path: .././src/content/reference/en//p5.Vector/set
+  copy:
+    description: |
+      <p>Returns a copy of the <a href="#/p5.Vector">p5.Vector</a> object.</p>
+    path: .././src/content/reference/en//p5.Vector/copy
+  add:
+    description: >
+      <p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components using separate numbers,
+
+      another <a href="#/p5.Vector">p5.Vector</a> object, or an array of
+      numbers.
+
+      Calling <code>add()</code> with no arguments has no effect.</p>
+
+      <p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
+      v1)</code>, returns a new
+
+      <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+      originals.</p>
+    path: .././src/content/reference/en//p5.Vector/add
+  rem:
+    description: >
+      <p>Performs modulo (remainder) division with a vector's <code>x</code>,
+      <code>y</code>, and <code>z</code>
+
+      components using separate numbers, another
+
+      <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.</p>
+
+      <p>The static version of <code>rem()</code> as in <code>p5.Vector.rem(v2,
+      v1)</code>, returns a new
+
+      <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+      originals.</p>
+    path: .././src/content/reference/en//p5.Vector/rem
+  sub:
+    description: >
+      <p>Subtracts from a vector's <code>x</code>, <code>y</code>, and
+      <code>z</code> components using separate
+
+      numbers, another <a href="#/p5.Vector">p5.Vector</a> object, or an array
+      of
+
+      numbers. Calling <code>sub()</code> with no arguments has no effect.</p>
+
+      <p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2,
+      v1)</code>, returns a new
+
+      <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+      originals.</p>
+    path: .././src/content/reference/en//p5.Vector/sub
+  mult:
+    description: >
+      <p>Multiplies a vector's <code>x</code>, <code>y</code>, and
+      <code>z</code> components by the same number,
+
+      separate numbers, the components of another
+
+      <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.
+      Calling
+
+      <code>mult()</code> with no arguments has no effect.</p>
+
+      <p>The static version of <code>mult()</code>, as in
+      <code>p5.Vector.mult(v, 2)</code>, returns a new
+
+      <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+      originals.</p>
+    path: .././src/content/reference/en//p5.Vector/mult
+  div:
+    description: >
+      <p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components by the same number,
+
+      separate numbers, the components of another
+
+      <a href="#/p5.Vector">p5.Vector</a> object, or an array of numbers.
+      Calling
+
+      <code>div()</code> with no arguments has no effect.</p>
+
+      <p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v,
+      2)</code>, returns a new
+
+      <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+      originals.</p>
+    path: .././src/content/reference/en//p5.Vector/div
+  mag:
+    description: |
+      <p>Returns the magnitude (length) of the vector.</p>
+    path: .././src/content/reference/en//p5.Vector/mag
+  magSq:
+    description: |
+      <p>Returns the magnitude (length) of the vector squared.</p>
+    path: .././src/content/reference/en//p5.Vector/magSq
+  dot:
+    description: >
+      <p>Returns the dot product of two vectors. The dot product is a number
+      that
+
+      describes the overlap between two vectors. Visually, the dot product can
+      be
+
+      thought of as the "shadow" one vector casts on another. The dot product's
+
+      magnitude is largest when two vectors point in the same or opposite
+
+      directions. Its magnitude is 0 when two vectors form a right angle.</p>
+
+      <p>The version of <code>dot()</code> with one parameter interprets it as
+      another
+
+      <a href="#/p5.Vector">p5.Vector</a> object.</p>
+
+      <p>The version of <code>dot()</code> with multiple parameters interprets
+      them as the
+
+      <code>x</code>, <code>y</code>, and <code>z</code> components of another
+      vector.</p>
+
+      <p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1,
+      v2)</code>, is the same
+
+      as calling <code>v1.dot(v2)</code>.</p>
+    path: .././src/content/reference/en//p5.Vector/dot
+  cross:
+    description: >
+      <p>Returns the cross product of two vectors. The cross product is a vector
+
+      that points straight out of the plane created by two vectors. The cross
+
+      product's magnitude is the area of the parallelogram formed by the
+      original
+
+      two vectors.</p>
+
+      <p>The static version of <code>cross()</code>, as in
+      <code>p5.Vector.cross(v1, v2)</code>, is the same
+
+      as calling <code>v1.cross(v2)</code>.</p>
+    path: .././src/content/reference/en//p5.Vector/cross
+  dist:
+    description: >
+      <p>Returns the distance between two points represented by vectors. A
+      point's
+
+      coordinates can be thought of as a vector's components.</p>
+
+      <p>The static version of <code>dist()</code>, as in
+      <code>p5.Vector.dist(v1, v2)</code>, is the same
+
+      as calling <code>v1.dist(v2)</code>.</p>
+
+      <p>Use <a href="#/p5/dist">dist()</a> to calculate the distance between
+      points
+
+      using coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>
+    path: .././src/content/reference/en//p5.Vector/dist
+  normalize:
+    description: >
+      <p>Scales the components of a <a href="#/p5.Vector">p5.Vector</a> object
+      so
+
+      that its magnitude is 1.</p>
+
+      <p>The static version of <code>normalize()</code>,  as in
+      <code>p5.Vector.normalize(v)</code>,
+
+      returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't
+      change
+
+      the original.</p>
+    path: .././src/content/reference/en//p5.Vector/normalize
+  limit:
+    description: >
+      <p>Limits a vector's magnitude to a maximum value.</p>
+
+      <p>The static version of <code>limit()</code>, as in
+      <code>p5.Vector.limit(v, 5)</code>, returns a
+
+      new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+      original.</p>
+    path: .././src/content/reference/en//p5.Vector/limit
+  setMag:
+    description: >
+      <p>Sets a vector's magnitude to a given value.</p>
+
+      <p>The static version of <code>setMag()</code>, as in
+      <code>p5.Vector.setMag(v, 10)</code>, returns
+
+      a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't change the
+
+      original.</p>
+    path: .././src/content/reference/en//p5.Vector/setMag
+  heading:
+    description: >
+      <p>Calculates the angle a 2D vector makes with the positive x-axis. Angles
+
+      increase in the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="#/p5/createVector">createVector()</a>, <code>heading()</code>
+      returns angles
+
+      in the units of the current <a href="#/p5/angleMode">angleMode()</a>.</p>
+
+      <p>The static version of <code>heading()</code>, as in
+      <code>p5.Vector.heading(v)</code>, works the
+
+      same way.</p>
+    path: .././src/content/reference/en//p5.Vector/heading
+  setHeading:
+    description: >
+      <p>Rotates a 2D vector to a specific angle without changing its magnitude.
+
+      By convention, the positive x-axis has an angle of 0. Angles increase in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="#/p5/createVector">createVector()</a>, <code>setHeading()</code>
+      uses
+
+      the units of the current <a href="#/p5/angleMode">angleMode()</a>.</p>
+    path: .././src/content/reference/en//p5.Vector/setHeading
+  rotate:
+    description: >
+      <p>Rotates a 2D vector by an angle without changing its magnitude.
+
+      By convention, the positive x-axis has an angle of 0. Angles increase in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="#/p5/createVector">createVector()</a>, <code>rotate()</code> uses
+
+      the units of the current <a href="#/p5/angleMode">angleMode()</a>.</p>
+
+      <p>The static version of <code>rotate()</code>, as in
+      <code>p5.Vector.rotate(v, PI)</code>,
+
+      returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't
+      change
+
+      the original.</p>
+    path: .././src/content/reference/en//p5.Vector/rotate
+  angleBetween:
+    description: >
+      <p>Returns the angle between two vectors. The angles returned are signed,
+
+      which means that <code>v1.angleBetween(v2) ===
+      -v2.angleBetween(v1)</code>.</p>
+
+      <p>If the vector was created with
+
+      <a href="#/p5/createVector">createVector()</a>,
+      <code>angleBetween()</code> returns
+
+      angles in the units of the current
+
+      <a href="#/p5/angleMode">angleMode()</a>.</p>
+    path: .././src/content/reference/en//p5.Vector/angleBetween
+  lerp:
+    description: >
+      <p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code>
+      components that are proportionally the
+
+      same distance between two vectors. The <code>amt</code> parameter is the
+      amount to
+
+      interpolate between the old vector and the new vector. 0.0 keeps all
+
+      components equal to the old vector's, 0.5 is halfway between, and 1.0 sets
+
+      all components equal to the new vector's.</p>
+
+      <p>The static version of <code>lerp()</code>, as in
+      <code>p5.Vector.lerp(v0, v1, 0.5)</code>,
+
+      returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't
+      change
+
+      the original.</p>
+    path: .././src/content/reference/en//p5.Vector/lerp
+  slerp:
+    description: >
+      <p>Calculates a new heading and magnitude that are between two vectors.
+      The
+
+      <code>amt</code> parameter is the amount to interpolate between the old
+      vector and
+
+      the new vector. 0.0 keeps the heading and magnitude equal to the old
+
+      vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
+
+      magnitude equal to the new vector's.</p>
+
+      <p><code>slerp()</code> differs from <a href="#/p5.Vector/lerp">lerp()</a>
+      because
+
+      it interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets
+      <code>v0</code>'s
+
+      magnitude to a value halfway between its original magnitude and
+      <code>v1</code>'s.
+
+      Calling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>
+
+      <p>The static version of <code>slerp()</code>, as in
+      <code>p5.Vector.slerp(v0, v1, 0.5)</code>,
+
+      returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't
+      change
+
+      the original.</p>
+    path: .././src/content/reference/en//p5.Vector/slerp
+  reflect:
+    description: >
+      <p>Reflects a vector about a line in 2D or a plane in 3D. The orientation
+      of
+
+      the line or plane is described by a normal vector that points away from
+      the
+
+      shape.</p>
+
+      <p>The static version of <code>reflect()</code>, as in
+      <code>p5.Vector.reflect(v, n)</code>,
+
+      returns a new <a href="#/p5.Vector">p5.Vector</a> object and doesn't
+      change
+
+      the original.</p>
+    path: .././src/content/reference/en//p5.Vector/reflect
+  array:
+    description: |
+      <p>Returns the vector's components as an array of numbers.</p>
+    path: .././src/content/reference/en//p5.Vector/array
+  equals:
+    description: >
+      <p>Returns <code>true</code> if the vector's components are all the same
+      as another
+
+      vector's and <code>false</code> if not.</p>
+
+      <p>The version of <code>equals()</code> with one parameter interprets it
+      as another
+
+      <a href="#/p5.Vector">p5.Vector</a> object.</p>
+
+      <p>The version of <code>equals()</code> with multiple parameters
+      interprets them as the
+
+      components of another vector. Any missing parameters are assigned the
+      value
+
+      0.</p>
+
+      <p>The static version of <code>equals()</code>, as in
+      <code>p5.Vector.equals(v0, v1)</code>,
+
+      interprets both parameters as <a href="#/p5.Vector">p5.Vector</a>
+      objects.</p>
+    path: .././src/content/reference/en//p5.Vector/equals
+  fromAngle:
+    description: |
+      <p>Make a new 2D vector from an angle.</p>
+    path: .././src/content/reference/en//p5.Vector/fromAngle
+  fromAngles:
+    description: |
+      <p>Make a new 3D vector from a pair of ISO spherical angles.</p>
+    path: .././src/content/reference/en//p5.Vector/fromAngles
+  random2D:
+    description: |
+      <p>Make a new 2D unit vector with a random heading.</p>
+    path: .././src/content/reference/en//p5.Vector/random2D
+  random3D:
+    description: |
+      <p>Make a new 3D unit vector with a random heading.</p>
+    path: .././src/content/reference/en//p5.Vector/random3D
+---
+
+
+# p5.Vector
diff --git a/src/content/reference/en/p5/p5.XML.mdx b/src/content/reference/en/p5/p5.XML.mdx
new file mode 100644
index 0000000000..ade08f60d8
--- /dev/null
+++ b/src/content/reference/en/p5/p5.XML.mdx
@@ -0,0 +1,141 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5.XML
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: >
+  <p>XML is a representation of an XML object, able to parse XML code. Use
+
+  <a href="#/p5/loadXML">loadXML()</a> to load external XML files and create XML
+  objects.</p>
+isConstructor: true
+line: 9
+memberMethodPreviews:
+  getParent:
+    description: |
+      <p>Gets a copy of the element's parent. Returns the parent as another
+      <a href="#/p5.XML">p5.XML</a> object.</p>
+    path: .././src/content/reference/en//p5.XML/getParent
+  getName:
+    description: |
+      <p>Gets the element's full name, which is returned as a String.</p>
+    path: .././src/content/reference/en//p5.XML/getName
+  setName:
+    description: |
+      <p>Sets the element's name, which is specified as a String.</p>
+    path: .././src/content/reference/en//p5.XML/setName
+  hasChildren:
+    description: >
+      <p>Checks whether or not the element has any children, and returns the
+      result
+
+      as a boolean.</p>
+    path: .././src/content/reference/en//p5.XML/hasChildren
+  listChildren:
+    description: >
+      <p>Get the names of all of the element's children, and returns the names
+      as an
+
+      array of Strings. This is the same as looping through and calling <a
+      href="#/p5.XML/getName">getName()</a>
+
+      on each child element individually.</p>
+    path: .././src/content/reference/en//p5.XML/listChildren
+  getChildren:
+    description: >
+      <p>Returns all of the element's children as an array of <a
+      href="#/p5.XML">p5.XML</a> objects. When
+
+      the name parameter is specified, then it will return all children that
+      match
+
+      that name.</p>
+    path: .././src/content/reference/en//p5.XML/getChildren
+  getChild:
+    description: >
+      <p>Returns the first of the element's children that matches the name
+      parameter
+
+      or the child of the given index.It returns undefined if no matching
+
+      child is found.</p>
+    path: .././src/content/reference/en//p5.XML/getChild
+  addChild:
+    description: >
+      <p>Appends a new child to the element. The child can be specified with
+
+      either a String, which will be used as the new tag's name, or as a
+
+      reference to an existing <a href="#/p5.XML">p5.XML</a> object.
+
+      A reference to the newly created child is returned as an <a
+      href="#/p5.XML">p5.XML</a> object.</p>
+    path: .././src/content/reference/en//p5.XML/addChild
+  removeChild:
+    description: |
+      <p>Removes the element specified by name or index.</p>
+    path: .././src/content/reference/en//p5.XML/removeChild
+  getAttributeCount:
+    description: >
+      <p>Counts the specified element's number of attributes, returned as an
+      Number.</p>
+    path: .././src/content/reference/en//p5.XML/getAttributeCount
+  listAttributes:
+    description: |
+      <p>Gets all of the specified element's attributes, and returns them as an
+      array of Strings.</p>
+    path: .././src/content/reference/en//p5.XML/listAttributes
+  hasAttribute:
+    description: |
+      <p>Checks whether or not an element has the specified attribute.</p>
+    path: .././src/content/reference/en//p5.XML/hasAttribute
+  getNum:
+    description: >
+      <p>Returns an attribute value of the element as an Number. If the
+      defaultValue
+
+      parameter is specified and the attribute doesn't exist, then defaultValue
+
+      is returned. If no defaultValue is specified and the attribute doesn't
+
+      exist, the value 0 is returned.</p>
+    path: .././src/content/reference/en//p5.XML/getNum
+  getString:
+    description: >
+      <p>Returns an attribute value of the element as an String. If the
+      defaultValue
+
+      parameter is specified and the attribute doesn't exist, then defaultValue
+
+      is returned. If no defaultValue is specified and the attribute doesn't
+
+      exist, null is returned.</p>
+    path: .././src/content/reference/en//p5.XML/getString
+  setAttribute:
+    description: >
+      <p>Sets the content of an element's attribute. The first parameter
+      specifies
+
+      the attribute name, while the second specifies the new content.</p>
+    path: .././src/content/reference/en//p5.XML/setAttribute
+  getContent:
+    description: |
+      <p>Returns the content of an element. If there is no such content,
+      defaultValue is returned if specified, otherwise null is returned.</p>
+    path: .././src/content/reference/en//p5.XML/getContent
+  setContent:
+    description: |
+      <p>Sets the element's content.</p>
+    path: .././src/content/reference/en//p5.XML/setContent
+  serialize:
+    description: >
+      <p>Serializes the element into a string. This function is useful for
+      preparing
+
+      the content to be sent over a http request or saved to file.</p>
+    path: .././src/content/reference/en//p5.XML/serialize
+---
+
+
+# p5.XML
diff --git a/src/content/reference/en/p5/p5.mdx b/src/content/reference/en/p5/p5.mdx
new file mode 100644
index 0000000000..6ded003e42
--- /dev/null
+++ b/src/content/reference/en/p5/p5.mdx
@@ -0,0 +1,39 @@
+---
+layout: '@layouts/reference/ClassReferenceLayout.astro'
+title: p5
+module: IO
+submodule: Output
+file: src/core/main.js
+description: |
+  <p>This is the p5 instance constructor.</p>
+  <p>A p5 instance holds all the properties and methods related to
+  a p5 sketch.  It expects an incoming sketch closure and it can also
+  take an optional node parameter for attaching the generated p5 canvas
+  to a node.  The sketch closure takes the newly created p5 instance as
+  its sole argument and may optionally set <a href="#/p5/preload">preload()</a>,
+  <a href="#/p5/setup">setup()</a>, and/or
+  <a href="#/p5/draw">draw()</a> properties on it for running a sketch.</p>
+  <p>A p5 sketch can run in "global" or "instance" mode:
+  "global"   - all properties and methods are attached to the window
+  "instance" - all properties and methods are bound to this p5 object</p>
+isConstructor: true
+line: 12
+params:
+  - name: sketch
+    description: |
+      <p>a closure that can set optional <a href="#/p5/preload">preload()</a>,
+                                   <a href="#/p5/setup">setup()</a>, and/or <a href="#/p5/draw">draw()</a> properties on the
+                                   given p5 instance</p>
+    type: Function(p5)
+  - name: node
+    description: |
+      <p>element to attach canvas to</p>
+    type: HTMLElement
+    optional: true
+return:
+  description: a p5 instance
+  type: P5
+---
+
+
+# p5
diff --git a/src/content/reference/en/p5/pAccelerationX.mdx b/src/content/reference/en/p5/pAccelerationX.mdx
new file mode 100644
index 0000000000..8bc35b01b4
--- /dev/null
+++ b/src/content/reference/en/p5/pAccelerationX.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pAccelerationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationX always contains the acceleration of the
+  device along the x axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 90
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# pAccelerationX
diff --git a/src/content/reference/en/p5/pAccelerationY.mdx b/src/content/reference/en/p5/pAccelerationY.mdx
new file mode 100644
index 0000000000..186ffade2e
--- /dev/null
+++ b/src/content/reference/en/p5/pAccelerationY.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pAccelerationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationY always contains the acceleration of the
+  device along the y axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 100
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# pAccelerationY
diff --git a/src/content/reference/en/p5/pAccelerationZ.mdx b/src/content/reference/en/p5/pAccelerationZ.mdx
new file mode 100644
index 0000000000..eeca60bc33
--- /dev/null
+++ b/src/content/reference/en/p5/pAccelerationZ.mdx
@@ -0,0 +1,18 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pAccelerationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationZ always contains the acceleration of the
+  device along the z axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 110
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# pAccelerationZ
diff --git a/src/content/reference/en/p5/pRotationX.mdx b/src/content/reference/en/p5/pRotationX.mdx
new file mode 100644
index 0000000000..eeefadaf5d
--- /dev/null
+++ b/src/content/reference/en/p5/pRotationX.mdx
@@ -0,0 +1,53 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pRotationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pRotationX always contains the rotation of the
+  device along the x axis in the frame previous to the current frame.
+  If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
+  the value will be -180 to 180. If it is set to RADIANS, the value will
+  be -PI to PI.</p>
+  <p>pRotationX can also be used with rotationX to determine the rotate
+  direction of the device along the X-axis.</p>
+line: 234
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationX - pRotationX < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    // Simple range conversion to make things simpler.
+    // This is not absolutely necessary but the logic
+    // will be different in that case.
+
+    let rX = rotationX + 180;
+    let pRX = pRotationX + 180;
+
+    if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
+      rotateDirection = 'clockwise';
+    } else if (rX - pRX < 0 || rX - pRX > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pRotationX
diff --git a/src/content/reference/en/p5/pRotationY.mdx b/src/content/reference/en/p5/pRotationY.mdx
new file mode 100644
index 0000000000..427c08f33a
--- /dev/null
+++ b/src/content/reference/en/p5/pRotationY.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pRotationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pRotationY always contains the rotation of the
+  device along the y axis in the frame previous to the current frame.
+  If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
+  the value will be -90 to 90. If it is set to RADIANS, the value will
+  be -PI/2 to PI/2.</p>
+  <p>pRotationY can also be used with rotationY to determine the rotate
+  direction of the device along the Y-axis.</p>
+line: 278
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationY - pRotationY < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    // Simple range conversion to make things simpler.
+    // This is not absolutely necessary but the logic
+    // will be different in that case.
+
+    let rY = rotationY + 180;
+    let pRY = pRotationY + 180;
+
+    if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
+      rotateDirection = 'clockwise';
+    } else if (rY - pRY < 0 || rY - pRY > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pRotationY
diff --git a/src/content/reference/en/p5/pRotationZ.mdx b/src/content/reference/en/p5/pRotationZ.mdx
new file mode 100644
index 0000000000..8413cdf9ac
--- /dev/null
+++ b/src/content/reference/en/p5/pRotationZ.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pRotationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pRotationZ always contains the rotation of the
+  device along the z axis in the frame previous to the current frame.
+  If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
+  the value will be 0 to 360. If it is set to RADIANS, the value will
+  be 0 to 2*PI.</p>
+  <p>pRotationZ can also be used with rotationZ to determine the rotate
+  direction of the device along the Z-axis.</p>
+line: 321
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationZ - pRotationZ < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    if (
+      (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
+      rotationZ - pRotationZ < -270
+    ) {
+      rotateDirection = 'clockwise';
+    } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pRotationZ
diff --git a/src/content/reference/en/p5/perspective.mdx b/src/content/reference/en/p5/perspective.mdx
new file mode 100644
index 0000000000..f649f4ff6a
--- /dev/null
+++ b/src/content/reference/en/p5/perspective.mdx
@@ -0,0 +1,125 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: perspective
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets a perspective projection for the current camera in a 3D sketch.
+
+  This projection represents depth through foreshortening: objects
+
+  that are close to the camera appear their actual size while those
+
+  that are further away from the camera appear smaller.</p>
+
+  <p>The parameters to this function define the viewing frustum
+
+  (the truncated pyramid within which objects are seen by the camera) through
+
+  vertical field of view, aspect ratio (usually width/height), and near and far
+
+  clipping planes.</p>
+
+  <p>If no parameters are given, the default values are used as:</p>
+
+  <ul>
+
+  <li><code>fov</code> : The default field of view for the camera is such that
+  the full height of renderer is visible when it is positioned at a default
+  distance of 800 units from the camera.</li>
+
+  <li><code>aspect</code> : The default aspect ratio is the ratio of renderer's
+  width to renderer's height.</li>
+
+  <li><code>near</code> : The default value for the near clipping plane is 80,
+  which is 0.1 times the default distance from the camera to its subject.</li>
+
+  <li><code>far</code> : The default value for the far clipping plane is 8000,
+  which is 10 times the default distance from the camera to its subject.</li>
+
+  </ul>
+
+  <p>If you prefer a fixed field of view, follow these steps:</p>
+
+  <ol>
+
+  <li>Choose your desired field of view angle (<code>fovy</code>). This is how
+  wide the camera can see.</li>
+
+  <li>To ensure that you can see the entire width across horizontally and height
+  across vertically, place the camera a distance of <code>(height / 2) /
+  tan(fovy / 2)</code> back from its subject.</li>
+
+  <li>Call perspective with the chosen field of view, canvas aspect ratio, and
+  near/far values:
+
+  <code>perspective(fovy, width / height, cameraDistance / 10, cameraDistance *
+  10);</code></li>
+
+  </ol>
+line: 121
+params:
+  - name: fovy
+    description: |
+      <p>camera frustum vertical field of view,
+                                from bottom to top of view, in <a href="#/p5/angleMode">angleMode</a> units</p>
+    type: Number
+    optional: true
+  - name: aspect
+    description: |
+      <p>camera frustum aspect ratio</p>
+    type: Number
+    optional: true
+  - name: near
+    description: |
+      <p>frustum near plane length</p>
+    type: Number
+    optional: true
+  - name: far
+    description: |
+      <p>frustum far plane length</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    //drag the mouse to look around!
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI / 3.0, width / height, 0.1, 500);
+      describe(
+        'two colored 3D boxes move back and forth, rotating as mouse is dragged.'
+      );
+    }
+    function draw() {
+      background(200);
+      orbitControl();
+      normalMaterial();
+
+      rotateX(-0.3);
+      rotateY(-0.2);
+      translate(0, 0, -50);
+
+      push();
+      translate(-15, 0, sin(frameCount / 30) * 65);
+      box(30);
+      pop();
+      push();
+      translate(15, 0, sin(frameCount / 30 + PI) * 65);
+      box(30);
+      pop();
+    }
+    </code>
+    </div>
+alt: 'two colored 3D boxes move back and forth, rotating as mouse is dragged.'
+chainable: true
+---
+
+
+# perspective
diff --git a/src/content/reference/en/p5/pixelDensity.mdx b/src/content/reference/en/p5/pixelDensity.mdx
new file mode 100644
index 0000000000..e99e0c9309
--- /dev/null
+++ b/src/content/reference/en/p5/pixelDensity.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pixelDensity
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Sets the pixel scaling for high pixel density displays.</p>
+
+  <p>By default, the pixel density is set to match display density. Calling
+
+  <code>pixelDensity(1)</code> turn this off.</p>
+
+  <p>Calling <code>pixelDensity()</code> without an argument returns the current
+  pixel
+
+  density.</p>
+line: 943
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 1.
+      pixelDensity(1);
+
+      // Create a canvas and draw
+      // a circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A fuzzy white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 3.
+      pixelDensity(3);
+
+      // Create a canvas, paint the
+      // background, and draw a
+      // circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A sharp white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# pixelDensity
diff --git a/src/content/reference/en/p5/pixels.mdx b/src/content/reference/en/p5/pixels.mdx
new file mode 100644
index 0000000000..27d12f3e4f
--- /dev/null
+++ b/src/content/reference/en/p5/pixels.mdx
@@ -0,0 +1,124 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>An array containing the color of each pixel on the canvas. Colors are
+
+  stored as numbers representing red, green, blue, and alpha (RGBA) values.
+
+  <code>pixels</code> is a one-dimensional array for performance reasons.</p>
+
+  <p>Each pixel occupies four elements in the <code>pixels</code> array, one for
+  each RGBA
+
+  value. For example, the pixel at coordinates (0, 0) stores its RGBA values
+
+  at <code>pixels[0]</code>, <code>pixels[1]</code>, <code>pixels[2]</code>, and
+  <code>pixels[3]</code>, respectively.
+
+  The next pixel at coordinates (1, 0) stores its RGBA values at
+  <code>pixels[4]</code>,
+
+  <code>pixels[5]</code>, <code>pixels[6]</code>, and <code>pixels[7]</code>.
+  And so on. The <code>pixels</code> array
+
+  for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.</p>
+
+  <p>Some displays use several smaller pixels to set the color at a single
+
+  point. The <a href="#/p5/pixelDensity">pixelDensity()</a> function returns
+
+  the pixel density of the canvas. High density displays often have a
+
+  <a href="#/p5/pixelDensity">pixelDensity()</a> of 2. On such a display, the
+
+  <code>pixels</code> array for a 100×100 canvas has 200 × 200 × 4 =
+
+  160,000 elements.</p>
+
+  <p>Accessing the RGBA values for a point on the canvas requires a little math
+
+  as shown below. The <a href="#/p5/loadPixels">loadPixels()</a> function
+
+  must be called before accessing the <code>pixels</code> array. The
+
+  <a href="#/p5/updatePixels">updatePixels()</a> function must be called
+
+  after any changes are made.</p>
+line: 12
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    loadPixels();
+    let x = 50;
+    let y = 50;
+    let d = pixelDensity();
+    for (let i = 0; i < d; i += 1) {
+      for (let j = 0; j < d; j += 1) {
+        let index = 4 * ((y * d + j) * width * d + (x * d + i));
+        // Red.
+        pixels[index] = 0;
+        // Green.
+        pixels[index + 1] = 0;
+        // Blue.
+        pixels[index + 2] = 0;
+        // Alpha.
+        pixels[index + 3] = 255;
+      }
+    }
+    updatePixels();
+
+    describe('A black dot in the middle of a gray rectangle.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    loadPixels();
+    let d = pixelDensity();
+    let halfImage = 4 * (d * width) * (d * height / 2);
+    for (let i = 0; i < halfImage; i += 4) {
+      // Red.
+      pixels[i] = 255;
+      // Green.
+      pixels[i + 1] = 0;
+      // Blue.
+      pixels[i + 2] = 0;
+      // Alpha.
+      pixels[i + 3] = 255;
+    }
+    updatePixels();
+
+    describe('A red rectangle drawn above a gray rectangle.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pink = color(255, 102, 204);
+    loadPixels();
+    let d = pixelDensity();
+    let halfImage = 4 * (d * width) * (d * height / 2);
+    for (let i = 0; i < halfImage; i += 4) {
+      pixels[i] = red(pink);
+      pixels[i + 1] = green(pink);
+      pixels[i + 2] = blue(pink);
+      pixels[i + 3] = alpha(pink);
+    }
+    updatePixels();
+
+    describe('A pink rectangle drawn above a gray rectangle.');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pixels
diff --git a/src/content/reference/en/p5/plane.mdx b/src/content/reference/en/p5/plane.mdx
new file mode 100644
index 0000000000..f0036de11d
--- /dev/null
+++ b/src/content/reference/en/p5/plane.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: plane
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: |
+  <p>Draw a plane with given a width and height</p>
+line: 183
+params:
+  - name: width
+    description: |
+      <p>width of the plane</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the plane</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>Optional number of triangle
+                                  subdivisions in x-dimension</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>Optional number of triangle
+                                  subdivisions in y-dimension</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // draw a plane
+    // with width 50 and height 50
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('a white plane with black wireframe lines');
+    }
+
+    function draw() {
+      background(200);
+      plane(50, 50);
+    }
+    </code>
+    </div>
+alt: |-
+  Nothing displayed on canvas
+  Rotating interior view of a box with sides that change color.
+  3d red and green gradient.
+  Rotating interior view of a cylinder with sides that change color.
+  Rotating view of a cylinder with sides that change color.
+  3d red and green gradient.
+  rotating view of a multi-colored cylinder with concave sides.
+chainable: true
+---
+
+
+# plane
diff --git a/src/content/reference/en/p5/pmouseX.mdx b/src/content/reference/en/p5/pmouseX.mdx
new file mode 100644
index 0000000000..1663629938
--- /dev/null
+++ b/src/content/reference/en/p5/pmouseX.mdx
@@ -0,0 +1,45 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pmouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The system variable pmouseX always contains the horizontal position of
+
+  the mouse or finger in the frame previous to the current frame, relative to
+
+  (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and
+
+  (-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current
+  mouseX
+
+  value at the start of each touch event.</p>
+line: 128
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move the mouse across the canvas to leave a trail
+    function setup() {
+      //slow down the frameRate to make it more visible
+      frameRate(10);
+    }
+
+    function draw() {
+      background(244, 248, 252);
+      line(mouseX, mouseY, pmouseX, pmouseY);
+      print(pmouseX + ' -> ' + mouseX);
+      describe(`line trail is created from cursor movements.
+        faster movement make longer line.`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pmouseX
diff --git a/src/content/reference/en/p5/pmouseY.mdx b/src/content/reference/en/p5/pmouseY.mdx
new file mode 100644
index 0000000000..45fcab06e7
--- /dev/null
+++ b/src/content/reference/en/p5/pmouseY.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pmouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The system variable pmouseY always contains the vertical position of
+
+  the mouse or finger in the frame previous to the current frame, relative to
+
+  (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and
+
+  (-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current
+  mouseY
+
+  value at the start of each touch event.</p>
+line: 159
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(237, 34, 93);
+      fill(0);
+      //draw a square only if the mouse is not moving
+      if (mouseY === pmouseY && mouseX === pmouseX) {
+        rect(20, 20, 60, 60);
+      }
+
+      print(pmouseY + ' -> ' + mouseY);
+      describe(`60-by-60 black rect center, fuchsia background.
+        rect flickers on mouse movement`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pmouseY
diff --git a/src/content/reference/en/p5/point.mdx b/src/content/reference/en/p5/point.mdx
new file mode 100644
index 0000000000..8f18af13a0
--- /dev/null
+++ b/src/content/reference/en/p5/point.mdx
@@ -0,0 +1,80 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: point
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a point, a single coordinate in space. Its default size is one pixel.
+  The first two
+
+  parameters are the point's x- and y-coordinates, respectively. To color a
+  point, use
+
+  the <a href="#/p5/stroke">stroke()</a> function. To change its size, use the
+
+  <a href="#/p5/strokeWeight">strokeWeight()</a> function.</p>
+
+  <p>The version of <code>point()</code> with three parameters allows the point
+  to be drawn in 3D
+
+  space. Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="#/p5/createCanvas">createCanvas()</a>.</p>
+
+  <p>The version of point() with one parameter allows the point's location to be
+  set with
+
+  a <a href="#/p5/p5.Vector">p5.Vector</a> object.</p>
+line: 416
+itemtype: method
+class: p5
+example:
+  - |
+
+    <div>
+    <code>
+    point(30, 20);
+    point(85, 20);
+    point(85, 75);
+    point(30, 75);
+    describe(
+      'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+    );
+    </code>
+    </div>
+
+    <div>
+    <code>
+    point(30, 20);
+    point(85, 20);
+    stroke('purple');
+    strokeWeight(10);
+    point(85, 75);
+    point(30, 75);
+    describe(
+      'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
+    );
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let a = createVector(10, 10);
+    point(a);
+    let b = createVector(10, 20);
+    point(b);
+    let c = createVector(20, 10);
+    point(c);
+    let d = createVector(20, 20);
+    point(d);
+    describe(
+      'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+    );
+    </code>
+    </div>
+chainable: true
+---
+
+
+# point
diff --git a/src/content/reference/en/p5/pointLight.mdx b/src/content/reference/en/p5/pointLight.mdx
new file mode 100644
index 0000000000..c3dcbeddd6
--- /dev/null
+++ b/src/content/reference/en/p5/pointLight.mdx
@@ -0,0 +1,57 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pointLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: |
+  <p>Creates a point light with the given color and position.</p>
+  <p>A point light emits light from a single point in all directions.
+  Because the light is emitted from a specific point (position),
+  it has a different effect when it is positioned farther vs. nearer
+  an object.</p>
+  <p>A maximum of <strong>5</strong> point lights can be active at once.</p>
+  <p>Note: lights need to be called (whether directly or indirectly)
+  within draw() to remain persistent in a looping program.
+  Placing them in setup() will cause them to only have an effect
+  the first time through the loop.</p>
+line: 373
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe(
+        'scene with sphere and point light. The position of the light is controlled with the mouse position.'
+      );
+    }
+    function draw() {
+      background(0);
+      // move your mouse to change light position
+      let locX = mouseX - width / 2;
+      let locY = mouseY - height / 2;
+      // to set the light position,
+      // think of the world's coordinate as:
+      // -width/2,-height/2 ----------- width/2,-height/2
+      //                   |           |
+      //                   |    0,0    |
+      //                   |           |
+      //  -width/2,height/2 ----------- width/2,height/2
+      pointLight(250, 250, 250, locX, locY, 50);
+      noStroke();
+      sphere(40);
+    }
+    </code>
+    </div>
+alt: |-
+  scene with sphere and point light. The position of
+  the light is controlled with the mouse position.
+chainable: true
+---
+
+
+# pointLight
diff --git a/src/content/reference/en/p5/pop.mdx b/src/content/reference/en/p5/pop.mdx
new file mode 100644
index 0000000000..c36da18ede
--- /dev/null
+++ b/src/content/reference/en/p5/pop.mdx
@@ -0,0 +1,148 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>The <a href="#/p5/push">push()</a> function saves the current drawing style
+
+  settings and transformations, while <a href="#/p5/pop">pop()</a> restores
+
+  these settings. Note that these functions are always used together. They allow
+
+  you to change the style and transformation settings and later return to what
+
+  you had. When a new state is started with <a href="#/p5/push">push()</a>, it
+
+  builds on the current style and transform information. The <a
+  href="#/p5/push">push()</a>
+
+  and <a href="#/p5/pop">pop()</a> functions can be embedded to provide more
+
+  control. (See the second example for a demonstration.)</p>
+
+  <p><a href="#/p5/push">push()</a> stores information related to the current
+  transformation state
+
+  and style settings controlled by the following functions:
+
+  <a href="#/p5/fill">fill()</a>,
+
+  <a href="#/p5/noFill">noFill()</a>,
+
+  <a href="#/p5/noStroke">noStroke()</a>,
+
+  <a href="#/p5/stroke">stroke()</a>,
+
+  <a href="#/p5/tint">tint()</a>,
+
+  <a href="#/p5/noTint">noTint()</a>,
+
+  <a href="#/p5/strokeWeight">strokeWeight()</a>,
+
+  <a href="#/p5/strokeCap">strokeCap()</a>,
+
+  <a href="#/p5/strokeJoin">strokeJoin()</a>,
+
+  <a href="#/p5/imageMode">imageMode()</a>,
+
+  <a href="#/p5/rectMode">rectMode()</a>,
+
+  <a href="#/p5/ellipseMode">ellipseMode()</a>,
+
+  <a href="#/p5/colorMode">colorMode()</a>,
+
+  <a href="#/p5/textAlign">textAlign()</a>,
+
+  <a href="#/p5/textFont">textFont()</a>,
+
+  <a href="#/p5/textSize">textSize()</a>,
+
+  <a href="#/p5/textLeading">textLeading()</a>,
+
+  <a href="#/p5/applyMatrix">applyMatrix()</a>,
+
+  <a href="#/p5/resetMatrix">resetMatrix()</a>,
+
+  <a href="#/p5/rotate">rotate()</a>,
+
+  <a href="#/p5/scale">scale()</a>,
+
+  <a href="#/p5/shearX">shearX()</a>,
+
+  <a href="#/p5/shearY">shearY()</a>,
+
+  <a href="#/p5/translate">translate()</a>,
+
+  <a href="#/p5/noiseSeed">noiseSeed()</a>.</p>
+
+  <p>In WEBGL mode additional style settings are stored. These are controlled by
+
+  the following functions:
+
+  <a href="#/p5/setCamera">setCamera()</a>,
+
+  <a href="#/p5/ambientLight">ambientLight()</a>,
+
+  <a href="#/p5/directionalLight">directionalLight()</a>,
+
+  <a href="#/p5/pointLight">pointLight()</a>,
+
+  <a href="#/p5/texture">texture()</a>,
+
+  <a href="#/p5/specularMaterial">specularMaterial()</a>,
+
+  <a href="#/p5/shininess">shininess()</a>,
+
+  <a href="#/p5/normalMaterial">normalMaterial()</a> and
+
+  <a href="#/p5/shader">shader()</a>.</p>
+line: 290
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    ellipse(0, 50, 33, 33); // Left circle
+
+    push(); // Start a new drawing state
+    translate(50, 0);
+    strokeWeight(10);
+    fill(204, 153, 0);
+    ellipse(0, 50, 33, 33); // Middle circle
+    pop(); // Restore original state
+
+    ellipse(100, 50, 33, 33); // Right circle
+    </code>
+    </div>
+
+    <div>
+    <code>
+    ellipse(0, 50, 33, 33); // Left circle
+
+    push(); // Start a new drawing state
+    strokeWeight(10);
+    fill(204, 153, 0);
+    ellipse(33, 50, 33, 33); // Left-middle circle
+
+    push(); // Start another new drawing state
+    stroke(0, 102, 153);
+    ellipse(66, 50, 33, 33); // Right-middle circle
+    pop(); // Restore previous state
+
+    pop(); // Restore original state
+
+    ellipse(100, 50, 33, 33); // Right circle
+    </code>
+    </div>
+alt: |-
+  Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+  2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+chainable: false
+---
+
+
+# pop
diff --git a/src/content/reference/en/p5/pow.mdx b/src/content/reference/en/p5/pow.mdx
new file mode 100644
index 0000000000..3e881e8f78
--- /dev/null
+++ b/src/content/reference/en/p5/pow.mdx
@@ -0,0 +1,67 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pow
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates exponential expressions such as 2^3.</p>
+  <p>For example, <code>pow(2, 3)</code> is equivalent to the expression
+  2 × 2 × 2. <code>pow(2, -3)</code> is equivalent to 1 ÷
+  (2 × 2 × 2).</p>
+line: 601
+params:
+  - name: 'n'
+    description: |
+      <p>base of the exponential expression.</p>
+    type: Number
+  - name: e
+    description: |
+      <p>power by which to raise the base.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let base = 3;
+
+
+    let d = pow(base, 1);
+
+    circle(10, 10, d);
+
+
+    d = pow(base, 2);
+
+    circle(20, 20, d);
+
+
+    d = pow(base, 3);
+
+    circle(40, 40, d);
+
+
+    d = pow(base, 4);
+
+    circle(80, 80, d);
+
+
+    describe('A series of circles that grow exponentially from top left to
+    bottom right.');
+
+    </code>
+
+    </div>
+return:
+  description: n^e.
+  type: Number
+chainable: false
+---
+
+
+# pow
diff --git a/src/content/reference/en/p5/preload.mdx b/src/content/reference/en/p5/preload.mdx
new file mode 100644
index 0000000000..c6a61dd401
--- /dev/null
+++ b/src/content/reference/en/p5/preload.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: preload
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>Called directly before <a href="#/p5/setup">setup()</a>, the <a
+  href="#/p5/preload">preload()</a> function is used to handle
+
+  asynchronous loading of external files in a blocking way. If a preload
+
+  function is defined, <a href="#/p5/setup">setup()</a> will wait until any load
+  calls within have
+
+  finished. Nothing besides load calls (<a href="#/p5/loadImage">loadImage</a>,
+  <a href="#/p5/loadJSON">loadJSON</a>, <a href="#/p5/loadFont">loadFont</a>,
+
+  <a href="#/p5/loadStrings">loadStrings</a>, etc.) should be inside the preload
+  function. If asynchronous
+
+  loading is preferred, the load methods can instead be called in <a
+  href="#/p5/setup">setup()</a>
+
+  or anywhere else with the use of a callback parameter.</p>
+
+  <p>By default the text "loading..." will be displayed. To make your own
+
+  loading page, include an HTML element with id "p5_loading" in your
+
+  page. More information <a href="http://bit.ly/2kQ6Nio">here</a>.</p>
+line: 41
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let img;
+    let c;
+    function preload() {
+      // preload() runs once
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      // setup() waits until preload() is done
+      img.loadPixels();
+      // get color of middle pixel
+      c = img.get(img.width / 2, img.height / 2);
+    }
+
+    function draw() {
+      background(c);
+      image(img, 25, 25, 50, 50);
+    }
+    </code></div>
+alt: nothing displayed
+chainable: false
+---
+
+
+# preload
diff --git a/src/content/reference/en/p5/print.mdx b/src/content/reference/en/p5/print.mdx
new file mode 100644
index 0000000000..481618e51c
--- /dev/null
+++ b/src/content/reference/en/p5/print.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: print
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Displays text in the web browser's console.</p>
+
+  <p><code>print()</code> is helpful for printing values while debugging. Each
+  call to
+
+  <code>print()</code> creates a new line of text.</p>
+
+  <p>Note: Call <code>print('\n')</code> to print a blank line. Calling
+  <code>print()</code> without
+
+  an argument opens the browser's dialog for printing documents.</p>
+line: 21
+params:
+  - name: contents
+    description: |
+      <p>content to print to the console.</p>
+    type: Any
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code class="norender">
+    function setup() {
+      // Prints "hello, world" to the console.
+      print('hello, world');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code class="norender">
+    function setup() {
+      let name = 'ada';
+      // Prints "hello, ada" to the console.
+      print(`hello, ${name}`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# print
diff --git a/src/content/reference/en/p5/push.mdx b/src/content/reference/en/p5/push.mdx
new file mode 100644
index 0000000000..e1d237cb38
--- /dev/null
+++ b/src/content/reference/en/p5/push.mdx
@@ -0,0 +1,148 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: push
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>The <a href="#/p5/push">push()</a> function saves the current drawing style
+
+  settings and transformations, while <a href="#/p5/pop">pop()</a> restores
+  these
+
+  settings. Note that these functions are always used together. They allow you
+  to
+
+  change the style and transformation settings and later return to what you had.
+
+  When a new state is started with <a href="#/p5/push">push()</a>, it builds on
+
+  the current style and transform information. The <a
+  href="#/p5/push">push()</a>
+
+  and <a href="#/p5/pop">pop()</a> functions can be embedded to provide more
+
+  control. (See the second example for a demonstration.)</p>
+
+  <p><a href="#/p5/push">push()</a> stores information related to the current
+  transformation state
+
+  and style settings controlled by the following functions:
+
+  <a href="#/p5/fill">fill()</a>,
+
+  <a href="#/p5/noFill">noFill()</a>,
+
+  <a href="#/p5/noStroke">noStroke()</a>,
+
+  <a href="#/p5/stroke">stroke()</a>,
+
+  <a href="#/p5/tint">tint()</a>,
+
+  <a href="#/p5/noTint">noTint()</a>,
+
+  <a href="#/p5/strokeWeight">strokeWeight()</a>,
+
+  <a href="#/p5/strokeCap">strokeCap()</a>,
+
+  <a href="#/p5/strokeJoin">strokeJoin()</a>,
+
+  <a href="#/p5/imageMode">imageMode()</a>,
+
+  <a href="#/p5/rectMode">rectMode()</a>,
+
+  <a href="#/p5/ellipseMode">ellipseMode()</a>,
+
+  <a href="#/p5/colorMode">colorMode()</a>,
+
+  <a href="#/p5/textAlign">textAlign()</a>,
+
+  <a href="#/p5/textFont">textFont()</a>,
+
+  <a href="#/p5/textSize">textSize()</a>,
+
+  <a href="#/p5/textLeading">textLeading()</a>,
+
+  <a href="#/p5/applyMatrix">applyMatrix()</a>,
+
+  <a href="#/p5/resetMatrix">resetMatrix()</a>,
+
+  <a href="#/p5/rotate">rotate()</a>,
+
+  <a href="#/p5/scale">scale()</a>,
+
+  <a href="#/p5/shearX">shearX()</a>,
+
+  <a href="#/p5/shearY">shearY()</a>,
+
+  <a href="#/p5/translate">translate()</a>,
+
+  <a href="#/p5/noiseSeed">noiseSeed()</a>.</p>
+
+  <p>In WEBGL mode additional style settings are stored. These are controlled by
+  the
+
+  following functions: <a href="#/p5/setCamera">setCamera()</a>,
+
+  <a href="#/p5/ambientLight">ambientLight()</a>,
+
+  <a href="#/p5/directionalLight">directionalLight()</a>,
+
+  <a href="#/p5/pointLight">pointLight()</a>, <a
+  href="#/p5/texture">texture()</a>,
+
+  <a href="#/p5/specularMaterial">specularMaterial()</a>,
+
+  <a href="#/p5/shininess">shininess()</a>,
+
+  <a href="#/p5/normalMaterial">normalMaterial()</a>
+
+  and <a href="#/p5/shader">shader()</a>.</p>
+line: 192
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    ellipse(0, 50, 33, 33); // Left circle
+
+    push(); // Start a new drawing state
+    strokeWeight(10);
+    fill(204, 153, 0);
+    translate(50, 0);
+    ellipse(0, 50, 33, 33); // Middle circle
+    pop(); // Restore original state
+
+    ellipse(100, 50, 33, 33); // Right circle
+    </code>
+    </div>
+
+    <div>
+    <code>
+    ellipse(0, 50, 33, 33); // Left circle
+
+    push(); // Start a new drawing state
+    strokeWeight(10);
+    fill(204, 153, 0);
+    ellipse(33, 50, 33, 33); // Left-middle circle
+
+    push(); // Start another new drawing state
+    stroke(0, 102, 153);
+    ellipse(66, 50, 33, 33); // Right-middle circle
+    pop(); // Restore previous state
+
+    pop(); // Restore original state
+
+    ellipse(100, 50, 33, 33); // Right circle
+    </code>
+    </div>
+alt: |-
+  Gold ellipse + thick black outline @center 2 white ellipses on left and right.
+  2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
+chainable: false
+---
+
+
+# push
diff --git a/src/content/reference/en/p5/pwinMouseX.mdx b/src/content/reference/en/p5/pwinMouseX.mdx
new file mode 100644
index 0000000000..d67bebd7a6
--- /dev/null
+++ b/src/content/reference/en/p5/pwinMouseX.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pwinMouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>The system variable pwinMouseX always contains the horizontal position
+  of the mouse in the frame previous to the current frame, relative to
+  (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX
+  value at the start of each touch event.</p>
+line: 263
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let myCanvas;
+
+    function setup() {
+      //use a variable to store a pointer to the canvas
+      myCanvas = createCanvas(100, 100);
+      noStroke();
+      fill(237, 34, 93);
+    }
+
+    function draw() {
+      clear();
+      //the difference between previous and
+      //current x position is the horizontal mouse speed
+      let speed = abs(winMouseX - pwinMouseX);
+      //change the size of the circle
+      //according to the horizontal speed
+      ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+      //move the canvas to the mouse position
+      myCanvas.position(winMouseX + 1, winMouseY + 1);
+      describe(`fuchsia ellipse moves with mouse x and y.
+        Grows and shrinks with mouse speed`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pwinMouseX
diff --git a/src/content/reference/en/p5/pwinMouseY.mdx b/src/content/reference/en/p5/pwinMouseY.mdx
new file mode 100644
index 0000000000..ab517c501b
--- /dev/null
+++ b/src/content/reference/en/p5/pwinMouseY.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: pwinMouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>The system variable pwinMouseY always contains the vertical position of
+  the mouse in the frame previous to the current frame, relative to (0, 0)
+  of the window. Note: pwinMouseY will be reset to the current winMouseY
+  value at the start of each touch event.</p>
+line: 302
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let myCanvas;
+
+    function setup() {
+      //use a variable to store a pointer to the canvas
+      myCanvas = createCanvas(100, 100);
+      noStroke();
+      fill(237, 34, 93);
+    }
+
+    function draw() {
+      clear();
+      //the difference between previous and
+      //current y position is the vertical mouse speed
+      let speed = abs(winMouseY - pwinMouseY);
+      //change the size of the circle
+      //according to the vertical speed
+      ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
+      //move the canvas to the mouse position
+      myCanvas.position(winMouseX + 1, winMouseY + 1);
+      describe(`fuchsia ellipse moves with mouse x and y.
+        Grows and shrinks with mouse speed`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# pwinMouseY
diff --git a/src/content/reference/en/p5/quad.mdx b/src/content/reference/en/p5/quad.mdx
new file mode 100644
index 0000000000..a790abc073
--- /dev/null
+++ b/src/content/reference/en/p5/quad.mdx
@@ -0,0 +1,64 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: quad
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a quad to the canvas. A quad is a quadrilateral, a four-sided
+
+  polygon. Some examples of quads include rectangles, squares, rhombuses,
+
+  and trapezoids. The first pair of parameters (<code>x1</code>,<code>y1</code>)
+  sets the quad's
+
+  first point. The following pairs of parameters set the coordinates for
+
+  its next three points. Parameters should proceed clockwise or
+
+  counter-clockwise around the shape.</p>
+
+  <p>The version of <code>quad()</code> with twelve parameters allows the quad
+  to be drawn
+
+  in 3D space. Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="#/p5/createCanvas">createCanvas()</a>.</p>
+line: 507
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    quad(20, 20, 80, 20, 80, 80, 20, 80);
+    describe('A white square with a black outline drawn on a gray canvas.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    quad(20, 30, 80, 30, 80, 70, 20, 70);
+    describe('A white rectangle with a black outline drawn on a gray canvas.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    quad(50, 62, 86, 50, 50, 38, 14, 50);
+    describe('A white rhombus with a black outline drawn on a gray canvas.');
+    </code>
+    </div>
+
+    <div>
+    <code>
+    quad(20, 50, 80, 30, 80, 70, 20, 70);
+    describe('A white trapezoid with a black outline drawn on a gray canvas.');
+    </code>
+    </div>
+chainable: true
+---
+
+
+# quad
diff --git a/src/content/reference/en/p5/quadraticVertex.mdx b/src/content/reference/en/p5/quadraticVertex.mdx
new file mode 100644
index 0000000000..92b896e416
--- /dev/null
+++ b/src/content/reference/en/p5/quadraticVertex.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: quadraticVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Specifies vertex coordinates for quadratic Bezier curves. Each call to
+
+  quadraticVertex() defines the position of one control points and one
+
+  anchor point of a Bezier curve, adding a new segment to a line or shape.
+
+  The first time quadraticVertex() is used within a <a
+  href="#/p5/beginShape">beginShape()</a> call, it
+
+  must be prefaced with a call to <a href="#/p5/vertex">vertex()</a> to set the
+  first anchor point.
+
+  For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode.
+
+  2D mode expects 4 parameters, while 3D mode expects 6 parameters
+
+  (including z coordinates).</p>
+
+  <p>This function must be used between <a
+  href="#/p5/beginShape">beginShape()</a> and <a
+  href="#/p5/endShape">endShape()</a>
+
+  and only when there is no MODE or POINTS parameter specified to
+
+  <a href="#/p5/beginShape">beginShape()</a>.</p>
+line: 772
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    strokeWeight(5);
+    point(20, 20);
+    point(80, 20);
+    point(50, 50);
+
+    noFill();
+    strokeWeight(1);
+    beginShape();
+    vertex(20, 20);
+    quadraticVertex(80, 20, 50, 50);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    strokeWeight(5);
+    point(20, 20);
+    point(80, 20);
+    point(50, 50);
+
+    point(20, 80);
+    point(80, 80);
+    point(80, 60);
+
+    noFill();
+    strokeWeight(1);
+    beginShape();
+    vertex(20, 20);
+    quadraticVertex(80, 20, 50, 50);
+    quadraticVertex(20, 80, 80, 80);
+    vertex(80, 60);
+    endShape();
+    </code>
+    </div>
+alt: |-
+  arched-shaped black line with 4 pixel thick stroke weight.
+  backwards s-shaped black line with 4 pixel thick stroke weight.
+chainable: true
+---
+
+
+# quadraticVertex
diff --git a/src/content/reference/en/p5/random.mdx b/src/content/reference/en/p5/random.mdx
new file mode 100644
index 0000000000..43110099e4
--- /dev/null
+++ b/src/content/reference/en/p5/random.mdx
@@ -0,0 +1,20 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: random
+module: Math
+submodule: Random
+file: src/math/random.js
+description: "<p>Returns a random number or a random element from an array.</p>\n<p><code>random()</code> follows uniform distribution, which means that all outcomes are\nequally likely. When <code>random()</code> is used to generate numbers, all\nnumbers in the output range are equally likely to be returned. When\n<code>random()</code> is used to select elements from an array, all elements are\nequally likely to be chosen.</p>\n<p>By default, <code>random()</code> produces different results each time a sketch runs.\nThe <a href=\"#/p5/randomSeed\">randomSeed()</a> function can be used to\ngenerate the same sequence of numbers or choices each time a sketch runs.</p>\n<p>The version of <code>random()</code> with no parameters returns a random number from 0\nup to but not including 1.</p>\n<p>The version of <code>random()</code> with one parameter works one of two ways. If the\nargument passed is a number, <code>random()</code> returns a random number from 0 up\nto but not including the number. For example, calling <code>random(5)</code> returns\nvalues between 0 and 5. If the argument passed is an array, <code>random()</code>\nreturns a random element from that array. For example, calling\n<code>random(['\U0001F981', '\U0001F42F', '\U0001F43B'])</code> returns either a lion, tiger, or bear emoji.</p>\n<p>The version of <code>random()</code> with two parameters returns a random number from\na given range. The arguments passed set the range's lower and upper bounds.\nFor example, calling <code>random(-5, 10.2)</code> returns values from -5 up to but\nnot including 10.2.</p>\n"
+line: 70
+itemtype: method
+class: p5
+example:
+  - "\n<div>\n<code>\nlet x = random(width);\nlet y = random(height);\n\nstrokeWeight(5);\npoint(x, y);\n\ndescribe('A black dot appears in a random position on a gray square.');\n</code>\n</div>\n\n<div>\n<code>\nlet animals = ['\U0001F981', '\U0001F42F', '\U0001F43B'];\nlet animal = random(animals);\ntext(animal, 50, 50);\n\ndescribe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  frameRate(5);\n  let x = random(width);\n  let y = random(height);\n\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot moves around randomly on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  frameRate(5);\n  let x = random(45, 55);\n  let y = random(45, 55);\n\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot moves around randomly in the middle of a gray square.');\n}\n</code>\n</div>"
+return:
+  description: random number.
+  type: Number
+chainable: false
+---
+
+
+# random
diff --git a/src/content/reference/en/p5/randomGaussian.mdx b/src/content/reference/en/p5/randomGaussian.mdx
new file mode 100644
index 0000000000..ae2ca0d542
--- /dev/null
+++ b/src/content/reference/en/p5/randomGaussian.mdx
@@ -0,0 +1,93 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: randomGaussian
+module: Math
+submodule: Random
+file: src/math/random.js
+description: >
+  <p>Returns a random number fitting a Gaussian, or normal, distribution. Normal
+
+  distributions look like bell curves when plotted. Values from a normal
+
+  distribution cluster around a central value called the mean. The cluster's
+
+  standard deviation describes its spread.</p>
+
+  <p>By default, <code>randomGaussian()</code> produces different results each
+  time a
+
+  sketch runs. The <a href="#/p5/randomSeed">randomSeed()</a> function can be
+
+  used to generate the same sequence of numbers each time a sketch runs.</p>
+
+  <p>There's no minimum or maximum value that <code>randomGaussian()</code>
+  might return.
+
+  Values far from the mean are very unlikely and values near the mean are
+
+  very likely.</p>
+
+  <p>The version of <code>randomGaussian()</code> with no parameters returns
+  values with a
+
+  mean of 0 and standard deviation of 1.</p>
+
+  <p>The version of <code>randomGaussian()</code> with one parameter interprets
+  the
+
+  argument passed as the mean. The standard deviation is 1.</p>
+
+  <p>The version of <code>randomGaussian()</code> with two parameters interprets
+  the first
+
+  argument passed as the mean and the second as the standard deviation.</p>
+line: 193
+params:
+  - name: mean
+    description: |
+      <p>mean.</p>
+    type: Number
+    optional: true
+  - name: sd
+    description: |
+      <p>standard deviation.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      noStroke();
+      fill(0, 10);
+
+      // Uniform distribution.
+      let x = random(width);
+      let y = 25;
+      circle(x, y, 5);
+
+      // Gaussian distribution with sd = 1.
+      x = randomGaussian(50);
+      y = 50;
+      circle(x, y, 5);
+
+      // Gaussian distribution with sd = 10.
+      x = randomGaussian(50, 10);
+      y = 75;
+      circle(x, y, 5);
+
+      describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
+    }
+    </code>
+    </div>
+return:
+  description: random number.
+  type: Number
+chainable: false
+---
+
+
+# randomGaussian
diff --git a/src/content/reference/en/p5/randomSeed.mdx b/src/content/reference/en/p5/randomSeed.mdx
new file mode 100644
index 0000000000..d70dcdc98b
--- /dev/null
+++ b/src/content/reference/en/p5/randomSeed.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: randomSeed
+module: Math
+submodule: Random
+file: src/math/random.js
+description: >
+  <p>Sets the seed value for <a href="#/p5/random">random()</a> and
+
+  <a href="#/p5/randomGaussian">randomGaussian()</a>. By default,
+
+  <a href="#/p5/random">random()</a> and
+
+  <a href="#/p5/randomGaussian">randomGaussian()</a> produce different
+
+  results each time a sketch is run. Calling <code>randomSeed()</code> with a
+  constant
+
+  argument, such as <code>randomSeed(99)</code>, makes these functions produce
+  the same
+
+  results each time a sketch is run.</p>
+line: 37
+params:
+  - name: seed
+    description: |
+      <p>seed value.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let x = random(width);
+
+    let y = random(height);
+
+    circle(x, y, 10);
+
+
+    randomSeed(99);
+
+    x = random(width);
+
+    y = random(height);
+
+    fill(0);
+
+    circle(x, y, 10);
+
+
+    describe('A white circle appears at a random position. A black circle
+    appears at (27.4, 25.8).');
+
+    </code>
+
+    </div>
+chainable: false
+---
+
+
+# randomSeed
diff --git a/src/content/reference/en/p5/rect.mdx b/src/content/reference/en/p5/rect.mdx
new file mode 100644
index 0000000000..0b611819a7
--- /dev/null
+++ b/src/content/reference/en/p5/rect.mdx
@@ -0,0 +1,85 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rect
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a rectangle to the canvas. A rectangle is a four-sided polygon with
+
+  every angle at ninety degrees. By default, the first two parameters set the
+
+  location of the rectangle's upper-left corner. The third and fourth set the
+
+  shape's the width and height, respectively. The way these parameters are
+
+  interpreted may be changed with the <a href="#/p5/rectMode">rectMode()</a>
+
+  function.</p>
+
+  <p>The version of <code>rect()</code> with five parameters creates a rounded
+  rectangle. The
+
+  fifth parameter is used as the radius value for all four corners.</p>
+
+  <p>The version of <code>rect()</code> with eight parameters also creates a
+  rounded rectangle.
+
+  When using eight parameters, the latter four set the radius of the arc at
+
+  each corner separately. The radii start with the top-left corner and move
+
+  clockwise around the rectangle. If any of these parameters are omitted, they
+
+  are set to the value of the last specified corner radius.</p>
+line: 603
+itemtype: method
+class: p5
+example:
+  - >
+
+    <div>
+
+    <code>
+
+    rect(30, 20, 55, 55);
+
+    describe('A white rectangle with a black outline on a gray canvas.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    rect(30, 20, 55, 55, 20);
+
+    describe(
+      'A white rectangle with a black outline and round edges on a gray canvas.'
+    );
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    rect(30, 20, 55, 55, 20, 15, 10, 5);
+
+    describe('A white rectangle with a black outline and round edges of
+    different radii.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# rect
diff --git a/src/content/reference/en/p5/rectMode.mdx b/src/content/reference/en/p5/rectMode.mdx
new file mode 100644
index 0000000000..c1670b7fd6
--- /dev/null
+++ b/src/content/reference/en/p5/rectMode.mdx
@@ -0,0 +1,108 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rectMode
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Modifies the location from which rectangles and squares are drawn. By
+  default,
+
+  the first two parameters are the x- and y-coordinates of the shape's
+  upper-left
+
+  corner. The next parameters are its width and height. This is equivalent to
+
+  calling <code>rectMode(CORNER)</code>.</p>
+
+  <p><code>rectMode(CORNERS)</code> also uses the first two parameters as the
+  location of one of
+
+  the corners. The third and fourth parameters are the location of the opposite
+
+  corner.</p>
+
+  <p><code>rectMode(CENTER)</code> uses the first two parameters as the x- and
+  y-coordinates of
+
+  the shape's center. The next parameters are its width and height.</p>
+
+  <p><code>rectMode(RADIUS)</code> also uses the first two parameters as the x-
+  and y-coordinates
+
+  of the shape's center. The next parameters are half of the shape's width and
+
+  height.</p>
+
+  <p>The argument passed to <code>rectMode()</code> must be written in ALL CAPS
+  because the
+
+  constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and
+  <code>CORNERS</code> are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 108
+params:
+  - name: mode
+    description: |
+      <p>either CORNER, CORNERS, CENTER, or RADIUS</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    rectMode(CORNER);
+
+    fill(255);
+
+    rect(25, 25, 50, 50);
+
+
+    rectMode(CORNERS);
+
+    fill(100);
+
+    rect(25, 25, 50, 50);
+
+
+    describe('A small gray square drawn at the top-left corner of a white
+    square.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    rectMode(RADIUS);
+
+    fill(255);
+
+    rect(50, 50, 30, 30);
+
+
+    rectMode(CENTER);
+
+    fill(100);
+
+    rect(50, 50, 30, 30);
+
+
+    describe('A small gray square drawn at the center of a white square.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# rectMode
diff --git a/src/content/reference/en/p5/red.mdx b/src/content/reference/en/p5/red.mdx
new file mode 100644
index 0000000000..1b0d9a4a3d
--- /dev/null
+++ b/src/content/reference/en/p5/red.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: red
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the red value from a
+  <a href="#/p5.Color">p5.Color</a> object, array of color components, or
+  CSS color string.</p>
+line: 505
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    const c = color(255, 204, 0);
+    fill(c);
+    rect(15, 20, 35, 60);
+    // Sets 'redValue' to 255.
+    const redValue = red(c);
+    fill(redValue, 0, 0);
+    rect(50, 20, 35, 60);
+    describe(
+      'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+    );
+    </code>
+    </div>
+return:
+  description: the red value.
+  type: Number
+chainable: false
+---
+
+
+# red
diff --git a/src/content/reference/en/p5/redraw.mdx b/src/content/reference/en/p5/redraw.mdx
new file mode 100644
index 0000000000..ff1e42a8bf
--- /dev/null
+++ b/src/content/reference/en/p5/redraw.mdx
@@ -0,0 +1,96 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: redraw
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Executes the code within <a href="#/p5/draw">draw()</a> one time. This
+
+  function allows the program to update the display window only when necessary,
+
+  for example when an event registered by <a
+  href="#/p5/mousePressed">mousePressed()</a>
+
+  or <a href="#/p5/keyPressed">keyPressed()</a> occurs.</p>
+
+  <p>In structuring a program, it only makes sense to call <a
+  href="#/p5/redraw">redraw()</a>
+
+  within events such as <a href="#/p5/mousePressed">mousePressed()</a>. This
+
+  is because <a href="#/p5/redraw">redraw()</a> does not run
+
+  <a href="#/p5/draw">draw()</a> immediately (it only sets a flag that indicates
+
+  an update is needed).</p>
+
+  <p>The <a href="#/p5/redraw">redraw()</a> function does not work properly when
+
+  called inside <a href="#/p5/draw">draw()</a>.To enable/disable animations,
+
+  use <a href="#/p5/loop">loop()</a> and <a href="#/p5/noLoop">noLoop()</a>.</p>
+
+  <p>In addition you can set the number of redraws per method call. Just
+
+  add an integer as single parameter for the number of redraws.</p>
+line: 391
+params:
+  - name: 'n'
+    description: |
+      <p>Redraw for n-times. The default value is 1.</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let x = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+      noLoop();
+    }
+
+    function draw() {
+      background(204);
+      line(x, 0, x, height);
+    }
+
+    function mousePressed() {
+      x += 1;
+      redraw();
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    let x = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+      noLoop();
+    }
+
+    function draw() {
+      background(204);
+      x += 1;
+      line(x, 0, x, height);
+    }
+
+    function mousePressed() {
+      redraw(5);
+    }
+    </code>
+    </div>
+alt: |-
+  black line on far left of canvas
+  black line on far left of canvas
+chainable: false
+---
+
+
+# redraw
diff --git a/src/content/reference/en/p5/removeElements.mdx b/src/content/reference/en/p5/removeElements.mdx
new file mode 100644
index 0000000000..f00eb8946f
--- /dev/null
+++ b/src/content/reference/en/p5/removeElements.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeElements
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Removes all elements created by p5.js, including any event handlers.
+  There are two exceptions:
+  canvas elements created by <a href="#/p5/createCanvas">createCanvas</a>
+  and <a href="#/p5.Renderer">p5.Render</a> objects created by
+  <a href="#/p5/createGraphics">createGraphics</a>.</p>
+line: 240
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      // Create a paragraph element and place
+      // it in the middle of the canvas.
+      let p = createP('p5*js');
+      p.position(25, 25);
+
+      describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
+    }
+
+    function mousePressed() {
+      removeElements();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a paragraph element and place
+      // it at the top of the canvas.
+      let p = createP('p5*js');
+      p.position(25, 25);
+
+      // Create a slider element and place it
+      // beneath the canvas.
+      slider = createSlider(0, 255, 200);
+      slider.position(0, 100);
+
+      describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
+    }
+
+    function draw() {
+      // Use the slider value to change the background color.
+      let g = slider.value();
+      background(g);
+    }
+
+    function doubleClicked() {
+      removeElements();
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# removeElements
diff --git a/src/content/reference/en/p5/removeItem.mdx b/src/content/reference/en/p5/removeItem.mdx
new file mode 100644
index 0000000000..410a77f8c4
--- /dev/null
+++ b/src/content/reference/en/p5/removeItem.mdx
@@ -0,0 +1,33 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: removeItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: |
+  <p>Removes an item that was stored with storeItem()</p>
+line: 201
+params:
+  - name: key
+    description: ''
+    type: String
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myVar = 10;
+       storeItem('myVar', myVar);
+       print(getItem('myVar')); // logs 10 to the console
+       removeItem('myVar');
+       print(getItem('myVar')); // logs null to the console
+     }
+     </code></div>
+chainable: false
+---
+
+
+# removeItem
diff --git a/src/content/reference/en/p5/requestPointerLock.mdx b/src/content/reference/en/p5/requestPointerLock.mdx
new file mode 100644
index 0000000000..b015f9d38a
--- /dev/null
+++ b/src/content/reference/en/p5/requestPointerLock.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: requestPointerLock
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>The function <a href="#/p5/requestPointerLock">requestPointerLock()</a>
+
+  locks the pointer to its current position and makes it invisible.
+
+  Use <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a> to
+  get the difference the mouse was moved since
+
+  the last call of draw.
+
+  Note that not all browsers support this feature.
+
+  This enables you to create experiences that aren't limited by the mouse moving
+  out of the screen
+
+  even if it is repeatedly moved into one direction.
+
+  For example, a first person perspective experience.</p>
+line: 960
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    let cam;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      requestPointerLock();
+      cam = createCamera();
+    }
+
+    function draw() {
+      background(255);
+      cam.pan(-movedX * 0.001);
+      cam.tilt(movedY * 0.001);
+      sphere(25);
+      describe(`3D scene moves according to mouse mouse movement in a
+        first person perspective`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# requestPointerLock
diff --git a/src/content/reference/en/p5/resetMatrix.mdx b/src/content/reference/en/p5/resetMatrix.mdx
new file mode 100644
index 0000000000..023f873f6b
--- /dev/null
+++ b/src/content/reference/en/p5/resetMatrix.mdx
@@ -0,0 +1,30 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: resetMatrix
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: |
+  <p>Replaces the current matrix with the identity matrix.</p>
+line: 197
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    translate(50, 50);
+    applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+    rect(0, 0, 20, 20);
+    // Note that the translate is also reset.
+    resetMatrix();
+    rect(0, 0, 20, 20);
+    </code>
+    </div>
+alt: A rotated rectangle in the center with another at the top left corner
+chainable: true
+---
+
+
+# resetMatrix
diff --git a/src/content/reference/en/p5/resetShader.mdx b/src/content/reference/en/p5/resetShader.mdx
new file mode 100644
index 0000000000..5deec6fa7b
--- /dev/null
+++ b/src/content/reference/en/p5/resetShader.mdx
@@ -0,0 +1,98 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: resetShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: |
+  <p>Restores the default shaders. Code that runs after resetShader()
+  will not be affected by the shader previously set by
+  <a href="#/p5/shader">shader()</a></p>
+line: 440
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // This variable will hold our shader object
+    let shaderProgram;
+
+    // This variable will hold our vertex shader source code
+    let vertSrc = `
+       attribute vec3 aPosition;
+       attribute vec2 aTexCoord;
+       uniform mat4 uProjectionMatrix;
+       uniform mat4 uModelViewMatrix;
+       varying vec2 vTexCoord;
+
+       void main() {
+         vTexCoord = aTexCoord;
+         vec4 position = vec4(aPosition, 1.0);
+         gl_Position = uProjectionMatrix * uModelViewMatrix * position;
+       }
+    `;
+
+    // This variable will hold our fragment shader source code
+    let fragSrc = `
+       precision mediump float;
+
+       varying vec2 vTexCoord;
+
+       void main() {
+         vec2 uv = vTexCoord;
+         vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+         gl_FragColor = vec4(color, 1.0);
+       }
+    `;
+
+    function setup() {
+      // Shaders require WEBGL mode to work
+      createCanvas(100, 100, WEBGL);
+
+      // Create our shader
+      shaderProgram = createShader(vertSrc, fragSrc);
+
+      describe(
+        'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.'
+      );
+    }
+
+    function draw() {
+      // Clear the scene
+      background(200);
+
+      // Draw a box using our shader
+      // shader() sets the active shader with our shader
+      shader(shaderProgram);
+      push();
+      translate(-width / 4, 0, 0);
+      rotateX(millis() * 0.00025);
+      rotateY(millis() * 0.0005);
+      box(width / 4);
+      pop();
+
+      // Draw a box using the default fill shader
+      // resetShader() restores the default fill shader
+      resetShader();
+      fill(255, 0, 0);
+      push();
+      translate(width / 4, 0, 0);
+      rotateX(millis() * 0.00025);
+      rotateY(millis() * 0.0005);
+      box(width / 4);
+      pop();
+    }
+    </code>
+    </div>
+alt: >-
+  Two rotating cubes. The left one is painted using a custom (user-defined)
+  shader,
+
+  while the right one is painted using the default fill shader.
+chainable: true
+---
+
+
+# resetShader
diff --git a/src/content/reference/en/p5/resizeCanvas.mdx b/src/content/reference/en/p5/resizeCanvas.mdx
new file mode 100644
index 0000000000..d7dee94813
--- /dev/null
+++ b/src/content/reference/en/p5/resizeCanvas.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: resizeCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: |
+  <p>Resizes the canvas to given width and height. The canvas will be cleared
+  and draw will be called immediately, allowing the sketch to re-render itself
+  in the resized canvas.</p>
+line: 162
+params:
+  - name: w
+    description: |
+      <p>width of the canvas</p>
+    type: Number
+  - name: h
+    description: |
+      <p>height of the canvas</p>
+    type: Number
+  - name: noRedraw
+    description: |
+      <p>don't redraw the canvas immediately</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender"><code>
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+    }
+
+    function draw() {
+      background(0, 100, 200);
+    }
+
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+    }
+    </code></div>
+alt: No image displayed.
+chainable: false
+---
+
+
+# resizeCanvas
diff --git a/src/content/reference/en/p5/reverse.mdx b/src/content/reference/en/p5/reverse.mdx
new file mode 100644
index 0000000000..504bb02efc
--- /dev/null
+++ b/src/content/reference/en/p5/reverse.mdx
@@ -0,0 +1,36 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: reverse
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Reverses the order of an array, maps to Array.reverse()</p>
+line: 141
+params:
+  - name: list
+    description: |
+      <p>Array to reverse</p>
+    type: Array
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    function setup() {
+      let myArray = ['A', 'B', 'C'];
+      print(myArray); // ['A','B','C']
+
+      reverse(myArray);
+      print(myArray); // ['C','B','A']
+    }
+    </code></div>
+return:
+  description: the reversed list
+  type: Array
+chainable: false
+---
+
+
+# reverse
diff --git a/src/content/reference/en/p5/rotate.mdx b/src/content/reference/en/p5/rotate.mdx
new file mode 100644
index 0000000000..ecff92e35f
--- /dev/null
+++ b/src/content/reference/en/p5/rotate.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotate
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates a shape by the amount specified by the angle parameter. This
+
+  function accounts for <a href="#/p5/angleMode">angleMode</a>, so angles
+
+  can be entered in either RADIANS or DEGREES.</p>
+
+  <p>Objects are always rotated around their relative position to the
+
+  origin and positive numbers rotate objects in a clockwise direction.
+
+  Transformations apply to everything that happens after and subsequent
+
+  calls to the function accumulate the effect. For example, calling
+
+  rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).
+
+  All transformations are reset when <a href="#/p5/draw">draw()</a> begins
+  again.</p>
+
+  <p>Technically, <a href="#/p5/rotate">rotate()</a> multiplies the current
+  transformation matrix
+
+  by a rotation matrix. This function can be further controlled by
+
+  <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a>.</p>
+line: 222
+params:
+  - name: angle
+    description: |
+      <p>the angle of rotation, specified in radians
+                             or degrees, depending on current angleMode</p>
+    type: Number
+  - name: axis
+    description: |
+      <p>(in 3d) the axis to rotate around</p>
+    type: 'p5.Vector|Number[]'
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    translate(width / 2, height / 2);
+    rotate(PI / 3.0);
+    rect(-26, -26, 52, 52);
+    </code>
+    </div>
+alt: white 52×52 rect with black outline at center rotated counter 45 degrees
+chainable: true
+---
+
+
+# rotate
diff --git a/src/content/reference/en/p5/rotateX.mdx b/src/content/reference/en/p5/rotateX.mdx
new file mode 100644
index 0000000000..2c3840ba01
--- /dev/null
+++ b/src/content/reference/en/p5/rotateX.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotateX
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates a shape around X axis by the amount specified in angle parameter.
+
+  The angles can be entered in either RADIANS or DEGREES.</p>
+
+  <p>Objects are always rotated around their relative position to the
+
+  origin and positive numbers rotate objects in a clockwise direction.
+
+  All transformations are reset when <a href="#/p5/draw">draw()</a> begins
+  again.</p>
+line: 261
+params:
+  - name: angle
+    description: |
+      <p>the angle of rotation, specified in radians
+                             or degrees, depending on current angleMode</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+    }
+    function draw() {
+      background(255);
+      rotateX(millis() / 1000);
+      box();
+    }
+    </code>
+    </div>
+alt: 3d box rotating around the x axis.
+chainable: true
+---
+
+
+# rotateX
diff --git a/src/content/reference/en/p5/rotateY.mdx b/src/content/reference/en/p5/rotateY.mdx
new file mode 100644
index 0000000000..df18425b3f
--- /dev/null
+++ b/src/content/reference/en/p5/rotateY.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotateY
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates a shape around Y axis by the amount specified in angle parameter.
+
+  The angles can be entered in either RADIANS or DEGREES.</p>
+
+  <p>Objects are always rotated around their relative position to the
+
+  origin and positive numbers rotate objects in a clockwise direction.
+
+  All transformations are reset when <a href="#/p5/draw">draw()</a> begins
+  again.</p>
+line: 299
+params:
+  - name: angle
+    description: |
+      <p>the angle of rotation, specified in radians
+                             or degrees, depending on current angleMode</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+    }
+    function draw() {
+      background(255);
+      rotateY(millis() / 1000);
+      box();
+    }
+    </code>
+    </div>
+alt: 3d box rotating around the y axis.
+chainable: true
+---
+
+
+# rotateY
diff --git a/src/content/reference/en/p5/rotateZ.mdx b/src/content/reference/en/p5/rotateZ.mdx
new file mode 100644
index 0000000000..af3a8b5e3c
--- /dev/null
+++ b/src/content/reference/en/p5/rotateZ.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotateZ
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates a shape around Z axis by the amount specified in angle parameter.
+
+  The angles can be entered in either RADIANS or DEGREES.</p>
+
+  <p>This method works in WEBGL mode only.</p>
+
+  <p>Objects are always rotated around their relative position to the
+
+  origin and positive numbers rotate objects in a clockwise direction.
+
+  All transformations are reset when <a href="#/p5/draw">draw()</a> begins
+  again.</p>
+line: 337
+params:
+  - name: angle
+    description: |
+      <p>the angle of rotation, specified in radians
+                             or degrees, depending on current angleMode</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+    }
+    function draw() {
+      background(255);
+      rotateZ(millis() / 1000);
+      box();
+    }
+    </code>
+    </div>
+alt: 3d box rotating around the z axis.
+chainable: true
+---
+
+
+# rotateZ
diff --git a/src/content/reference/en/p5/rotationX.mdx b/src/content/reference/en/p5/rotationX.mdx
new file mode 100644
index 0000000000..342dc5ea97
--- /dev/null
+++ b/src/content/reference/en/p5/rotationX.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationX always contains the rotation of the
+  device along the x axis. If the sketch <a href="#/p5/angleMode">
+  angleMode()</a> is set to DEGREES, the value will be -180 to 180. If
+  it is set to RADIANS, the value will be -PI to PI.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 131
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      //rotateZ(radians(rotationZ));
+      rotateX(radians(rotationX));
+      //rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# rotationX
diff --git a/src/content/reference/en/p5/rotationY.mdx b/src/content/reference/en/p5/rotationY.mdx
new file mode 100644
index 0000000000..17d65bc370
--- /dev/null
+++ b/src/content/reference/en/p5/rotationY.mdx
@@ -0,0 +1,42 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationY always contains the rotation of the
+  device along the y axis. If the sketch <a href="#/p5/angleMode">
+  angleMode()</a> is set to DEGREES, the value will be -90 to 90. If
+  it is set to RADIANS, the value will be -PI/2 to PI/2.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 164
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      //rotateZ(radians(rotationZ));
+      //rotateX(radians(rotationX));
+      rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# rotationY
diff --git a/src/content/reference/en/p5/rotationZ.mdx b/src/content/reference/en/p5/rotationZ.mdx
new file mode 100644
index 0000000000..c99ce6ad63
--- /dev/null
+++ b/src/content/reference/en/p5/rotationZ.mdx
@@ -0,0 +1,44 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: rotationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationZ always contains the rotation of the
+  device along the z axis. If the sketch <a href="#/p5/angleMode">
+  angleMode()</a> is set to DEGREES, the value will be 0 to 360. If
+  it is set to RADIANS, the value will be 0 to 2*PI.</p>
+  <p>Unlike rotationX and rotationY, this variable is available for devices
+  with a built-in compass only.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 197
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      rotateZ(radians(rotationZ));
+      //rotateX(radians(rotationX));
+      //rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# rotationZ
diff --git a/src/content/reference/en/p5/sampleRate.mdx b/src/content/reference/en/p5/sampleRate.mdx
new file mode 100644
index 0000000000..17c3490619
--- /dev/null
+++ b/src/content/reference/en/p5/sampleRate.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sampleRate
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a number representing the sample rate, in samples per second,
+  of all sound objects in this audio context. It is determined by the
+  sampling rate of your operating system's sound card, and it is not
+  currently possile to change.
+  It is often 44100, or twice the range of human hearing.</p>
+line: 811
+itemtype: method
+class: p5
+return:
+  description: samplerate samples per second
+  type: Number
+chainable: false
+---
+
+
+# sampleRate
diff --git a/src/content/reference/en/p5/saturation.mdx b/src/content/reference/en/p5/saturation.mdx
new file mode 100644
index 0000000000..950aad7798
--- /dev/null
+++ b/src/content/reference/en/p5/saturation.mdx
@@ -0,0 +1,49 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saturation
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: |
+  <p>Extracts the saturation value from a
+  <a href="#/p5.Color">p5.Color</a> object, array of color components, or
+  CSS color string.</p>
+  <p>Saturation is scaled differently in HSB and HSL. By default, this function
+  returns the HSL saturation. If the <a href="#/colorMode">colorMode()</a>
+  is set to HSB, it returns the HSB saturation.</p>
+line: 535
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    noStroke();
+    colorMode(HSB, 255);
+    const c = color(0, 126, 255);
+    fill(c);
+    rect(15, 20, 35, 60);
+    // Sets 'satValue' to 126.
+    const satValue = saturation(c);
+    fill(satValue);
+    rect(50, 20, 35, 60);
+    describe(
+      'Two rectangles. The rectangle on the left is deep pink and the one on the right is gray.'
+    );
+    </code>
+    </div>
+return:
+  description: the saturation value
+  type: Number
+chainable: false
+---
+
+
+# saturation
diff --git a/src/content/reference/en/p5/save.mdx b/src/content/reference/en/p5/save.mdx
new file mode 100644
index 0000000000..3f22294ff6
--- /dev/null
+++ b/src/content/reference/en/p5/save.mdx
@@ -0,0 +1,121 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: save
+module: IO
+submodule: Output
+file: src/io/files.js
+description: |
+  <p>Saves a given element(image, text, json, csv, wav, or html) to the client's
+  computer. The first parameter can be a pointer to element we want to save.
+  The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
+  Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
+  </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
+  p5.sound). The second parameter is a filename (including extension).The
+  third parameter is for options specific to this type of object. This method
+  will save a file that fits the given parameters.
+  If it is called without specifying an element, by default it will save the
+  whole canvas as an image file. You can optionally specify a filename as
+  the first parameter in such a case.
+  <strong>Note that it is not recommended to
+  call this method within draw, as it will open a new save dialog on every
+  render.</strong></p>
+line: 1381
+params:
+  - name: objectOrFilename
+    description: |
+      <p>If filename is provided, will
+                                                 save canvas as an image with
+                                                 either png or jpg extension
+                                                 depending on the filename.
+                                                 If object is provided, will
+                                                 save depending on the object
+                                                 and filename (see examples
+                                                 above).</p>
+    type: Object|String
+    optional: true
+  - name: filename
+    description: |
+      <p>If an object is provided as the first
+                                   parameter, then the second parameter
+                                   indicates the filename,
+                                   and should include an appropriate
+                                   file extension (see examples above).</p>
+    type: String
+    optional: true
+  - name: options
+    description: |
+      <p>Additional options depend on
+                                filetype. For example, when saving JSON,
+                                <code>true</code> indicates that the
+                                output will be optimized for filesize,
+                                rather than readability.</p>
+    type: Boolean|String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Saves the canvas as an image
+     cnv = createCanvas(300, 300);
+     save(cnv, 'myCanvas.jpg');
+
+     // Saves the canvas as an image by default
+     save('myCanvas.jpg');
+     describe('An example for saving a canvas as an image.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves p5.Image as an image
+     img = createImage(10, 10);
+     save(img, 'myImage.png');
+     describe('An example for saving a p5.Image element as an image.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves p5.Renderer object as an image
+     obj = createGraphics(100, 100);
+     save(obj, 'myObject.png');
+     describe('An example for saving a p5.Renderer element.');
+     </code></div>
+
+     <div class="norender"><code>
+     let myTable = new p5.Table();
+     // Saves table as html file
+     save(myTable, 'myTable.html');
+
+     // Comma Separated Values
+     save(myTable, 'myTable.csv');
+
+     // Tab Separated Values
+     save(myTable, 'myTable.tsv');
+
+     describe(`An example showing how to save a table in formats of
+     HTML, CSV and TSV.`);
+     </code></div>
+
+     <div class="norender"><code>
+     let myJSON = { a: 1, b: true };
+
+     // Saves pretty JSON
+     save(myJSON, 'my.json');
+
+     // Optimizes JSON filesize
+     save(myJSON, 'my.json', true);
+
+     describe('An example for saving JSON to a txt file with some extra arguments.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves array of strings to text file with line breaks after each item
+     let arrayOfStrings = ['a', 'b'];
+     save(arrayOfStrings, 'my.txt');
+     describe(`An example for saving an array of strings to text file
+     with line breaks.`);
+     </code></div>
+chainable: false
+---
+
+
+# save
diff --git a/src/content/reference/en/p5/saveCanvas.mdx b/src/content/reference/en/p5/saveCanvas.mdx
new file mode 100644
index 0000000000..603c6a6655
--- /dev/null
+++ b/src/content/reference/en/p5/saveCanvas.mdx
@@ -0,0 +1,79 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveCanvas
+module: Image
+submodule: Image
+file: src/image/image.js
+description: |
+  <p>Saves the current canvas as an image. The browser will either save the
+  file immediately or prompt the user with a dialogue window.</p>
+line: 97
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div class='norender'>
+     <code>
+     function setup() {
+     createCanvas(100, 100);
+     background(255);
+     saveCanvas();
+     }
+     </code>
+     </div>
+
+     <div class='norender'>
+     <code>
+     function setup() {
+     createCanvas(100, 100);
+     background(255);
+     saveCanvas('myCanvas.jpg');
+     }
+     </code>
+     </div>
+
+     <div class='norender'>
+     <code>
+     function setup() {
+     createCanvas(100, 100);
+     background(255);
+     saveCanvas('myCanvas', 'jpg');
+     }
+     </code>
+     </div>
+
+     <div class='norender'>
+     <code>
+     function setup() {
+     let cnv = createCanvas(100, 100);
+     background(255);
+     saveCanvas(cnv);
+     }
+     </code>
+     </div>
+
+     <div class='norender'>
+     <code>
+     function setup() {
+     let cnv = createCanvas(100, 100);
+     background(255);
+     saveCanvas(cnv, 'myCanvas.jpg');
+     }
+     </code>
+     </div>
+
+     <div class='norender'>
+     <code>
+     function setup() {
+     let cnv = createCanvas(100, 100);
+     background(255);
+     saveCanvas(cnv, 'myCanvas', 'jpg');
+     }
+     </code>
+     </div>
+chainable: false
+---
+
+
+# saveCanvas
diff --git a/src/content/reference/en/p5/saveFrames.mdx b/src/content/reference/en/p5/saveFrames.mdx
new file mode 100644
index 0000000000..5f5cb77467
--- /dev/null
+++ b/src/content/reference/en/p5/saveFrames.mdx
@@ -0,0 +1,127 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveFrames
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Captures a sequence of frames from the canvas that can be used to create a
+
+  movie. Frames are downloaded as individual image files by default.</p>
+
+  <p>The first parameter, <code>filename</code>, sets the prefix for the file
+  names. For
+
+  example, setting the prefix to <code>'frame'</code> would generate the image
+  files
+
+  <code>frame0.png</code>, <code>frame1.png</code>, and so on. The second
+  parameter, <code>extension</code>,
+
+  sets the file type to either <code>'png'</code> or <code>'jpg'</code>.</p>
+
+  <p>The third parameter, <code>duration</code>, sets the duration to record in
+  seconds.
+
+  The maximum duration is 15 seconds. The fourth parameter,
+  <code>framerate</code>, sets
+
+  the number of frames to record per second. The maximum frame rate value is
+
+  22. Limits are placed on <code>duration</code> and <code>framerate</code> to
+  avoid using too much
+
+  memory. Recording large canvases can easily crash sketches or even web
+
+  browsers.</p>
+
+  <p>The fifth parameter, <code>callback</code>, is optional. If a function is
+  passed,
+
+  image files won't be saved by default. The callback function can be used
+
+  to process an array containing the data for each captured frame. The array
+
+  of image data contains a sequence of objects with three properties for each
+
+  frame: <code>imageData</code>, <code>filename</code>, and
+  <code>extension</code>.</p>
+line: 460
+params:
+  - name: filename
+    description: |
+      <p>prefix of file name.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>file extension, either 'jpg' or 'png'.</p>
+    type: String
+  - name: duration
+    description: >
+      <p>duration in seconds to record. This parameter will be constrained to be
+      less or equal to 15.</p>
+    type: Number
+  - name: framerate
+    description: >
+      <p>number of frames to save per second. This parameter will be constrained
+      to be less or equal to 22.</p>
+    type: Number
+  - name: callback
+    description: |
+      <p>callback function that will be executed
+                                       to handle the image data. This function
+                                       should accept an array as argument. The
+                                       array will contain the specified number of
+                                       frames of objects. Each object has three
+                                       properties: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>
+    type: Function(Array)
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      let r = frameCount % 255;
+      let g = 50;
+      let b = 100;
+      background(r, g, b);
+
+      describe('A square repeatedly changes color from blue to pink.');
+    }
+
+    function keyPressed() {
+      if (key === 's') {
+        saveFrames('frame', 'png', 1, 5);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      let r = frameCount % 255;
+      let g = 50;
+      let b = 100;
+      background(r, g, b);
+
+      describe('A square repeatedly changes color from blue to pink.');
+    }
+
+    function mousePressed() {
+      saveFrames('frame', 'png', 1, 5, data => {
+        // Prints an array of objects containing raw image data,
+        // filenames, and extensions.
+        print(data);
+      });
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# saveFrames
diff --git a/src/content/reference/en/p5/saveGif.mdx b/src/content/reference/en/p5/saveGif.mdx
new file mode 100644
index 0000000000..7a486e6a6e
--- /dev/null
+++ b/src/content/reference/en/p5/saveGif.mdx
@@ -0,0 +1,78 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveGif
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Generates a gif from a sketch and saves it to a file.
+  <code>saveGif()</code> may be
+
+  called in <a href="#/p5/setup">setup()</a> or at any point while a sketch
+
+  is running.</p>
+
+  <p>The first parameter, <code>fileName</code>, sets the gif's file name. The
+  second
+
+  parameter, <code>duration</code>, sets the gif's duration in seconds.</p>
+
+  <p>The third parameter, <code>options</code>, is optional. If an object is
+  passed,
+
+  <code>saveGif()</code> will use its properties to customize the gif.
+  <code>saveGif()</code>
+
+  recognizes the properties <code>delay</code>, <code>units</code>,
+  <code>silent</code>,
+
+  <code>notificationDuration</code>, and <code>notificationID</code>.</p>
+line: 188
+params:
+  - name: filename
+    description: |
+      <p>file name of gif.</p>
+    type: String
+  - name: duration
+    description: |
+      <p>duration in seconds to capture from the sketch.</p>
+    type: Number
+  - name: options
+    description: |
+      <p>an object that can contain five more properties:
+                       <code>delay</code>, a Number specifying how much time to wait before recording;
+                       <code>units</code>, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
+                       <code>silent</code>, a Boolean that defines presence of progress notifications. By default it’s <code>false</code>;
+                       <code>notificationDuration</code>, a Number that defines how long in seconds the final notification
+                       will live. By default it's <code>0</code>, meaning the notification will never be removed;
+                       <code>notificationID</code>, a String that specifies the id of the notification's DOM element. By default it’s <code>'progressBar’</code>.</p>
+    type: Object
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+      let c = frameCount % 255;
+      fill(c);
+      circle(50, 50, 25);
+
+      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+    }
+
+    function keyPressed() {
+      if (key === 's') {
+        saveGif('mySketch', 5);
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# saveGif
diff --git a/src/content/reference/en/p5/saveJSON.mdx b/src/content/reference/en/p5/saveJSON.mdx
new file mode 100644
index 0000000000..4d26337c46
--- /dev/null
+++ b/src/content/reference/en/p5/saveJSON.mdx
@@ -0,0 +1,63 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveJSON
+module: IO
+submodule: Output
+file: src/io/files.js
+description: |
+  <p>Writes the contents of an Array or a JSON object to a .json file.
+  The file saving process and location of the saved file will
+  vary between web browsers.</p>
+line: 1525
+params:
+  - name: json
+    description: ''
+    type: Array|Object
+  - name: filename
+    description: ''
+    type: String
+  - name: optimize
+    description: |
+      <p>If true, removes line breaks
+                                     and spaces from the output
+                                     file to optimize filesize
+                                     (but not readability).</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div><code>
+     let json = {}; // new  JSON Object
+
+     json.id = 0;
+     json.species = 'Panthera leo';
+     json.name = 'Lion';
+
+     function setup() {
+     createCanvas(100, 100);
+     background(200);
+     text('click here to save', 10, 10, 70, 80);
+     describe('no image displayed');
+     }
+
+     function mousePressed() {
+     if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+       saveJSON(json, 'lion.json');
+     }
+     }
+
+     // saves the following to a file called "lion.json":
+     // {
+     //   "id": 0,
+     //   "species": "Panthera leo",
+     //   "name": "Lion"
+     // }
+     </code></div>
+chainable: false
+---
+
+
+# saveJSON
diff --git a/src/content/reference/en/p5/saveSound.mdx b/src/content/reference/en/p5/saveSound.mdx
new file mode 100644
index 0000000000..0f11877f05
--- /dev/null
+++ b/src/content/reference/en/p5/saveSound.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveSound
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Save a p5.SoundFile as a .wav file. The browser will prompt the user
+
+  to download the file to their device.
+
+  For uploading audio to a server, use
+
+  <a
+  href="/docs/reference/#/p5.SoundFile/saveBlob"><code>p5.SoundFile.saveBlob</code></a>.</p>
+line: 1145
+params:
+  - name: soundFile
+    description: |
+      <p>p5.SoundFile that you wish to save</p>
+    type: p5.SoundFile
+  - name: fileName
+    description: |
+      <p>name of the resulting .wav file.</p>
+    type: String
+itemtype: method
+class: p5
+chainable: false
+---
+
+
+# saveSound
diff --git a/src/content/reference/en/p5/saveStrings.mdx b/src/content/reference/en/p5/saveStrings.mdx
new file mode 100644
index 0000000000..9ebb1b1811
--- /dev/null
+++ b/src/content/reference/en/p5/saveStrings.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveStrings
+module: IO
+submodule: Output
+file: src/io/files.js
+description: |
+  <p>Writes an array of Strings to a text file, one line per String.
+  The file saving process and location of the saved file will
+  vary between web browsers.</p>
+line: 1580
+params:
+  - name: list
+    description: |
+      <p>string array to be written</p>
+    type: 'String[]'
+  - name: filename
+    description: |
+      <p>filename for output</p>
+    type: String
+  - name: extension
+    description: |
+      <p>the filename's extension</p>
+    type: String
+    optional: true
+  - name: isCRLF
+    description: |
+      <p>if true, change line-break to CRLF</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div><code>
+     let words = 'apple bear cat dog';
+
+     // .split() outputs an Array
+     let list = split(words, ' ');
+
+     function setup() {
+     createCanvas(100, 100);
+     background(200);
+     text('click here to save', 10, 10, 70, 80);
+     describe('no image displayed');
+     }
+
+     function mousePressed() {
+     if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+       saveStrings(list, 'nouns.txt');
+     }
+     }
+
+     // Saves the following to a file called 'nouns.txt':
+     //
+     // apple
+     // bear
+     // cat
+     // dog
+     </code></div>
+chainable: false
+---
+
+
+# saveStrings
diff --git a/src/content/reference/en/p5/saveTable.mdx b/src/content/reference/en/p5/saveTable.mdx
new file mode 100644
index 0000000000..c9f0ccd221
--- /dev/null
+++ b/src/content/reference/en/p5/saveTable.mdx
@@ -0,0 +1,67 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: saveTable
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Writes the contents of a <a href="#/p5.Table">Table</a> object to a file.
+  Defaults to a
+
+  text file with comma-separated-values ('csv') but can also
+
+  use tab separation ('tsv'), or generate an HTML table ('html').
+
+  The file saving process and location of the saved file will
+
+  vary between web browsers.</p>
+line: 1642
+params:
+  - name: Table
+    description: |
+      <p>the <a href="#/p5.Table">Table</a> object to save to a file</p>
+    type: p5.Table
+  - name: filename
+    description: |
+      <p>the filename to which the Table should be saved</p>
+    type: String
+  - name: options
+    description: |
+      <p>can be one of "tsv", "csv", or "html"</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+     let table;
+
+     function setup() {
+     table = new p5.Table();
+
+     table.addColumn('id');
+     table.addColumn('species');
+     table.addColumn('name');
+
+     let newRow = table.addRow();
+     newRow.setNum('id', table.getRowCount() - 1);
+     newRow.setString('species', 'Panthera leo');
+     newRow.setString('name', 'Lion');
+
+     // To save, un-comment next line then click 'run'
+     // saveTable(table, 'new.csv');
+
+     describe('no image displayed');
+     }
+
+     // Saves the following to a file called 'new.csv':
+     // id,species,name
+     // 0,Panthera leo,Lion
+     </code></div>
+chainable: false
+---
+
+
+# saveTable
diff --git a/src/content/reference/en/p5/scale.mdx b/src/content/reference/en/p5/scale.mdx
new file mode 100644
index 0000000000..a5a3ee9df0
--- /dev/null
+++ b/src/content/reference/en/p5/scale.mdx
@@ -0,0 +1,60 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: scale
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Increases or decreases the size of a shape by expanding or contracting
+
+  vertices. Objects always scale from their relative origin to the
+
+  coordinate system. Scale values are specified as decimal percentages.
+
+  For example, the function call scale(2.0) increases the dimension of a
+
+  shape by 200%.</p>
+
+  <p>Transformations apply to everything that happens after and subsequent
+
+  calls to the function multiply the effect. For example, calling scale(2.0)
+
+  and then scale(1.5) is the same as scale(3.0). If <a
+  href="#/p5/scale">scale()</a> is called
+
+  within <a href="#/p5/draw">draw()</a>, the transformation is reset when the
+  loop begins again.</p>
+
+  <p>Using this function with the z parameter is only available in WEBGL mode.
+
+  This function can be further controlled with <a href="#/p5/push">push()</a>
+  and <a href="#/p5/pop">pop()</a>.</p>
+line: 377
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    rect(30, 20, 50, 50);
+    scale(0.5);
+    rect(30, 20, 50, 50);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    rect(30, 20, 50, 50);
+    scale(0.5, 1.3);
+    rect(30, 20, 50, 50);
+    </code>
+    </div>
+alt: |-
+  white 52×52 rect with black outline at center rotated counter 45 degrees
+  2 white rects with black outline- 1 50×50 at center. other 25×65 bottom left
+chainable: true
+---
+
+
+# scale
diff --git a/src/content/reference/en/p5/second.mdx b/src/content/reference/en/p5/second.mdx
new file mode 100644
index 0000000000..4d73110ab0
--- /dev/null
+++ b/src/content/reference/en/p5/second.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: second
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>p5.js communicates with the clock on your computer. The <a
+  href="#/p5/second">second()</a> function
+
+  returns the current second as a value from 0 - 59.</p>
+line: 112
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let s = second();
+    text('Current second: \n' + s, 5, 50);
+    describe('Current second is displayed');
+    </code>
+    </div>
+return:
+  description: the current second
+  type: Integer
+chainable: false
+---
+
+
+# second
diff --git a/src/content/reference/en/p5/select.mdx b/src/content/reference/en/p5/select.mdx
new file mode 100644
index 0000000000..d830a01fe3
--- /dev/null
+++ b/src/content/reference/en/p5/select.mdx
@@ -0,0 +1,106 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: select
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Searches the page for the first element that matches the given
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
+  target="_blank">CSS selector string</a>.
+
+  The string can be an ID, class, tag name, or a combination.
+  <code>select()</code>
+
+  returns a <a href="#/p5.Element">p5.Element</a> object if it finds a match
+
+  and <code>null</code> otherwise.</p>
+
+  <p>The second parameter, <code>container</code>, is optional. It specifies a
+  container to
+
+  search within. container can be CSS selector string, a
+
+  <a href="#/p5.Element">p5.Element</a> object, or an
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"
+  target="_blank">HTMLElement</a> object.</p>
+line: 21
+params:
+  - name: selectors
+    description: |
+      <p>CSS selector string of element to search for.</p>
+    type: String
+  - name: container
+    description: |
+      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
+    type: String|p5.Element|HTMLElement
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      // Select the canvas by its tag.
+      let cnv = select('canvas');
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      // Add a class attribute to the canvas.
+      cnv.class('pinkborder');
+
+      background(200);
+
+      // Select the canvas by its class.
+      cnv = select('.pinkborder');
+      // Style its border.
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      // Set the canvas ID.
+      cnv.id('mycanvas');
+
+      background(200);
+
+      // Select the canvas by its ID.
+      cnv = select('#mycanvas');
+      // Style its border.
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+return:
+  description: <a href="#/p5.Element">p5.Element</a> containing the element.
+  type: p5.Element|null
+chainable: false
+---
+
+
+# select
diff --git a/src/content/reference/en/p5/selectAll.mdx b/src/content/reference/en/p5/selectAll.mdx
new file mode 100644
index 0000000000..4c483f5cc4
--- /dev/null
+++ b/src/content/reference/en/p5/selectAll.mdx
@@ -0,0 +1,111 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: selectAll
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Searches the page for all elements that matches the given
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
+  target="_blank">CSS selector string</a>.
+
+  The string can be an ID, class, tag name, or a combination.
+  <code>selectAll()</code>
+
+  returns an array of <a href="#/p5.Element">p5.Element</a> objects if it
+
+  finds any matches and an empty array otherwise.</p>
+
+  <p>The second parameter, <code>container</code>, is optional. It specifies a
+  container to
+
+  search within. container can be CSS selector string, a
+
+  <a href="#/p5.Element">p5.Element</a> object, or an
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"
+  target="_blank">HTMLElement</a> object.</p>
+line: 103
+params:
+  - name: selectors
+    description: |
+      <p>CSS selector string of element to search for.</p>
+    type: String
+  - name: container
+    description: |
+      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
+    type: String|p5.Element|HTMLElement
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Create three buttons.
+      createButton('1');
+      createButton('2');
+      createButton('3');
+
+      // Select the buttons by their tag.
+      let buttons = selectAll('button');
+
+      // Position the buttons.
+      for (let i = 0; i < 3; i += 1) {
+        buttons[i].position(0, i * 30);
+      }
+
+      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create three buttons and position them.
+      let b1 = createButton('1');
+      b1.position(0, 0);
+      let b2 = createButton('2');
+      b2.position(0, 30);
+      let b3 = createButton('3');
+      b3.position(0, 60);
+
+      // Add a class attribute to each button.
+      b1.class('btn');
+      b2.class('btn btn-pink');
+      b3.class('btn');
+
+      // Select the buttons by their class.
+      let buttons = selectAll('.btn');
+      let pinkButtons = selectAll('.btn-pink');
+
+      // Style the selected buttons.
+      buttons.forEach(btn => {
+        btn.style('font-family', 'Comic Sans MS');
+      });
+
+      pinkButtons.forEach(btn => {
+        btn.style('background', 'deeppink');
+        btn.style('color', 'white');
+      });
+
+      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
+    }
+    </code>
+    </div>
+return:
+  description: >-
+    array of <a href="#/p5.Element">p5.Element</a>s containing any elements
+    found.
+  type: 'p5.Element[]'
+chainable: false
+---
+
+
+# selectAll
diff --git a/src/content/reference/en/p5/set.mdx b/src/content/reference/en/p5/set.mdx
new file mode 100644
index 0000000000..5622e48922
--- /dev/null
+++ b/src/content/reference/en/p5/set.mdx
@@ -0,0 +1,148 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: set
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Sets the color of a pixel or draws an image to the canvas.</p>
+
+  <p><code>set()</code> is easy to use but it's not as fast as
+
+  <a href="#/p5/pixels">pixels</a>. Use <a href="#/p5/pixels">pixels</a>
+
+  to set many pixel values.</p>
+
+  <p><code>set()</code> interprets the first two parameters as x- and
+  y-coordinates. It
+
+  interprets the last parameter as a grayscale value, a <code>[R, G, B,
+  A]</code> pixel
+
+  array, a <a href="#/p5.Color">p5.Color</a> object, or a
+
+  <a href="#/p5.Image">p5.Image</a> object. If an image is passed, the first
+
+  two parameters set the coordinates for the image's upper-left corner,
+
+  regardless of the current <a href="#/p5/imageMode">imageMode()</a>.</p>
+
+  <p><a href="#/p5/updatePixels">updatePixels()</a> must be called after using
+
+  <code>set()</code> for changes to appear.</p>
+line: 801
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the pixel.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the pixel.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>grayscale value | pixel array |
+                                     <a href="#/p5.Color">p5.Color</a> object | <a href="#/p5.Image">p5.Image</a> to copy.</p>
+    type: 'Number|Number[]|Object'
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    set(30, 20, 0);
+
+    set(85, 20, 0);
+
+    set(85, 75, 0);
+
+    set(30, 75, 0);
+
+    updatePixels();
+
+
+    describe('Four black dots arranged in a square drawn on a gray
+    background.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let black = color(0);
+
+    set(30, 20, black);
+
+    set(85, 20, black);
+
+    set(85, 75, black);
+
+    set(30, 75, black);
+
+    updatePixels();
+
+
+    describe('Four black dots arranged in a square drawn on a gray
+    background.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    for (let x = 0; x < width; x += 1) {
+      for (let y = 0; y < height; y += 1) {
+        let c = map(x, 0, width, 0, 255);
+        set(x, y, c);
+      }
+    }
+
+    updatePixels();
+
+
+    describe('A horiztonal color gradient from black to white.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    let img;
+
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+
+    function setup() {
+      set(0, 0, img);
+      updatePixels();
+
+      describe('An image of a mountain landscape.');
+    }
+
+    </code>
+
+    </div>
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5/setAttributes.mdx b/src/content/reference/en/p5/setAttributes.mdx
new file mode 100644
index 0000000000..10ceb406f0
--- /dev/null
+++ b/src/content/reference/en/p5/setAttributes.mdx
@@ -0,0 +1,143 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setAttributes
+module: Rendering
+submodule: Rendering
+file: src/webgl/p5.RendererGL.js
+description: |
+  <p>Set attributes for the WebGL Drawing context.
+  This is a way of adjusting how the WebGL
+  renderer works to fine-tune the display and performance.</p>
+  <p>Note that this will reinitialize the drawing context
+  if called after the WebGL canvas is made.</p>
+  <p>If an object is passed as the parameter, all attributes
+  not declared in the object will be set to defaults.</p>
+  <p>The available attributes are:
+  <br>
+  alpha - indicates if the canvas contains an alpha buffer
+  default is true</p>
+  <p>depth - indicates whether the drawing buffer has a depth buffer
+  of at least 16 bits - default is true</p>
+  <p>stencil - indicates whether the drawing buffer has a stencil buffer
+  of at least 8 bits</p>
+  <p>antialias - indicates whether or not to perform anti-aliasing
+  default is false (true in Safari)</p>
+  <p>premultipliedAlpha - indicates that the page compositor will assume
+  the drawing buffer contains colors with pre-multiplied alpha
+  default is true</p>
+  <p>preserveDrawingBuffer - if true the buffers will not be cleared and
+  and will preserve their values until cleared or overwritten by author
+  (note that p5 clears automatically on draw loop)
+  default is true</p>
+  <p>perPixelLighting - if true, per-pixel lighting will be used in the
+  lighting shader otherwise per-vertex lighting is used.
+  default is true.</p>
+  <p>version - either 1 or 2, to specify which WebGL version to ask for. By
+  default, WebGL 2 will be requested. If WebGL2 is not available, it will
+  fall back to WebGL 1. You can check what version is used with by looking at
+  the global <code>webglVersion</code> property.</p>
+line: 112
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      push();
+      rotateZ(frameCount * 0.02);
+      rotateX(frameCount * 0.02);
+      rotateY(frameCount * 0.02);
+      fill(0, 0, 0);
+      box(50);
+      pop();
+    }
+    </code>
+    </div>
+    <br>
+    Now with the antialias attribute set to true.
+    <br>
+    <div>
+    <code>
+    function setup() {
+      setAttributes('antialias', true);
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      push();
+      rotateZ(frameCount * 0.02);
+      rotateX(frameCount * 0.02);
+      rotateY(frameCount * 0.02);
+      fill(0, 0, 0);
+      box(50);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // press the mouse button to disable perPixelLighting
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      fill(255);
+    }
+
+    let lights = [
+      { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+      { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+      { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+      { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+      { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+      { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+    ];
+
+    function draw() {
+      let t = millis() / 1000 + 1000;
+      background(0);
+      directionalLight(color('#222'), 1, 1, 1);
+
+      for (let i = 0; i < lights.length; i++) {
+        let light = lights[i];
+        pointLight(
+          color(light.c),
+          p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+        );
+      }
+
+      specularMaterial(255);
+      sphere(width * 0.1);
+
+      rotateX(t * 0.77);
+      rotateY(t * 0.83);
+      rotateZ(t * 0.91);
+      torus(width * 0.3, width * 0.07, 24, 10);
+    }
+
+    function mousePressed() {
+      setAttributes('perPixelLighting', false);
+      noStroke();
+      fill(255);
+    }
+    function mouseReleased() {
+      setAttributes('perPixelLighting', true);
+      noStroke();
+      fill(255);
+    }
+    </code>
+    </div>
+alt: a rotating cube with smoother edges
+chainable: false
+---
+
+
+# setAttributes
diff --git a/src/content/reference/en/p5/setBPM.mdx b/src/content/reference/en/p5/setBPM.mdx
new file mode 100644
index 0000000000..1412b36ef3
--- /dev/null
+++ b/src/content/reference/en/p5/setBPM.mdx
@@ -0,0 +1,26 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setBPM
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the global tempo, in beats per minute, for all
+  p5.Parts. This method will impact all active p5.Parts.</p>
+line: 9084
+params:
+  - name: BPM
+    description: |
+      <p>Beats Per Minute</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>Seconds from now</p>
+    type: Number
+itemtype: method
+class: p5
+chainable: false
+---
+
+
+# setBPM
diff --git a/src/content/reference/en/p5/setCamera.mdx b/src/content/reference/en/p5/setCamera.mdx
new file mode 100644
index 0000000000..323e31b46e
--- /dev/null
+++ b/src/content/reference/en/p5/setCamera.mdx
@@ -0,0 +1,93 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setCamera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: |
+  <p>Sets the current (active) camera of a 3D sketch.
+  Allows for switching between multiple cameras.</p>
+line: 2222
+params:
+  - name: cam
+    description: |
+      <p>p5.Camera object</p>
+    type: p5.Camera
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam1, cam2;
+    let currentCamera;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      normalMaterial();
+
+      cam1 = createCamera();
+      cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      cam2 = createCamera();
+      cam2.setPosition(30, 0, 50);
+      cam2.lookAt(0, 0, 0);
+      cam2.ortho(-50, 50, -50, 50, 0, 200);
+
+      // set variable for previously active camera:
+      currentCamera = 1;
+
+      describe(
+        'Canvas switches between two camera views, each showing a series of spinning 3D boxes.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // every 100 frames, switch between the two cameras
+      if (frameCount % 100 === 0) {
+        if (currentCamera === 1) {
+          setCamera(cam1);
+          currentCamera = 0;
+        } else {
+          setCamera(cam2);
+          currentCamera = 1;
+        }
+      }
+
+      // camera 1:
+      cam1.lookAt(0, 0, 0);
+      cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
+
+      drawBoxes();
+    }
+
+    function drawBoxes() {
+      rotateX(frameCount * 0.01);
+      translate(-100, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+      translate(35, 0, 0);
+      box(20);
+    }
+    </code>
+    </div>
+alt: |-
+  Canvas switches between two camera views, each showing a series of spinning
+  3D boxes.
+chainable: false
+---
+
+
+# setCamera
diff --git a/src/content/reference/en/p5/setMoveThreshold.mdx b/src/content/reference/en/p5/setMoveThreshold.mdx
new file mode 100644
index 0000000000..04738dd964
--- /dev/null
+++ b/src/content/reference/en/p5/setMoveThreshold.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setMoveThreshold
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="#/p5/setMoveThreshold">setMoveThreshold()</a> function is used
+  to set the movement threshold for
+
+  the <a href="#/p5/deviceMoved">deviceMoved()</a> function. The default
+  threshold is set to 0.5.</p>
+line: 417
+params:
+  - name: value
+    description: |
+      <p>The threshold value</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // You will need to move the device incrementally further
+    // the closer the square's color gets to white in order to change the value.
+
+    let value = 0;
+    let threshold = 0.5;
+    function setup() {
+      setMoveThreshold(threshold);
+    }
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device moves`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      threshold = threshold + 0.1;
+      if (value > 255) {
+        value = 0;
+        threshold = 30;
+      }
+      setMoveThreshold(threshold);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setMoveThreshold
diff --git a/src/content/reference/en/p5/setShakeThreshold.mdx b/src/content/reference/en/p5/setShakeThreshold.mdx
new file mode 100644
index 0000000000..8c15afd499
--- /dev/null
+++ b/src/content/reference/en/p5/setShakeThreshold.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setShakeThreshold
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="#/p5/setShakeThreshold">setShakeThreshold()</a> function is
+  used to set the movement threshold for
+
+  the <a href="#/p5/deviceShaken">deviceShaken()</a> function. The default
+  threshold is set to 30.</p>
+line: 459
+params:
+  - name: value
+    description: |
+      <p>The threshold value</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // You will need to shake the device more firmly
+    // the closer the box's fill gets to white in order to change the value.
+
+    let value = 0;
+    let threshold = 30;
+    function setup() {
+      setShakeThreshold(threshold);
+    }
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device is being shaked`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      threshold = threshold + 5;
+      if (value > 255) {
+        value = 0;
+        threshold = 30;
+      }
+      setShakeThreshold(threshold);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# setShakeThreshold
diff --git a/src/content/reference/en/p5/setup.mdx b/src/content/reference/en/p5/setup.mdx
new file mode 100644
index 0000000000..f186b19656
--- /dev/null
+++ b/src/content/reference/en/p5/setup.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: setup
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>The <a href="#/p5/setup">setup()</a> function is called once when the
+  program starts. It's used to
+
+  define initial environment properties such as screen size and background
+
+  color and to load media such as images and fonts as the program starts.
+
+  There can only be one <a href="#/p5/setup">setup()</a> function for each
+  program and it shouldn't
+
+  be called again after its initial execution.</p>
+
+  <p>Note: Variables declared within <a href="#/p5/setup">setup()</a> are not
+  accessible within other
+
+  functions, including <a href="#/p5/draw">draw()</a>.</p>
+line: 82
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    let a = 0;
+
+    function setup() {
+      background(0);
+      noStroke();
+      fill(102);
+    }
+
+    function draw() {
+      rect(a++ % width, 10, 2, 80);
+    }
+    </code></div>
+alt: nothing displayed
+chainable: false
+---
+
+
+# setup
diff --git a/src/content/reference/en/p5/shader.mdx b/src/content/reference/en/p5/shader.mdx
new file mode 100644
index 0000000000..b550cd022d
--- /dev/null
+++ b/src/content/reference/en/p5/shader.mdx
@@ -0,0 +1,134 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: shader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the <a href="#/p5.Shader">p5.Shader</a> object to
+
+  be used to render subsequent shapes.</p>
+
+  <p>Shaders can alter the positioning of shapes drawn with them.
+
+  To ensure consistency in rendering, it's recommended to use the vertex shader
+  in the <a href="#/p5/createShader">createShader example</a>.</p>
+
+  <p>Custom shaders can be created using the
+
+  <a href="#/p5/createShader">createShader()</a> and
+
+  <a href="#/p5/loadShader">loadShader()</a> functions.</p>
+
+  <p>Use <a href="#/p5/resetShader">resetShader()</a> to
+
+  restore the default shaders.</p>
+
+  <p>Additional Information:
+
+  The shader will be used for:</p>
+
+  <ul>
+
+  <li>Fills when a texture is enabled if it includes a uniform
+  <code>sampler2D</code>.</li>
+
+  <li>Fills when lights are enabled if it includes the attribute
+  <code>aNormal</code>, or if it has any of the following uniforms:
+  <code>uUseLighting</code>, <code>uAmbientLightCount</code>,
+  <code>uDirectionalLightCount</code>, <code>uPointLightCount</code>,
+  <code>uAmbientColor</code>, <code>uDirectionalDiffuseColors</code>,
+  <code>uDirectionalSpecularColors</code>, <code>uPointLightLocation</code>,
+  <code>uPointLightDiffuseColors</code>, <code>uPointLightSpecularColors</code>,
+  <code>uLightingDirection</code>, or <code>uSpecular</code>.</li>
+
+  <li>Fills whenever there are no lights or textures.</li>
+
+  <li>Strokes if it includes the uniform <code>uStrokeWeight</code>.
+
+  Note: This behavior is considered experimental, and changes are planned in
+  future releases.</li>
+
+  </ul>
+
+  <p>Note, shaders can only be used in WEBGL mode.</p>
+line: 331
+params:
+  - name: s
+    description: |
+      <p>the <a href="#/p5.Shader">p5.Shader</a> object
+      to use for rendering shapes.</p>
+    type: p5.Shader
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Click within the image to toggle
+    // the shader used by the quad shape
+    // Note: for an alternative approach to the same example,
+    // involving changing uniforms please refer to:
+    // https://p5js.org/reference/#/p5.Shader/setUniform
+
+    let redGreen;
+    let orangeBlue;
+    let showRedGreen = false;
+
+    function preload() {
+      // note that we are using two instances
+      // of the same vertex and fragment shaders
+      redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+      orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // initialize the colors for redGreen shader
+      shader(redGreen);
+      redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+      redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+
+      // initialize the colors for orangeBlue shader
+      shader(orangeBlue);
+      orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+      orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+
+      noStroke();
+
+      describe(
+        'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
+      );
+    }
+
+    function draw() {
+      // update the offset values for each shader,
+      // moving orangeBlue in vertical and redGreen
+      // in horizontal direction
+      orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+      redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
+
+      if (showRedGreen === true) {
+        shader(redGreen);
+      } else {
+        shader(orangeBlue);
+      }
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+
+    function mouseClicked() {
+      showRedGreen = !showRedGreen;
+    }
+    </code>
+    </div>
+alt: >-
+  canvas toggles between a circular gradient of orange and blue vertically. and
+  a circular gradient of red and green moving horizontally when mouse is
+  clicked/pressed.
+chainable: true
+---
+
+
+# shader
diff --git a/src/content/reference/en/p5/shearX.mdx b/src/content/reference/en/p5/shearX.mdx
new file mode 100644
index 0000000000..702923b022
--- /dev/null
+++ b/src/content/reference/en/p5/shearX.mdx
@@ -0,0 +1,57 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: shearX
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Shears a shape around the x-axis by the amount specified by the angle
+
+  parameter. Angles should be specified in the current angleMode.
+
+  Objects are always sheared around their relative position to the origin
+
+  and positive numbers shear objects in a clockwise direction.</p>
+
+  <p>Transformations apply to everything that happens after and subsequent
+
+  calls to the function accumulates the effect. For example, calling
+
+  shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).
+
+  If <a href="#/p5/shearX">shearX()</a> is called within the <a
+  href="#/p5/draw">draw()</a>,
+
+  the transformation is reset when the loop begins again.</p>
+
+  <p>Technically, <a href="#/p5/shearX">shearX()</a> multiplies the current
+
+  transformation matrix by a rotation matrix. This function can be further
+
+  controlled by the <a href="#/p5/push">push()</a> and <a
+  href="#/p5/pop">pop()</a> functions.</p>
+line: 451
+params:
+  - name: angle
+    description: |
+      <p>angle of shear specified in radians or degrees,
+                             depending on current angleMode</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    translate(width / 4, height / 4);
+    shearX(PI / 4.0);
+    rect(0, 0, 30, 30);
+    </code>
+    </div>
+alt: white irregular quadrilateral with black outline at top middle.
+chainable: true
+---
+
+
+# shearX
diff --git a/src/content/reference/en/p5/shearY.mdx b/src/content/reference/en/p5/shearY.mdx
new file mode 100644
index 0000000000..9ddfa4707b
--- /dev/null
+++ b/src/content/reference/en/p5/shearY.mdx
@@ -0,0 +1,57 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: shearY
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Shears a shape around the y-axis the amount specified by the angle
+
+  parameter. Angles should be specified in the current angleMode. Objects
+
+  are always sheared around their relative position to the origin and
+
+  positive numbers shear objects in a clockwise direction.</p>
+
+  <p>Transformations apply to everything that happens after and subsequent
+
+  calls to the function accumulates the effect. For example, calling
+
+  shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If
+
+  <a href="#/p5/shearY">shearY()</a> is called within the <a
+  href="#/p5/draw">draw()</a>, the transformation is reset when
+
+  the loop begins again.</p>
+
+  <p>Technically, <a href="#/p5/shearY">shearY()</a> multiplies the current
+  transformation matrix by a
+
+  rotation matrix. This function can be further controlled by the
+
+  <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions.</p>
+line: 490
+params:
+  - name: angle
+    description: |
+      <p>angle of shear specified in radians or degrees,
+                             depending on current angleMode</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    translate(width / 4, height / 4);
+    shearY(PI / 4.0);
+    rect(0, 0, 30, 30);
+    </code>
+    </div>
+alt: white irregular quadrilateral with black outline at middle bottom.
+chainable: true
+---
+
+
+# shearY
diff --git a/src/content/reference/en/p5/shininess.mdx b/src/content/reference/en/p5/shininess.mdx
new file mode 100644
index 0000000000..464719e430
--- /dev/null
+++ b/src/content/reference/en/p5/shininess.mdx
@@ -0,0 +1,50 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: shininess
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: |
+  <p>Sets the amount of gloss ("shininess") of a
+  <a href="#/p5/specularMaterial">specularMaterial()</a>.</p>
+  <p>The default and minimum value is 1.</p>
+line: 1139
+params:
+  - name: shine
+    description: |
+      <p>degree of shininess</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('two spheres, one more shiny than the other');
+    }
+    function draw() {
+      background(0);
+      noStroke();
+      let locX = mouseX - width / 2;
+      let locY = mouseY - height / 2;
+      ambientLight(60, 60, 60);
+      pointLight(255, 255, 255, locX, locY, 50);
+      specularMaterial(250);
+      translate(-25, 0, 0);
+      shininess(1);
+      sphere(20);
+      translate(50, 0, 0);
+      shininess(20);
+      sphere(20);
+    }
+    </code>
+    </div>
+alt: 'two spheres, one more shiny than the other'
+chainable: true
+---
+
+
+# shininess
diff --git a/src/content/reference/en/p5/shorten.mdx b/src/content/reference/en/p5/shorten.mdx
new file mode 100644
index 0000000000..4222778426
--- /dev/null
+++ b/src/content/reference/en/p5/shorten.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: shorten
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Decreases an array by one element and returns the shortened array,
+  maps to Array.pop().</p>
+line: 161
+params:
+  - name: list
+    description: |
+      <p>Array to shorten</p>
+    type: Array
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = ['A', 'B', 'C'];
+      print(myArray); // ['A', 'B', 'C']
+      let newArray = shorten(myArray);
+      print(myArray); // ['A','B','C']
+      print(newArray); // ['A','B']
+    }
+    </code></div>
+return:
+  description: shortened Array
+  type: Array
+chainable: false
+---
+
+
+# shorten
diff --git a/src/content/reference/en/p5/shuffle.mdx b/src/content/reference/en/p5/shuffle.mdx
new file mode 100644
index 0000000000..b6917177bd
--- /dev/null
+++ b/src/content/reference/en/p5/shuffle.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: shuffle
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Randomizes the order of the elements of an array. Implements
+  <a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>
+  Fisher-Yates Shuffle Algorithm</a>.</p>
+line: 185
+params:
+  - name: array
+    description: |
+      <p>Array to shuffle</p>
+    type: Array
+  - name: bool
+    description: |
+      <p>modify passed array</p>
+    type: Boolean
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    function setup() {
+      let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
+      print(regularArr);
+      shuffle(regularArr, true); // force modifications to passed array
+      print(regularArr);
+
+      // By default shuffle() returns a shuffled cloned array:
+      let newArr = shuffle(regularArr);
+      print(regularArr);
+      print(newArr);
+    }
+    </code></div>
+return:
+  description: shuffled Array
+  type: Array
+chainable: false
+---
+
+
+# shuffle
diff --git a/src/content/reference/en/p5/sin.mdx b/src/content/reference/en/p5/sin.mdx
new file mode 100644
index 0000000000..7dd481c4d8
--- /dev/null
+++ b/src/content/reference/en/p5/sin.mdx
@@ -0,0 +1,74 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sin
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the sine of an angle. <code>sin()</code> is useful for many
+  geometric tasks
+
+  in creative coding. The values returned oscillate between -1 and 1 as the
+
+  input angle increases. <code>sin()</code> takes into account the current
+
+  <a href="#/p5/angleMode">angleMode</a>.</p>
+line: 239
+params:
+  - name: angle
+    description: |
+      <p>the angle.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      let t = frameCount;
+      let x = 50;
+      let y = 30 * sin(t * 0.05) + 50;
+      line(x, 50, x, y);
+      circle(x, y, 20);
+
+      describe('A white ball on a string oscillates up and down.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      let x = frameCount;
+      let y = 30 * sin(x * 0.1) + 50;
+      point(x, y);
+
+      describe('A series of black dots form a wave pattern.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      let t = frameCount;
+      let x = 30 * cos(t * 0.1) + 50;
+      let y = 10 * sin(t * 0.2) + 50;
+      point(x, y);
+
+      describe('A series of black dots form an infinity symbol.');
+    }
+    </code>
+    </div>
+return:
+  description: sine of the angle.
+  type: Number
+chainable: false
+---
+
+
+# sin
diff --git a/src/content/reference/en/p5/smooth.mdx b/src/content/reference/en/p5/smooth.mdx
new file mode 100644
index 0000000000..f7742c5928
--- /dev/null
+++ b/src/content/reference/en/p5/smooth.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: SMOOTH
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 718
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# SMOOTH
diff --git a/src/content/reference/en/p5/sort.mdx b/src/content/reference/en/p5/sort.mdx
new file mode 100644
index 0000000000..ff5f338c7d
--- /dev/null
+++ b/src/content/reference/en/p5/sort.mdx
@@ -0,0 +1,56 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sort
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Sorts an array of numbers from smallest to largest, or puts an array of
+  words in alphabetical order. The original array is not modified; a
+  re-ordered array is returned. The count parameter states the number of
+  elements to sort. For example, if there are 12 elements in an array and
+  count is set to 5, only the first 5 elements in the array will be sorted.</p>
+line: 227
+params:
+  - name: list
+    description: |
+      <p>Array to sort</p>
+    type: Array
+  - name: count
+    description: |
+      <p>number of elements to sort, starting from 0</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let words = ['banana', 'apple', 'pear', 'lime'];
+      print(words); // ['banana', 'apple', 'pear', 'lime']
+      let count = 4; // length of array
+
+      words = sort(words, count);
+      print(words); // ['apple', 'banana', 'lime', 'pear']
+    }
+    </code></div>
+    <div class = 'norender'><code>
+    function setup() {
+      let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+      print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+      let count = 5; // Less than the length of the array
+
+      numbers = sort(numbers, count);
+      print(numbers); // [1,2,5,6,14,9,8,12]
+    }
+    </code></div>
+return:
+  description: the sorted list
+  type: Array
+chainable: false
+---
+
+
+# sort
diff --git a/src/content/reference/en/p5/soundFormats.mdx b/src/content/reference/en/p5/soundFormats.mdx
new file mode 100644
index 0000000000..549cd255ea
--- /dev/null
+++ b/src/content/reference/en/p5/soundFormats.mdx
@@ -0,0 +1,48 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: soundFormats
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>List the SoundFile formats that you will include. LoadSound
+  will search your directory for these extensions, and will pick
+  a format that is compatable with the client's web browser.
+  <a href="http://media.io/">Here</a> is a free online file
+  converter.</p>
+line: 925
+params:
+  - name: formats
+    description: |
+      <p>i.e. 'mp3', 'wav', 'ogg'</p>
+    type: String
+    optional: true
+    multiple: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    function preload() {
+      // set the global sound formats
+      soundFormats('mp3', 'ogg');
+
+      // load either beatbox.mp3, or .ogg, depending on browser
+      mySound = loadSound('assets/beatbox.mp3');
+    }
+
+    function setup() {
+         let cnv = createCanvas(100, 100);
+         background(220);
+         text('sound loaded! tap to play', 10, 20, width - 20);
+         cnv.mousePressed(function() {
+           mySound.play();
+         });
+       }
+    </code></div>
+chainable: false
+---
+
+
+# soundFormats
diff --git a/src/content/reference/en/p5/soundOut.mdx b/src/content/reference/en/p5/soundOut.mdx
new file mode 100644
index 0000000000..fbb10b6924
--- /dev/null
+++ b/src/content/reference/en/p5/soundOut.mdx
@@ -0,0 +1,23 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: soundOut
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p><code>p5.soundOut</code> is the p5.sound final output bus. It sends output
+  to
+
+  the destination of this window's web audio context. It contains
+
+  Web Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),
+
+  and Gain Nodes for <code>.input</code> and <code>.output</code>.</p>
+line: 782
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# soundOut
diff --git a/src/content/reference/en/p5/specularColor.mdx b/src/content/reference/en/p5/specularColor.mdx
new file mode 100644
index 0000000000..13882f09de
--- /dev/null
+++ b/src/content/reference/en/p5/specularColor.mdx
@@ -0,0 +1,85 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: specularColor
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Sets the color of the specular highlight of a non-ambient light
+
+  (i.e. all lights except <a href="#/p5/ambientLight">ambientLight()</a>).</p>
+
+  <p>specularColor() affects only the lights which are created after
+
+  it in the code.</p>
+
+  <p>This function is used in combination with
+
+  <a href="#/p5/specularMaterial">specularMaterial()</a>.
+
+  If a geometry does not use specularMaterial(), this function
+
+  will have no effect.</p>
+
+  <p>The default color is white (255, 255, 255), which is used if
+
+  specularColor() is not explicitly called.</p>
+
+  <p>Note: specularColor is equivalent to the Processing function
+
+  <a
+  href="https://processing.org/reference/lightSpecular_.html">lightSpecular</a>.</p>
+line: 134
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let setRedSpecularColor = true;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      describe(
+        'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      ambientLight(60);
+
+      // add a point light to showcase specular color
+      // -- use mouse location to position the light
+      let lightPosX = mouseX - width / 2;
+      let lightPosY = mouseY - height / 2;
+      // -- set the light's specular color
+      if (setRedSpecularColor) {
+        specularColor(255, 0, 0); // red specular highlight
+      }
+      // -- create the light
+      pointLight(200, 200, 200, lightPosX, lightPosY, 50); // white light
+
+      // use specular material with high shininess
+      specularMaterial(150);
+      shininess(50);
+
+      sphere(30, 64, 64);
+    }
+
+    function mouseClicked() {
+      setRedSpecularColor = !setRedSpecularColor;
+    }
+    </code>
+    </div>
+alt: |-
+  Sphere with specular highlight. Clicking the mouse toggles the
+  specular highlight color between red and the default white.
+chainable: true
+---
+
+
+# specularColor
diff --git a/src/content/reference/en/p5/specularMaterial.mdx b/src/content/reference/en/p5/specularMaterial.mdx
new file mode 100644
index 0000000000..565709ff71
--- /dev/null
+++ b/src/content/reference/en/p5/specularMaterial.mdx
@@ -0,0 +1,71 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: specularMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the specular color of the material.</p>
+
+  <p>A specular material is reflective (shiny). The shininess can be
+
+  controlled by the <a href="#/p5/shininess">shininess()</a> function.</p>
+
+  <p>Like <a href="#/p5/ambientMaterial">ambientMaterial()</a>,
+
+  the specularMaterial() color is the color the object will reflect
+
+  under <a href="#/p5/ambientLight">ambientLight()</a>.
+
+  However unlike ambientMaterial(), for all other types of lights
+
+  (<a href="#/p5/directionalLight">directionalLight()</a>,
+
+  <a href="#/p5/pointLight">pointLight()</a>,
+
+  <a href="#/p5/spotLight">spotLight()</a>),
+
+  a specular material will reflect the <strong>color of the light
+  source</strong>.
+
+  This is what gives it its "shiny" appearance.</p>
+
+  <p>You can view more materials in this
+
+  <a href="https://p5js.org/examples/3d-materials.html">example</a>.</p>
+line: 1053
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      describe('torus with specular material');
+    }
+
+    function draw() {
+      background(0);
+
+      ambientLight(60);
+
+      // add point light to showcase specular material
+      let locX = mouseX - width / 2;
+      let locY = mouseY - height / 2;
+      pointLight(255, 255, 255, locX, locY, 50);
+
+      specularMaterial(250);
+      shininess(50);
+      torus(30, 10, 64, 64);
+    }
+    </code>
+    </div>
+alt: torus with specular material
+chainable: true
+---
+
+
+# specularMaterial
diff --git a/src/content/reference/en/p5/sphere.mdx b/src/content/reference/en/p5/sphere.mdx
new file mode 100644
index 0000000000..0ae6faa143
--- /dev/null
+++ b/src/content/reference/en/p5/sphere.mdx
@@ -0,0 +1,104 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sphere
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draw a sphere with given radius.</p>
+
+  <p>DetailX and detailY determines the number of subdivisions in the
+  x-dimension
+
+  and the y-dimension of a sphere. More subdivisions make the sphere seem
+
+  smoother. The recommended maximum values are both 24. Using a value greater
+
+  than 24 may cause a warning or slow down the browser.</p>
+line: 389
+params:
+  - name: radius
+    description: |
+      <p>radius of circle</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>optional number of subdivisions in x-dimension</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>optional number of subdivisions in y-dimension</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // draw a sphere with radius 40
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('a white sphere with black wireframe lines');
+    }
+
+    function draw() {
+      background(205, 102, 94);
+      sphere(40);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let detailX;
+    // slide to see how detailX works
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailX = createSlider(3, 24, 3);
+      detailX.position(10, height + 5);
+      detailX.style('width', '80px');
+      describe(
+        'a white sphere with low detail on the x-axis, including a slider to adjust detailX'
+      );
+    }
+
+    function draw() {
+      background(205, 105, 94);
+      rotateY(millis() / 1000);
+      sphere(40, detailX.value(), 16);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let detailY;
+    // slide to see how detailY works
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      detailY = createSlider(3, 16, 3);
+      detailY.position(10, height + 5);
+      detailY.style('width', '80px');
+      describe(
+        'a white sphere with low detail on the y-axis, including a slider to adjust detailY'
+      );
+    }
+
+    function draw() {
+      background(205, 105, 94);
+      rotateY(millis() / 1000);
+      sphere(40, 16, detailY.value());
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# sphere
diff --git a/src/content/reference/en/p5/splice.mdx b/src/content/reference/en/p5/splice.mdx
new file mode 100644
index 0000000000..756fc084c8
--- /dev/null
+++ b/src/content/reference/en/p5/splice.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: splice
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Inserts a value or an array of values into an existing array. The first
+  parameter specifies the initial array to be modified, and the second
+  parameter defines the data to be inserted. The third parameter is an index
+  value which specifies the array position from which to insert data.
+  (Remember that array index numbering starts at zero, so the first position
+  is 0, the second position is 1, and so on.)</p>
+line: 273
+params:
+  - name: list
+    description: |
+      <p>Array to splice into</p>
+    type: Array
+  - name: value
+    description: |
+      <p>value to be spliced in</p>
+    type: Any
+  - name: position
+    description: |
+      <p>in the array from which to insert data</p>
+    type: Integer
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = [0, 1, 2, 3, 4];
+      let insArray = ['A', 'B', 'C'];
+      print(myArray); // [0, 1, 2, 3, 4]
+      print(insArray); // ['A','B','C']
+
+      splice(myArray, insArray, 3);
+      print(myArray); // [0,1,2,'A','B','C',3,4]
+    }
+    </code></div>
+return:
+  description: the list
+  type: Array
+chainable: false
+---
+
+
+# splice
diff --git a/src/content/reference/en/p5/split.mdx b/src/content/reference/en/p5/split.mdx
new file mode 100644
index 0000000000..6b1fc51e6c
--- /dev/null
+++ b/src/content/reference/en/p5/split.mdx
@@ -0,0 +1,65 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: split
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>The <a href="#/p5/split">split()</a> function maps to String.split(), it
+  breaks a String into
+
+  pieces using a character or string as the delimiter. The delim parameter
+
+  specifies the character or characters that mark the boundaries between
+
+  each piece. A String[] array is returned that contains each of the pieces.</p>
+
+  <p>The <a href="#/p5/splitTokens">splitTokens()</a> function works in a
+  similar fashion, except that it
+
+  splits using a range of characters instead of a specific character or
+
+  sequence.</p>
+line: 427
+params:
+  - name: value
+    description: |
+      <p>the String to be split</p>
+    type: String
+  - name: delim
+    description: |
+      <p>the String used to separate the data</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    let names = 'Pat,Xio,Alex';
+
+    let splitString = split(names, ',');
+
+    text(splitString[0], 5, 30);
+
+    text(splitString[1], 5, 50);
+
+    text(splitString[2], 5, 70);
+
+    describe('“Pat” top left, “Xio” mid left, and “Alex” displayed bottom
+    left');
+
+    </code>
+
+    </div>
+return:
+  description: Array of Strings
+  type: 'String[]'
+chainable: false
+---
+
+
+# split
diff --git a/src/content/reference/en/p5/splitTokens.mdx b/src/content/reference/en/p5/splitTokens.mdx
new file mode 100644
index 0000000000..042d75f99f
--- /dev/null
+++ b/src/content/reference/en/p5/splitTokens.mdx
@@ -0,0 +1,54 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: splitTokens
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>The <a href="#/p5/splitTokens">splitTokens()</a> function splits a String
+  at one or many character
+
+  delimiters or "tokens." The delim parameter specifies the character or
+
+  characters to be used as a boundary.</p>
+
+  <p>If no delim characters are specified, any whitespace character is used to
+
+  split. Whitespace characters include tab (\t), line feed (\n), carriage
+
+  return (\r), form feed (\f), and space.</p>
+line: 458
+params:
+  - name: value
+    description: |
+      <p>the String to be split</p>
+    type: String
+  - name: delim
+    description: |
+      <p>list of individual Strings that will be used as
+                               separators</p>
+    type: String
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class = "norender">
+    <code>
+    function setup() {
+      let myStr = 'Mango, Banana, Lime';
+      let myStrArr = splitTokens(myStr, ',');
+
+      print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
+    }
+    </code>
+    </div>
+return:
+  description: Array of Strings
+  type: 'String[]'
+chainable: false
+---
+
+
+# splitTokens
diff --git a/src/content/reference/en/p5/spotLight.mdx b/src/content/reference/en/p5/spotLight.mdx
new file mode 100644
index 0000000000..f3dc10dd11
--- /dev/null
+++ b/src/content/reference/en/p5/spotLight.mdx
@@ -0,0 +1,87 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: spotLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a spot light with the given color, position,
+
+  light direction, angle, and concentration.</p>
+
+  <p>Like a <a href="#/p5/pointLight">pointLight()</a>, a spotLight()
+
+  emits light from a specific point (position). It has a different effect
+
+  when it is positioned farther vs. nearer an object.</p>
+
+  <p>However, unlike a pointLight(), the light is emitted in <strong>one
+  direction</strong>
+
+  along a conical shape. The shape of the cone can be controlled using
+
+  the <code>angle</code> and <code>concentration</code> parameters.</p>
+
+  <p>The <code>angle</code> parameter is used to
+
+  determine the radius of the cone. And the <code>concentration</code>
+
+  parameter is used to focus the light towards the center of
+
+  the cone. Both parameters are optional, however if you want
+
+  to specify <code>concentration</code>, you must also specify
+  <code>angle</code>.
+
+  The minimum concentration value is 1.</p>
+
+  <p>A maximum of <strong>5</strong> spot lights can be active at once.</p>
+
+  <p>Note: lights need to be called (whether directly or indirectly)
+
+  within draw() to remain persistent in a looping program.
+
+  Placing them in setup() will cause them to only have an effect
+
+  the first time through the loop.</p>
+line: 747
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe(
+        'scene with sphere and spot light. The position of the light is controlled with the mouse position.'
+      );
+    }
+    function draw() {
+      background(0);
+      // move your mouse to change light position
+      let locX = mouseX - width / 2;
+      let locY = mouseY - height / 2;
+      // to set the light position,
+      // think of the world's coordinate as:
+      // -width/2,-height/2 ----------- width/2,-height/2
+      //                   |           |
+      //                   |    0,0    |
+      //                   |           |
+      //  -width/2,height/2 ----------- width/2,height/2
+      ambientLight(50);
+      spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
+      noStroke();
+      sphere(40);
+    }
+    </code>
+    </div>
+alt: |-
+  scene with sphere and spot light. The position of
+  the light is controlled with the mouse position.
+chainable: true
+---
+
+
+# spotLight
diff --git a/src/content/reference/en/p5/sq.mdx b/src/content/reference/en/p5/sq.mdx
new file mode 100644
index 0000000000..72fe1e8ffc
--- /dev/null
+++ b/src/content/reference/en/p5/sq.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sq
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Squares a number, which means multiplying the number by itself. The value
+
+  returned is always a positive number.</p>
+
+  <p>For example, <code>sq(3)</code> evaluates 3 × 3  which is 9.
+  <code>sq(-3)</code> evaluates
+
+  -3 × -3 which is also 9.  Multiplying two negative numbers produces
+
+  a positive number.</p>
+line: 670
+params:
+  - name: 'n'
+    description: |
+      <p>number to square.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -height);
+
+      let x = frameCount;
+      let y = 0.01 * sq(x);
+      point(x, y);
+
+      describe('A series of black dots that get higher quickly from left to right.');
+    }
+    </code>
+    </div>
+return:
+  description: squared number.
+  type: Number
+chainable: false
+---
+
+
+# sq
diff --git a/src/content/reference/en/p5/sqrt.mdx b/src/content/reference/en/p5/sqrt.mdx
new file mode 100644
index 0000000000..a173e46a4e
--- /dev/null
+++ b/src/content/reference/en/p5/sqrt.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: sqrt
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the square root of a number. A number's square root can be
+
+  multiplied by itself to produce the original number.</p>
+
+  <p>For example, <code>sqrt(9)</code> returns 3 because 3 × 3 = 9.
+  <code>sqrt()</code> always
+
+  returns a positive value. <code>sqrt()</code> doesn't work with negative
+  arguments
+
+  such as <code>sqrt(-9)</code>.</p>
+line: 700
+params:
+  - name: 'n'
+    description: |
+      <p>non-negative number to square root.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -height);
+
+      let x = frameCount;
+      let y = 5 * sqrt(x);
+      point(x, y);
+
+      describe('A series of black dots that get higher slowly from left to right.');
+    }
+    </code>
+    </div>
+return:
+  description: square root of number.
+  type: Number
+chainable: false
+---
+
+
+# sqrt
diff --git a/src/content/reference/en/p5/square.mdx b/src/content/reference/en/p5/square.mdx
new file mode 100644
index 0000000000..1bc0e081cd
--- /dev/null
+++ b/src/content/reference/en/p5/square.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: SQUARE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 341
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# SQUARE
diff --git a/src/content/reference/en/p5/storeItem.mdx b/src/content/reference/en/p5/storeItem.mdx
new file mode 100644
index 0000000000..573657c6dd
--- /dev/null
+++ b/src/content/reference/en/p5/storeItem.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: storeItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: |
+  <p>Stores a value in local storage under the key name.
+   Local storage is saved in the browser and persists
+   between browsing sessions and page reloads.
+   The key can be the name of the variable but doesn't
+   have to be. To retrieve stored items
+   see <a href="#/p5/getItem">getItem</a>.
+  Sensitive data such as passwords or personal information
+   should not be stored in local storage.</p>
+line: 10
+params:
+  - name: key
+    description: ''
+    type: String
+  - name: value
+    description: ''
+    type: String|Number|Object|Boolean|p5.Color|p5.Vector
+itemtype: method
+class: p5
+example:
+  - |2-
+
+     <div><code>
+     // Type to change the letter in the
+     // center of the canvas.
+     // If you reload the page, it will
+     // still display the last key you entered
+    let myText;
+    function setup() {
+       createCanvas(100, 100);
+       myText = getItem('myText');
+       if (myText === null) {
+         myText = '';
+       }
+       describe(`When you type the key name is displayed as black text on white background.
+       If you reload the page, the last letter typed is still displaying.`);
+     }
+    function draw() {
+       textSize(40);
+       background(255);
+       text(myText, width / 2, height / 2);
+     }
+    function keyPressed() {
+       myText = key;
+       storeItem('myText', myText);
+     }
+     </code></div>
+chainable: false
+---
+
+
+# storeItem
diff --git a/src/content/reference/en/p5/str.mdx b/src/content/reference/en/p5/str.mdx
new file mode 100644
index 0000000000..f3c30ed4eb
--- /dev/null
+++ b/src/content/reference/en/p5/str.mdx
@@ -0,0 +1,37 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: str
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a boolean, string or number to its string representation.
+  When an array of values is passed in, then an array of strings of the same
+  length is returned.</p>
+line: 86
+params:
+  - name: 'n'
+    description: |
+      <p>value to parse</p>
+    type: String|Boolean|Number|Array
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(str('10')); // "10"
+    print(str(10.31)); // "10.31"
+    print(str(-10)); // "-10"
+    print(str(true)); // "true"
+    print(str(false)); // "false"
+    print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
+    </code></div>
+return:
+  description: string representation of value
+  type: String
+chainable: false
+---
+
+
+# str
diff --git a/src/content/reference/en/p5/string.mdx b/src/content/reference/en/p5/string.mdx
new file mode 100644
index 0000000000..c012cc7dd0
--- /dev/null
+++ b/src/content/reference/en/p5/string.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: string
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A <a href="#/p5/string">string</a> is one of the 7 <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">primitive
+  data types</a> in Javascript.
+
+  A string is a series of text characters. In Javascript, a string value must
+
+  be surrounded by either single-quotation marks(') or double-quotation
+  marks(").</p>
+
+  <p>From <a href="https://developer.mozilla.org/en-US/docs/Glossary/string">the
+  MDN entry</a>:
+
+  A string is a sequence of characters used to represent text.</p>
+line: 309
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    let mood = 'chill';
+    console.log(typeof mood); // prints 'string' to the console
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# string
diff --git a/src/content/reference/en/p5/stroke.mdx b/src/content/reference/en/p5/stroke.mdx
new file mode 100644
index 0000000000..2c01d8de02
--- /dev/null
+++ b/src/content/reference/en/p5/stroke.mdx
@@ -0,0 +1,15 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: STROKE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 660
+itemtype: property
+class: p5
+chainable: false
+---
+
+
+# STROKE
diff --git a/src/content/reference/en/p5/strokeCap.mdx b/src/content/reference/en/p5/strokeCap.mdx
new file mode 100644
index 0000000000..f1c43bbeb3
--- /dev/null
+++ b/src/content/reference/en/p5/strokeCap.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: strokeCap
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the style for rendering line endings. These ends are either rounded
+
+  (<code>ROUND</code>), squared (<code>SQUARE</code>), or extended
+  (<code>PROJECT</code>). The default cap is
+
+  <code>ROUND</code>.</p>
+
+  <p>The argument passed to <code>strokeCap()</code> must be written in ALL CAPS
+  because
+
+  the constants <code>ROUND</code>, <code>SQUARE</code>, and
+  <code>PROJECT</code> are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 209
+params:
+  - name: cap
+    description: |
+      <p>either ROUND, SQUARE, or PROJECT</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    strokeWeight(12.0);
+
+    strokeCap(ROUND);
+
+    line(20, 30, 80, 30);
+
+    strokeCap(SQUARE);
+
+    line(20, 50, 80, 50);
+
+    strokeCap(PROJECT);
+
+    line(20, 70, 80, 70);
+
+    describe('Three horizontal lines. The top line has rounded ends, the middle
+    line has squared ends, and the bottom line has longer, squared ends.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# strokeCap
diff --git a/src/content/reference/en/p5/strokeJoin.mdx b/src/content/reference/en/p5/strokeJoin.mdx
new file mode 100644
index 0000000000..4f2d733f3c
--- /dev/null
+++ b/src/content/reference/en/p5/strokeJoin.mdx
@@ -0,0 +1,120 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: strokeJoin
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the style of the joints which connect line segments. These joints are
+
+  either mitered (<code>MITER</code>), beveled (<code>BEVEL</code>), or rounded
+  (<code>ROUND</code>). The default
+
+  joint is <code>MITER</code> in 2D mode and <code>ROUND</code> in WebGL
+  mode.</p>
+
+  <p>The argument passed to <code>strokeJoin()</code> must be written in ALL
+  CAPS because
+
+  the constants <code>MITER</code>, <code>BEVEL</code>, and <code>ROUND</code>
+  are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 247
+params:
+  - name: join
+    description: |
+      <p>either MITER, BEVEL, or ROUND</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    noFill();
+
+    strokeWeight(10.0);
+
+    strokeJoin(MITER);
+
+    beginShape();
+
+    vertex(35, 20);
+
+    vertex(65, 50);
+
+    vertex(35, 80);
+
+    endShape();
+
+    describe('A right-facing arrowhead shape with a pointed tip in center of
+    canvas.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    noFill();
+
+    strokeWeight(10.0);
+
+    strokeJoin(BEVEL);
+
+    beginShape();
+
+    vertex(35, 20);
+
+    vertex(65, 50);
+
+    vertex(35, 80);
+
+    endShape();
+
+    describe('A right-facing arrowhead shape with a flat tip in center of
+    canvas.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    noFill();
+
+    strokeWeight(10.0);
+
+    strokeJoin(ROUND);
+
+    beginShape();
+
+    vertex(35, 20);
+
+    vertex(65, 50);
+
+    vertex(35, 80);
+
+    endShape();
+
+    describe('A right-facing arrowhead shape with a rounded tip in center of
+    canvas.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# strokeJoin
diff --git a/src/content/reference/en/p5/strokeWeight.mdx b/src/content/reference/en/p5/strokeWeight.mdx
new file mode 100644
index 0000000000..ea81fd8f0c
--- /dev/null
+++ b/src/content/reference/en/p5/strokeWeight.mdx
@@ -0,0 +1,81 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: strokeWeight
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the width of the stroke used for lines, points, and the border around
+
+  shapes. All widths are set in units of pixels.</p>
+
+  <p>Note that <code>strokeWeight()</code> is affected by any transformation or
+  scaling that
+
+  has been applied previously.</p>
+line: 314
+params:
+  - name: weight
+    description: |
+      <p>the weight of the stroke (in pixels).</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Default.
+
+    line(20, 20, 80, 20);
+
+    // Thicker.
+
+    strokeWeight(4);
+
+    line(20, 40, 80, 40);
+
+    // Beastly.
+
+    strokeWeight(10);
+
+    line(20, 70, 80, 70);
+
+    describe('Three horizontal black lines. The top line is thin, the middle is
+    medium, and the bottom is thick.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Default.
+
+    line(20, 20, 80, 20);
+
+    // Adding scale transformation.
+
+    scale(5);
+
+    // Coordinates adjusted for scaling.
+
+    line(4, 8, 16, 8);
+
+    describe('Two horizontal black lines. The top line is thin and the bottom is
+    five times thicker than the top.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# strokeWeight
diff --git a/src/content/reference/en/p5/subset.mdx b/src/content/reference/en/p5/subset.mdx
new file mode 100644
index 0000000000..7352cc5420
--- /dev/null
+++ b/src/content/reference/en/p5/subset.mdx
@@ -0,0 +1,52 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: subset
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Extracts an array of elements from an existing array. The list parameter
+  defines the array from which the elements will be copied, and the start
+  and count parameters specify which elements to extract. If no count is
+  given, elements will be extracted from the start to the end of the array.
+  When specifying the start, remember that the first array element is 0.
+  This function does not change the source array.</p>
+line: 308
+params:
+  - name: list
+    description: |
+      <p>Array to extract from</p>
+    type: Array
+  - name: start
+    description: |
+      <p>position to begin</p>
+    type: Integer
+  - name: count
+    description: |
+      <p>number of values to extract</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = [1, 2, 3, 4, 5];
+      print(myArray); // [1, 2, 3, 4, 5]
+
+      let sub1 = subset(myArray, 0, 3);
+      let sub2 = subset(myArray, 2, 2);
+      print(sub1); // [1,2,3]
+      print(sub2); // [3,4]
+    }
+    </code></div>
+return:
+  description: Array of extracted elements
+  type: Array
+chainable: false
+---
+
+
+# subset
diff --git a/src/content/reference/en/p5/tan.mdx b/src/content/reference/en/p5/tan.mdx
new file mode 100644
index 0000000000..8d230d557c
--- /dev/null
+++ b/src/content/reference/en/p5/tan.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: tan
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the tangent of an angle. <code>tan()</code> is useful for many
+  geometric
+
+  tasks in creative coding. The values returned range from -Infinity
+
+  to Infinity and repeat periodically as the input angle increases.
+  <code>tan()</code>
+
+  takes into account the current <a href="#/p5/angleMode">angleMode</a>.</p>
+line: 295
+params:
+  - name: angle
+    description: |
+      <p>the angle.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function draw() {
+      let x = frameCount;
+      let y = 5 * tan(x * 0.1) + 50;
+      point(x, y);
+
+      describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
+    }
+    </code>
+    </div>
+return:
+  description: tangent of the angle.
+  type: Number
+chainable: false
+---
+
+
+# tan
diff --git a/src/content/reference/en/p5/textAlign.mdx b/src/content/reference/en/p5/textAlign.mdx
new file mode 100644
index 0000000000..a301bac5ba
--- /dev/null
+++ b/src/content/reference/en/p5/textAlign.mdx
@@ -0,0 +1,122 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textAlign
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the way text is aligned when <a href="#/p5/text">text()</a> is
+  called.</p>
+
+  <p>By default, calling <code>text('hi', 10, 20)</code> places the bottom-left
+  corner of
+
+  the text's bounding box at (10, 20).</p>
+
+  <p>The first parameter, <code>horizAlign</code>, changes the way
+
+  <a href="#/p5/text">text()</a> interprets x-coordinates. By default, the
+
+  x-coordinate sets the left edge of the bounding box. <code>textAlign()</code>
+  accepts
+
+  the following values for <code>horizAlign</code>: <code>LEFT</code>,
+  <code>CENTER</code>, or <code>RIGHT</code>.</p>
+
+  <p>The second parameter, <code>vertAlign</code>, is optional. It changes the
+  way
+
+  <a href="#/p5/text">text()</a> interprets y-coordinates. By default, the
+
+  y-coordinate sets the bottom edge of the bounding box.
+  <code>textAlign()</code>
+
+  accepts the following values for <code>vertAlign</code>: <code>TOP</code>,
+  <code>BOTTOM</code>, <code>CENTER</code>,
+
+  or <code>BASELINE</code>.</p>
+line: 11
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    strokeWeight(0.5);
+
+    line(50, 0, 50, 100);
+
+
+    textSize(16);
+
+    textAlign(RIGHT);
+
+    text('ABCD', 50, 30);
+
+    textAlign(CENTER);
+
+    text('EFGH', 50, 50);
+
+    textAlign(LEFT);
+
+    text('IJKL', 50, 70);
+
+
+    describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL
+    at bottom-right. A vertical line divides the canvas in half.');
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    strokeWeight(0.5);
+
+
+    line(0, 12, width, 12);
+
+    textAlign(CENTER, TOP);
+
+    text('TOP', 50, 12);
+
+
+    line(0, 37, width, 37);
+
+    textAlign(CENTER, CENTER);
+
+    text('CENTER', 50, 37);
+
+
+    line(0, 62, width, 62);
+
+    textAlign(CENTER, BASELINE);
+
+    text('BASELINE', 50, 62);
+
+
+    line(0, 97, width, 97);
+
+    textAlign(CENTER, BOTTOM);
+
+    text('BOTTOM', 50, 97);
+
+
+    describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn
+    relative to a horizontal line. Their positions demonstrate different
+    vertical alignments.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# textAlign
diff --git a/src/content/reference/en/p5/textAscent.mdx b/src/content/reference/en/p5/textAscent.mdx
new file mode 100644
index 0000000000..b5e3ae4026
--- /dev/null
+++ b/src/content/reference/en/p5/textAscent.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textAscent
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Returns the ascent of the current font at its current size. The ascent
+  represents the distance, in pixels, of the tallest character above
+  the baseline.</p>
+line: 258
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload()  {
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup()  {
+      background(200);
+      textFont(font);
+
+      // Different for each font.
+      let fontScale = 0.8;
+
+      let baseY = 75;
+      strokeWeight(0.5);
+
+      // Draw small text.
+      textSize(24);
+      text('dp', 0, baseY);
+      // Draw baseline and ascent.
+      let a = textAscent() * fontScale;
+      line(0, baseY, 23, baseY);
+      line(23, baseY - a, 23, baseY);
+
+      // Draw large text.
+      textSize(48);
+      text('dp', 45, baseY);
+      // Draw baseline and ascent.
+      a = textAscent() * fontScale;
+      line(45, baseY, 91, baseY);
+      line(91, baseY - a, 91, baseY);
+
+      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the "d".');
+    }
+    </code>
+    </div>
+return:
+  description: ascent measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textAscent
diff --git a/src/content/reference/en/p5/textDescent.mdx b/src/content/reference/en/p5/textDescent.mdx
new file mode 100644
index 0000000000..b04f9195e2
--- /dev/null
+++ b/src/content/reference/en/p5/textDescent.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textDescent
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Returns the descent of the current font at its current size. The descent
+  represents the distance, in pixels, of the character with the longest
+  descender below the baseline.</p>
+line: 310
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload()  {
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup()  {
+      background(200);
+      textFont(font);
+
+      // Different for each font.
+      let fontScale = 0.9;
+
+      let baseY = 75;
+      strokeWeight(0.5);
+
+      // Draw small text.
+      textSize(24);
+      text('dp', 0, baseY);
+      // Draw baseline and descent.
+      let d = textDescent() * fontScale;
+      line(0, baseY, 23, baseY);
+      line(23, baseY, 23, baseY + d);
+
+      // Draw large text.
+      textSize(48);
+      text('dp', 45, baseY);
+      // Draw baseline and descent.
+      d = textDescent() * fontScale;
+      line(45, baseY, 91, baseY);
+      line(91, baseY, 91, baseY + d);
+
+      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the "p".');
+    }
+    </code>
+    </div>
+return:
+  description: descent measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textDescent
diff --git a/src/content/reference/en/p5/textFont.mdx b/src/content/reference/en/p5/textFont.mdx
new file mode 100644
index 0000000000..8d1746cbde
--- /dev/null
+++ b/src/content/reference/en/p5/textFont.mdx
@@ -0,0 +1,104 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textFont
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Sets the font used by the <a href="#/p5/text">text()</a> function.</p>
+
+  <p>The first parameter, <code>font</code>, sets the font.
+  <code>textFont()</code> recognizes either
+
+  a <a href="#/p5.Font">p5.Font</a> object or a string with the name of a
+
+  system font. For example, <code>'Courier New'</code>.</p>
+
+  <p>The second parameter, <code>size</code>, is optional. It sets the font size
+  in pixels.
+
+  This has the same effect as calling <a
+  href="#/p5/textSize">textSize()</a>.</p>
+
+  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
+
+  <a href="#/p5/loadFont">loadFont()</a>.</p>
+line: 335
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      textFont('Courier New');
+      textSize(24);
+      text('hi', 35, 55);
+
+      describe('The text "hi" written in a black, monospace font on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('black');
+      fill('palegreen');
+      textFont('Courier New', 10);
+      text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
+      text('>', 5, 70);
+
+      describe('A text prompt from a game is written in a green, monospace font on a black background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      textFont('Verdana');
+      let currentFont = textFont();
+      text(currentFont, 25, 50);
+
+      describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let fontRegular;
+    let fontItalic;
+    let fontBold;
+
+    function preload() {
+      fontRegular = loadFont('assets/Regular.otf');
+      fontItalic = loadFont('assets/Italic.ttf');
+      fontBold = loadFont('assets/Bold.ttf');
+    }
+
+    function setup() {
+      background(200);
+      textFont(fontRegular);
+      text('I am Normal', 10, 30);
+      textFont(fontItalic);
+      text('I am Italic', 10, 50);
+      textFont(fontBold);
+      text('I am Bold', 10, 70);
+
+      describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
+    }
+    </code>
+    </div>
+return:
+  description: current font or p5 Object.
+  type: Object
+chainable: false
+---
+
+
+# textFont
diff --git a/src/content/reference/en/p5/textLeading.mdx b/src/content/reference/en/p5/textLeading.mdx
new file mode 100644
index 0000000000..ef157b586d
--- /dev/null
+++ b/src/content/reference/en/p5/textLeading.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textLeading
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the spacing between lines of text when
+
+  <a href="#/p5/text">text()</a> is called. Spacing is measured in pixels.</p>
+
+  <p>Calling <code>textLeading()</code> without an argument returns the current
+  spacing.</p>
+line: 85
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // "\n" starts a new line of text.
+
+    let lines = 'one\ntwo';
+
+
+    text(lines, 10, 25);
+
+
+    textLeading(30);
+
+    text(lines, 70, 25);
+
+
+    describe('The words "one" and "two" written on separate lines twice. The
+    words on the left have less vertical spacing than the words on the right.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# textLeading
diff --git a/src/content/reference/en/p5/textOutput.mdx b/src/content/reference/en/p5/textOutput.mdx
new file mode 100644
index 0000000000..8377591b69
--- /dev/null
+++ b/src/content/reference/en/p5/textOutput.mdx
@@ -0,0 +1,158 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textOutput
+module: Environment
+submodule: Environment
+file: src/accessibility/outputs.js
+description: >
+  <p>Creates a screen reader-accessible description for shapes on the canvas.
+
+  <code>textOutput()</code> adds a general description, list of shapes, and
+
+  table of shapes to the web page.</p>
+
+  <p>The general description includes the canvas size, canvas color, and number
+
+  of shapes. For example,
+
+  <code>Your output is a, 100 by 100 pixels, gray canvas containing the
+  following 2 shapes:</code>.</p>
+
+  <p>A list of shapes follows the general description. The list describes the
+
+  color, location, and area of each shape. For example,
+
+  <code>a red circle at middle covering 3% of the canvas</code>. Each shape can
+  be
+
+  selected to get more details.</p>
+
+  <p><code>textOutput()</code> uses its table of shapes as a list. The table
+  describes the
+
+  shape, color, location, coordinates and area. For example,
+
+  <code>red circle location = middle area = 3%</code>. This is different from
+
+  <a href="#/p5/gridOutput">gridOutput()</a>, which uses its table as a
+  grid.</p>
+
+  <p>The <code>display</code> parameter is optional. It determines how the
+  description is
+
+  displayed. If <code>LABEL</code> is passed, as in
+  <code>textOutput(LABEL)</code>, the description
+
+  will be visible in a div element next to the canvas. Using <code>LABEL</code>
+  creates
+
+  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
+
+  development. If <code>FALLBACK</code> is passed, as in
+  <code>textOutput(FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a href="/learn/labeling-canvases.html">How to label your p5.js code</a> to
+
+  learn more about making sketches accessible.</p>
+line: 10
+params:
+  - name: display
+    description: |
+      <p>either FALLBACK or LABEL.</p>
+    type: Constant
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Add the text description.
+      textOutput();
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Add the text description and
+      // display it for debugging.
+      textOutput(LABEL);
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      // Add the text description.
+      textOutput();
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      // Add the text description and
+      // display it for debugging.
+      textOutput(LABEL);
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# textOutput
diff --git a/src/content/reference/en/p5/textSize.mdx b/src/content/reference/en/p5/textSize.mdx
new file mode 100644
index 0000000000..af33f6d9ab
--- /dev/null
+++ b/src/content/reference/en/p5/textSize.mdx
@@ -0,0 +1,47 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textSize
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the font size when
+
+  <a href="#/p5/text">text()</a> is called. Font size is measured in pixels.</p>
+
+  <p>Calling <code>textSize()</code> without an arugment returns the current
+  size.</p>
+line: 119
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    textSize(12);
+
+    text('Font Size 12', 10, 30);
+
+    textSize(14);
+
+    text('Font Size 14', 10, 60);
+
+    textSize(16);
+
+    text('Font Size 16', 10, 90);
+
+
+    describe('The text "Font Size 12" drawn small, "Font Size 14" drawn medium,
+    and "Font Size 16" drawn large.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# textSize
diff --git a/src/content/reference/en/p5/textStyle.mdx b/src/content/reference/en/p5/textStyle.mdx
new file mode 100644
index 0000000000..251f60ad7c
--- /dev/null
+++ b/src/content/reference/en/p5/textStyle.mdx
@@ -0,0 +1,61 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textStyle
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the style for system fonts when
+
+  <a href="#/p5/text">text()</a> is called. <code>textStyle()</code> accepts the
+
+  following values: <code>NORMAL</code>, <code>ITALIC</code>, <code>BOLD</code>
+  or <code>BOLDITALIC</code>.</p>
+
+  <p><code>textStyle()</code> may be overridden by CSS styling. This function
+  doesn't
+
+  affect fonts loaded with <a href="#/p5/loadFont">loadFont()</a>.</p>
+line: 152
+itemtype: method
+class: p5
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    textSize(12);
+
+    textAlign(CENTER);
+
+
+    textStyle(NORMAL);
+
+    text('Normal', 50, 15);
+
+    textStyle(ITALIC);
+
+    text('Italic', 50, 40);
+
+    textStyle(BOLD);
+
+    text('Bold', 50, 65);
+
+    textStyle(BOLDITALIC);
+
+    text('Bold Italic', 50, 90);
+
+
+    describe('The words "Normal" displayed normally, "Italic" in italic, "Bold"
+    in bold, and "Bold Italic" in bold italics.');
+
+    </code>
+
+    </div>
+chainable: true
+---
+
+
+# textStyle
diff --git a/src/content/reference/en/p5/textWidth.mdx b/src/content/reference/en/p5/textWidth.mdx
new file mode 100644
index 0000000000..82db1b5f23
--- /dev/null
+++ b/src/content/reference/en/p5/textWidth.mdx
@@ -0,0 +1,62 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textWidth
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Returns the maximum width of a string of text drawn when
+  <a href="#/p5/text">text()</a> is called.</p>
+line: 192
+params:
+  - name: str
+    description: |
+      <p>string of text to measure.</p>
+    type: String
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      textSize(28);
+      strokeWeight(0.5);
+      let s = 'yoyo';
+      let w = textWidth(s);
+      text(s, 22, 55);
+      line(22, 55, 22 + w, 55);
+
+      describe('The word "yoyo" underlined.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      textSize(28);
+      strokeWeight(0.5);
+      // "\n" starts a new line.
+      let s = 'yo\nyo';
+      let w = textWidth(s);
+      text(s, 22, 55);
+      line(22, 55, 22 + w, 55);
+
+      describe('The word "yo" written twice, one copy beneath the other. The words are divided by a horizontal line.');
+    }
+    </code>
+    </div>
+return:
+  description: width measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textWidth
diff --git a/src/content/reference/en/p5/textWrap.mdx b/src/content/reference/en/p5/textWrap.mdx
new file mode 100644
index 0000000000..d00d0f7498
--- /dev/null
+++ b/src/content/reference/en/p5/textWrap.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textWrap
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the style for wrapping text when
+
+  <a href="#/p5/text">text()</a> is called. <code>textWrap()</code> accepts the
+
+  following values:</p>
+
+  <p><code>WORD</code> starts new lines of text at spaces. If a string of text
+  doesn't
+
+  have spaces, it may overflow the text box and the canvas. This is the
+
+  default style.</p>
+
+  <p><code>CHAR</code> starts new lines as needed to stay within the text
+  box.</p>
+
+  <p><code>textWrap()</code> only works when the maximum width is set for a text
+  box. For
+
+  example, calling <code>text('Have a wonderful day', 0, 10, 100)</code> sets
+  the
+
+  maximum width to 100 pixels.</p>
+
+  <p>Calling <code>textWrap()</code> without an argument returns the current
+  style.</p>
+line: 369
+params:
+  - name: style
+    description: |
+      <p>text wrapping style, either WORD or CHAR.</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    textSize(20);
+    textWrap(WORD);
+    text('Have a wonderful day', 0, 10, 100);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    textSize(20);
+    textWrap(CHAR);
+    text('Have a wonderful day', 0, 10, 100);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    textSize(20);
+    textWrap(CHAR);
+    text('祝你有美好的一天', 0, 10, 100);
+    </code>
+    </div>
+return:
+  description: style
+  type: String
+chainable: false
+---
+
+
+# textWrap
diff --git a/src/content/reference/en/p5/textureMode.mdx b/src/content/reference/en/p5/textureMode.mdx
new file mode 100644
index 0000000000..f4d9d5c772
--- /dev/null
+++ b/src/content/reference/en/p5/textureMode.mdx
@@ -0,0 +1,88 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textureMode
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the coordinate space for texture mapping. The default mode is IMAGE
+
+  which refers to the actual coordinates of the image.
+
+  NORMAL refers to a normalized space of values ranging from 0 to 1.</p>
+
+  <p>With IMAGE, if an image is 100×200 pixels, mapping the image onto the
+  entire
+
+  size of a quad would require the points (0,0) (100, 0) (100,200) (0,200).
+
+  The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1).</p>
+line: 674
+params:
+  - name: mode
+    description: |
+      <p>either IMAGE or NORMAL</p>
+    type: Constant
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('quad with a texture, mapped using normalized coordinates');
+    }
+
+    function draw() {
+      texture(img);
+      textureMode(NORMAL);
+      beginShape();
+      vertex(-50, -50, 0, 0);
+      vertex(50, -50, 1, 0);
+      vertex(50, 50, 1, 1);
+      vertex(-50, 50, 0, 1);
+      endShape();
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('quad with a texture, mapped using image coordinates');
+    }
+
+    function draw() {
+      texture(img);
+      textureMode(IMAGE);
+      beginShape();
+      vertex(-50, -50, 0, 0);
+      vertex(50, -50, img.width, 0);
+      vertex(50, 50, img.width, img.height);
+      vertex(-50, 50, 0, img.height);
+      endShape();
+    }
+    </code>
+    </div>
+alt: 'quad with a texture, mapped using image coordinates'
+chainable: false
+---
+
+
+# textureMode
diff --git a/src/content/reference/en/p5/textureWrap.mdx b/src/content/reference/en/p5/textureWrap.mdx
new file mode 100644
index 0000000000..7b9e33d988
--- /dev/null
+++ b/src/content/reference/en/p5/textureWrap.mdx
@@ -0,0 +1,91 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: textureWrap
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the global texture wrapping mode. This controls how textures behave
+
+  when their uv's go outside of the 0 to 1 range. There are three options:
+
+  CLAMP, REPEAT, and MIRROR.</p>
+
+  <p>CLAMP causes the pixels at the edge of the texture to extend to the bounds.
+
+  REPEAT causes the texture to tile repeatedly until reaching the bounds.
+
+  MIRROR works similarly to REPEAT but it flips the texture with every new
+  tile.</p>
+
+  <p>REPEAT & MIRROR are only available if the texture
+
+  is a power of two size (128, 256, 512, 1024, etc.).</p>
+
+  <p>This method will affect all textures in your sketch until a subsequent
+
+  textureWrap() call is made.</p>
+
+  <p>If only one argument is provided, it will be applied to both the
+
+  horizontal and vertical axes.</p>
+line: 752
+params:
+  - name: wrapX
+    description: |
+      <p>either CLAMP, REPEAT, or MIRROR</p>
+    type: Constant
+  - name: wrapY
+    description: |
+      <p>either CLAMP, REPEAT, or MIRROR</p>
+    type: Constant
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+    function preload() {
+      img = loadImage('assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      textureWrap(MIRROR);
+      describe('an image of the rocky mountains repeated in mirrored tiles');
+    }
+
+    function draw() {
+      background(0);
+
+      let dX = mouseX;
+      let dY = mouseY;
+
+      let u = lerp(1.0, 2.0, dX);
+      let v = lerp(1.0, 2.0, dY);
+
+      scale(width / 2);
+
+      texture(img);
+
+      beginShape(TRIANGLES);
+      vertex(-1, -1, 0, 0, 0);
+      vertex(1, -1, 0, u, 0);
+      vertex(1, 1, 0, u, v);
+
+      vertex(1, 1, 0, u, v);
+      vertex(-1, 1, 0, 0, v);
+      vertex(-1, -1, 0, 0, 0);
+      endShape();
+    }
+    </code>
+    </div>
+alt: an image of the rocky mountains repeated in mirrored tiles
+chainable: false
+---
+
+
+# textureWrap
diff --git a/src/content/reference/en/p5/tint.mdx b/src/content/reference/en/p5/tint.mdx
new file mode 100644
index 0000000000..00e8dad0e2
--- /dev/null
+++ b/src/content/reference/en/p5/tint.mdx
@@ -0,0 +1,121 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: tint
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Tints images using a specified color.</p>
+
+  <p>The version of <code>tint()</code> with one parameter interprets it one of
+  four ways.
+
+  If the parameter is a number, it's interpreted as a grayscale value. If the
+
+  parameter is a string, it's interpreted as a CSS color string. An array of
+
+  <code>[R, G, B, A]</code> values or a <a href="#/p5.Color">p5.Color</a> object
+  can
+
+  also be used to set the tint color.</p>
+
+  <p>The version of <code>tint()</code> with two parameters uses the first one
+  as a
+
+  grayscale value and the second as an alpha value. For example, calling
+
+  <code>tint(255, 128)</code> will make an image 50% transparent.</p>
+
+  <p>The version of <code>tint()</code> with three parameters interprets them as
+  RGB or
+
+  HSB values, depending on the current
+
+  <a href="#/p5/colorMode">colorMode()</a>. The optional fourth parameter
+
+  sets the alpha value. For example, <code>tint(255, 0, 0, 100)</code> will give
+  images
+
+  a red tint and make them transparent.</p>
+line: 1098
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      tint('red');
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      tint(255, 0, 0);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      tint(255, 0, 0, 100);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/laDefense.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0);
+      tint(255, 180);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# tint
diff --git a/src/content/reference/en/p5/torus.mdx b/src/content/reference/en/p5/torus.mdx
new file mode 100644
index 0000000000..a088af4e44
--- /dev/null
+++ b/src/content/reference/en/p5/torus.mdx
@@ -0,0 +1,126 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: torus
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draw a torus with given radius and tube radius</p>
+
+  <p>DetailX and detailY determine the number of subdivisions in the x-dimension
+  and
+
+  the y-dimension of a torus. More subdivisions make the torus appear to be
+  smoother.
+
+  The default and maximum values for detailX and detailY are 24 and 16,
+  respectively.
+
+  Setting them to relatively small values like 4 and 6 allows you to create new
+
+  shapes other than a torus.</p>
+line: 1006
+params:
+  - name: radius
+    description: |
+      <p>radius of the whole ring</p>
+    type: Number
+    optional: true
+  - name: tubeRadius
+    description: |
+      <p>radius of the tube</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of segments in x-dimension,
+                                     the more segments the smoother geometry
+                                     default is 24</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of segments in y-dimension,
+                                     the more segments the smoother geometry
+                                     default is 16</p>
+    type: Integer
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // draw a spinning torus
+    // with ring radius 30 and tube radius 15
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      describe('a rotating white torus');
+    }
+
+    function draw() {
+      background(205, 102, 94);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      torus(30, 15);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailX works
+    let detailX;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      detailX = createSlider(3, 24, 3);
+      detailX.position(10, height + 5);
+      detailX.style('width', '80px');
+      describe(
+        'a rotating white torus with limited X detail, with a slider that adjusts detailX'
+      );
+    }
+
+    function draw() {
+      background(205, 102, 94);
+      rotateY(millis() / 1000);
+      torus(30, 15, detailX.value(), 12);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    // slide to see how detailY works
+    let detailY;
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+      perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+      detailY = createSlider(3, 16, 3);
+      detailY.position(10, height + 5);
+      detailY.style('width', '80px');
+      describe(
+        'a rotating white torus with limited Y detail, with a slider that adjusts detailY'
+      );
+    }
+
+    function draw() {
+      background(205, 102, 94);
+      rotateY(millis() / 1000);
+      torus(30, 15, 16, detailY.value());
+    }
+    </code>
+    </div>
+chainable: true
+---
+
+
+# torus
diff --git a/src/content/reference/en/p5/touchEnded.mdx b/src/content/reference/en/p5/touchEnded.mdx
new file mode 100644
index 0000000000..42c9f9feca
--- /dev/null
+++ b/src/content/reference/en/p5/touchEnded.mdx
@@ -0,0 +1,79 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: touchEnded
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>The <a href="#/p5/touchEnded">touchEnded()</a> function is called every
+  time a touch ends. If no
+
+  <a href="#/p5/touchEnded">touchEnded()</a> function is defined, the <a
+  href="#/p5/mouseReleased">mouseReleased()</a> function will be
+
+  called instead if it is defined.<br><br>
+
+  Browsers may have different default behaviors attached to various touch
+
+  events. To prevent any default behavior for this event, add "return false"
+
+  to the end of the method.</p>
+line: 212
+params:
+  - name: event
+    description: |
+      <p>optional TouchEvent callback argument.</p>
+    type: TouchEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Release touch within the image to
+    // change the value of the rectangle
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe('50-by-50 black rect turns white with touch.');
+    }
+    function touchEnded() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function touchEnded() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    describe('no image displayed');
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a TouchEvent object
+    // as a callback argument
+    function touchEnded(event) {
+      console.log(event);
+    }
+    describe('no image displayed');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# touchEnded
diff --git a/src/content/reference/en/p5/touchMoved.mdx b/src/content/reference/en/p5/touchMoved.mdx
new file mode 100644
index 0000000000..846658a9b9
--- /dev/null
+++ b/src/content/reference/en/p5/touchMoved.mdx
@@ -0,0 +1,78 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: touchMoved
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>The <a href="#/p5/touchMoved">touchMoved()</a> function is called every
+  time a touch move is registered.
+
+  If no <a href="#/p5/touchMoved">touchMoved()</a> function is defined, the <a
+  href="#/p5/mouseDragged">mouseDragged()</a> function will
+
+  be called instead if it is defined.<br><br>
+
+  Browsers may have different default behaviors attached to various touch
+
+  events. To prevent any default behavior for this event, add "return false"
+
+  to the end of the method.</p>
+line: 141
+params:
+  - name: event
+    description: |
+      <p>optional TouchEvent callback argument.</p>
+    type: TouchEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move your finger across the page
+    // to change its value
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe('50-by-50 black rect turns lighter with touch until white. resets');
+    }
+    function touchMoved() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function touchMoved() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    describe('no image displayed');
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a TouchEvent object
+    // as a callback argument
+    function touchMoved(event) {
+      console.log(event);
+    }
+    describe('no image displayed');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# touchMoved
diff --git a/src/content/reference/en/p5/touchStarted.mdx b/src/content/reference/en/p5/touchStarted.mdx
new file mode 100644
index 0000000000..b5c4569e20
--- /dev/null
+++ b/src/content/reference/en/p5/touchStarted.mdx
@@ -0,0 +1,78 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: touchStarted
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>The touchStarted() function is called once after every time a touch is
+
+  registered. If no <a href="#/p5/touchStarted">touchStarted()</a> function is
+  defined, the <a href="#/p5/mousePressed">mousePressed()</a>
+
+  function will be called instead if it is defined.<br><br>
+
+  Browsers may have different default behaviors attached to various touch
+
+  events. To prevent any default behavior for this event, add "return false"
+
+  to the end of the method.</p>
+line: 70
+params:
+  - name: event
+    description: |
+      <p>optional TouchEvent callback argument.</p>
+    type: TouchEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Touch within the image to change
+    // the value of the rectangle
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe('50-by-50 black rect turns white with touch event.');
+    }
+    function touchStarted() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function touchStarted() {
+      ellipse(mouseX, mouseY, 5, 5);
+      // prevent default
+      return false;
+    }
+    describe('no image displayed');
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    // returns a TouchEvent object
+    // as a callback argument
+    function touchStarted(event) {
+      console.log(event);
+    }
+    describe('no image displayed');
+    </code>
+    </div>
+chainable: false
+---
+
+
+# touchStarted
diff --git a/src/content/reference/en/p5/touches.mdx b/src/content/reference/en/p5/touches.mdx
new file mode 100644
index 0000000000..bae8dde92e
--- /dev/null
+++ b/src/content/reference/en/p5/touches.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: touches
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: |
+  <p>The system variable touches[] contains an array of the positions of all
+  current touch points, relative to (0, 0) of the canvas, and IDs identifying a
+  unique touch as it moves. Each element in the array is an object with x, y,
+  and id properties.</p>
+  <p>The touches[] array is not supported on Safari and IE on touch-based
+  desktops (laptops).</p>
+line: 10
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch
+    // the canvas using one or more fingers
+    // at the same time
+    function draw() {
+      clear();
+      let display = touches.length + ' touches';
+      text(display, 5, 10);
+      describe(`Number of touches currently registered are displayed
+        on the canvas`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# touches
diff --git a/src/content/reference/en/p5/translate.mdx b/src/content/reference/en/p5/translate.mdx
new file mode 100644
index 0000000000..0b0ac9c4d4
--- /dev/null
+++ b/src/content/reference/en/p5/translate.mdx
@@ -0,0 +1,70 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: translate
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Specifies an amount to displace objects within the display window.
+
+  The x parameter specifies left/right translation, the y parameter
+
+  specifies up/down translation.</p>
+
+  <p>Transformations are cumulative and apply to everything that happens after
+
+  and subsequent calls to the function accumulates the effect. For example,
+
+  calling translate(50, 0) and then translate(20, 0) is the same as
+
+  translate(70, 0). If <a href="#/p5/translate">translate()</a> is called within
+  <a href="#/p5/draw">draw()</a>, the
+
+  transformation is reset when the loop begins again. This function can be
+
+  further controlled by using <a href="#/p5/push">push()</a> and <a
+  href="#/p5/pop">pop()</a>.</p>
+line: 529
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    translate(30, 20);
+    rect(0, 0, 55, 55);
+    </code>
+    </div>
+
+    <div>
+    <code>
+    rect(0, 0, 55, 55); // Draw rect at original 0,0
+    translate(30, 20);
+    rect(0, 0, 55, 55); // Draw rect at new 0,0
+    translate(14, 14);
+    rect(0, 0, 55, 55); // Draw rect at new 0,0
+    </code>
+    </div>
+
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+      rectMode(CENTER);
+      translate(width / 2, height / 2);
+      translate(p5.Vector.fromAngle(millis() / 1000, 40));
+      rect(0, 0, 20, 20);
+    }
+    </code>
+    </div>
+alt: |-
+  white 55×55 rect with black outline at center right.
+  3 white 55×55 rects with black outlines at top-l, center-r and bottom-r.
+  a 20×20 white rect moving in a circle around the canvas
+chainable: true
+---
+
+
+# translate
diff --git a/src/content/reference/en/p5/triangle.mdx b/src/content/reference/en/p5/triangle.mdx
new file mode 100644
index 0000000000..1a601a1df7
--- /dev/null
+++ b/src/content/reference/en/p5/triangle.mdx
@@ -0,0 +1,58 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: triangle
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a triangle to the canvas. A triangle is a three-sided polygon. The
+
+  first two parameters specify the triangle's first point <code>(x1,y1)</code>.
+  The middle
+
+  two parameters specify its second point <code>(x2,y2)</code>. And the last two
+  parameters
+
+  specify its third point <code>(x3, y3)</code>.</p>
+line: 759
+params:
+  - name: x1
+    description: |
+      <p>x-coordinate of the first point.</p>
+    type: Number
+  - name: y1
+    description: |
+      <p>y-coordinate of the first point.</p>
+    type: Number
+  - name: x2
+    description: |
+      <p>x-coordinate of the second point.</p>
+    type: Number
+  - name: y2
+    description: |
+      <p>y-coordinate of the second point.</p>
+    type: Number
+  - name: x3
+    description: |
+      <p>x-coordinate of the third point.</p>
+    type: Number
+  - name: y3
+    description: |
+      <p>y-coordinate of the third point.</p>
+    type: Number
+itemtype: method
+class: p5
+example:
+  - |
+
+    <div>
+    <code>
+    triangle(30, 75, 58, 20, 86, 75);
+    describe('A white triangle with a black outline on a gray canvas.');
+    </code>
+    </div>
+chainable: true
+---
+
+
+# triangle
diff --git a/src/content/reference/en/p5/trim.mdx b/src/content/reference/en/p5/trim.mdx
new file mode 100644
index 0000000000..b2e55c7f3a
--- /dev/null
+++ b/src/content/reference/en/p5/trim.mdx
@@ -0,0 +1,31 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: trim
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: |
+  <p>Removes whitespace characters from the beginning and end of a String. In
+  addition to standard whitespace characters such as space, carriage return,
+  and tab, this function also removes the Unicode "nbsp" character.</p>
+line: 511
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let string = trim('  No new lines\n   ');
+    text(string + ' here', 2, 50);
+    describe('“No new lines here” displayed center canvas');
+    </code>
+    </div>
+return:
+  description: a trimmed String
+  type: String
+chainable: false
+---
+
+
+# trim
diff --git a/src/content/reference/en/p5/turnAxis.mdx b/src/content/reference/en/p5/turnAxis.mdx
new file mode 100644
index 0000000000..cb57d2ac0b
--- /dev/null
+++ b/src/content/reference/en/p5/turnAxis.mdx
@@ -0,0 +1,51 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: turnAxis
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>When a device is rotated, the axis that triggers the <a
+  href="#/p5/deviceTurned">deviceTurned()</a>
+
+  method is stored in the turnAxis variable. The turnAxis variable is only
+  defined within
+
+  the scope of deviceTurned().</p>
+line: 378
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees in the
+    // X-axis to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device turns`);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when x-axis turns`);
+    }
+    function deviceTurned() {
+      if (turnAxis === 'X') {
+        if (value === 0) {
+          value = 255;
+        } else if (value === 255) {
+          value = 0;
+        }
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# turnAxis
diff --git a/src/content/reference/en/p5/unchar.mdx b/src/content/reference/en/p5/unchar.mdx
new file mode 100644
index 0000000000..23e01dabf4
--- /dev/null
+++ b/src/content/reference/en/p5/unchar.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: unchar
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a single-character string to its corresponding integer
+  representation. When an array of single-character string values is passed
+  in, then an array of integers of the same length is returned.</p>
+line: 214
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(unchar('A')); // 65
+    print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
+    print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
+    </code></div>
+return:
+  description: integer representation of value
+  type: Number
+chainable: false
+---
+
+
+# unchar
diff --git a/src/content/reference/en/p5/unhex.mdx b/src/content/reference/en/p5/unhex.mdx
new file mode 100644
index 0000000000..87ea025c51
--- /dev/null
+++ b/src/content/reference/en/p5/unhex.mdx
@@ -0,0 +1,29 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: unhex
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: |
+  <p>Converts a string representation of a hexadecimal number to its equivalent
+  integer value. When an array of strings in hexadecimal notation is passed
+  in, an array of integers of the same length is returned.</p>
+line: 293
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class='norender'><code>
+    print(unhex('A')); // 10
+    print(unhex('FF')); // 255
+    print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
+    </code></div>
+return:
+  description: integer representation of hexadecimal value
+  type: Number
+chainable: false
+---
+
+
+# unhex
diff --git a/src/content/reference/en/p5/updatePixels.mdx b/src/content/reference/en/p5/updatePixels.mdx
new file mode 100644
index 0000000000..e55d4559a5
--- /dev/null
+++ b/src/content/reference/en/p5/updatePixels.mdx
@@ -0,0 +1,75 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: updatePixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Updates the canvas with the RGBA values in the
+
+  <a href="#/p5/pixels">pixels</a> array.</p>
+
+  <p><code>updatePixels()</code> only needs to be called after changing values
+  in the
+
+  <a href="#/p5/pixels">pixels</a> array. Such changes can be made directly
+
+  after calling <a href="#/p5/loadPixels">loadPixels()</a> or by calling
+
+  <a href="#/p5/set">set()</a>.</p>
+line: 884
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the upper-left corner of region
+                              to update.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the upper-left corner of region
+                              to update.</p>
+    type: Number
+    optional: true
+  - name: w
+    description: |
+      <p>width of region to update.</p>
+    type: Number
+    optional: true
+  - name: h
+    description: |
+      <p>height of region to update.</p>
+    type: Number
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('assets/rockies.jpg');
+    }
+
+    function setup() {
+      image(img, 0, 0, width, height);
+      let d = pixelDensity();
+      let halfImage = 4 * (d * width) * (d * height / 2);
+      loadPixels();
+      for (let i = 0; i < halfImage; i += 1) {
+        pixels[i + halfImage] = pixels[i];
+      }
+      updatePixels();
+
+      describe('Two identical images of mountain landscapes, one on top of the other.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# updatePixels
diff --git a/src/content/reference/en/p5/userStartAudio.mdx b/src/content/reference/en/p5/userStartAudio.mdx
new file mode 100644
index 0000000000..27cd9c2eff
--- /dev/null
+++ b/src/content/reference/en/p5/userStartAudio.mdx
@@ -0,0 +1,78 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: userStartAudio
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>It is not only a good practice to give users control over starting
+  audio. This policy is enforced by many web browsers, including iOS and
+  <a href="https://goo.gl/7K7WLu" title="Google Chrome's autoplay
+  policy">Google Chrome</a>, which create the Web Audio API's
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext"
+  title="Audio Context @ MDN">Audio Context</a>
+  in a suspended state.</p>
+
+  <p>In these browser-specific policies, sound will not play until a user
+  interaction event (i.e. <code>mousePressed()</code>) explicitly resumes
+  the AudioContext, or starts an audio node. This can be accomplished by
+  calling <code>start()</code> on a <code>p5.Oscillator</code>,
+  <code> play()</code> on a <code>p5.SoundFile</code>, or simply
+  <code>userStartAudio()</code>.</p>
+
+  <p><code>userStartAudio()</code> starts the AudioContext on a user
+  gesture. The default behavior will enable audio on any
+  mouseUp or touchEnd event. It can also be placed in a specific
+  interaction function, such as <code>mousePressed()</code> as in the
+  example below. This method utilizes
+  <a href="https://github.com/tambien/StartAudioContext">StartAudioContext
+  </a>, a library by Yotam Mann (MIT Licence, 2016).</p>
+line: 198
+params:
+  - name: elements
+    description: |
+      <p>This argument can be an Element,
+                                    Selector String, NodeList, p5.Element,
+                                    jQuery Element, or an Array of any of those.</p>
+    type: Element|Array
+    optional: true
+  - name: callback
+    description: |
+      <p>Callback to invoke when the AudioContext
+                                    has started</p>
+    type: Function
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div><code>
+    function setup() {
+      // mimics the autoplay policy
+      getAudioContext().suspend();
+
+      let mySynth = new p5.MonoSynth();
+
+      // This won't play until the context has resumed
+      mySynth.play('A6');
+    }
+    function draw() {
+      background(220);
+      textAlign(CENTER, CENTER);
+      text(getAudioContext().state, width/2, height/2);
+    }
+    function mousePressed() {
+      userStartAudio();
+    }
+    </code></div>
+return:
+  description: |-
+    Returns a Promise that resolves when
+                                         the AudioContext state is 'running'
+  type: Promise
+chainable: false
+---
+
+
+# userStartAudio
diff --git a/src/content/reference/en/p5/vertex.mdx b/src/content/reference/en/p5/vertex.mdx
new file mode 100644
index 0000000000..da1e9af794
--- /dev/null
+++ b/src/content/reference/en/p5/vertex.mdx
@@ -0,0 +1,146 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: vertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>All shapes are constructed by connecting a series of vertices. <a
+  href="#/p5/vertex">vertex()</a>
+
+  is used to specify the vertex coordinates for points, lines, triangles,
+
+  quads, and polygons. It is used exclusively within the <a
+  href="#/p5/beginShape">beginShape()</a> and
+
+  <a href="#/p5/endShape">endShape()</a> functions.</p>
+line: 930
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    strokeWeight(3);
+    beginShape(POINTS);
+    vertex(30, 20);
+    vertex(85, 20);
+    vertex(85, 75);
+    vertex(30, 75);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    createCanvas(100, 100, WEBGL);
+    background(240, 240, 240);
+    fill(237, 34, 93);
+    noStroke();
+    beginShape();
+    vertex(0, 35);
+    vertex(35, 0);
+    vertex(0, -35);
+    vertex(-35, 0);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    createCanvas(100, 100, WEBGL);
+    background(240, 240, 240);
+    fill(237, 34, 93);
+    noStroke();
+    beginShape();
+    vertex(-10, 10);
+    vertex(0, 35);
+    vertex(10, 10);
+    vertex(35, 0);
+    vertex(10, -8);
+    vertex(0, -35);
+    vertex(-10, -8);
+    vertex(-35, 0);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    strokeWeight(3);
+    stroke(237, 34, 93);
+    beginShape(LINES);
+    vertex(10, 35);
+    vertex(90, 35);
+    vertex(10, 65);
+    vertex(90, 65);
+    vertex(35, 10);
+    vertex(35, 90);
+    vertex(65, 10);
+    vertex(65, 90);
+    endShape();
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click to change the number of sides.
+    // In WebGL mode, custom shapes will only
+    // display hollow fill sections when
+    // all calls to vertex() use the same z-value.
+
+    let sides = 3;
+    let angle, px, py;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      setAttributes('antialias', true);
+      fill(237, 34, 93);
+      strokeWeight(3);
+    }
+
+    function draw() {
+      background(200);
+      rotateX(frameCount * 0.01);
+      rotateZ(frameCount * 0.01);
+      ngon(sides, 0, 0, 80);
+    }
+
+    function mouseClicked() {
+      if (sides > 6) {
+        sides = 3;
+      } else {
+        sides++;
+      }
+    }
+
+    function ngon(n, x, y, d) {
+      beginShape(TESS);
+      for (let i = 0; i < n + 1; i++) {
+        angle = TWO_PI / n * i;
+        px = x + sin(angle) * d / 2;
+        py = y - cos(angle) * d / 2;
+        vertex(px, py, 0);
+      }
+      for (let i = 0; i < n + 1; i++) {
+        angle = TWO_PI / n * i;
+        px = x + sin(angle) * d / 4;
+        py = y - cos(angle) * d / 4;
+        vertex(px, py, 0);
+      }
+      endShape();
+    }
+    </code>
+    </div>
+alt: |-
+  4 black points in a square shape in middle-right of canvas.
+  4 points making a diamond shape.
+  8 points making a star.
+  8 points making 4 lines.
+  A rotating 3D shape with a hollow section in the middle.
+chainable: true
+---
+
+
+# vertex
diff --git a/src/content/reference/en/p5/webglVersion.mdx b/src/content/reference/en/p5/webglVersion.mdx
new file mode 100644
index 0000000000..c810d936be
--- /dev/null
+++ b/src/content/reference/en/p5/webglVersion.mdx
@@ -0,0 +1,100 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: webglVersion
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A string variable with the WebGL version in use. Its value equals one of
+
+  the followin string constants:</p>
+
+  <ul>
+
+  <li><code>WEBGL2</code> whose value is <code>'webgl2'</code>,</li>
+
+  <li><code>WEBGL</code> whose value is <code>'webgl'</code>, or</li>
+
+  <li><code>P2D</code> whose value is <code>'p2d'</code>. This is the default
+  for 2D sketches.</li>
+
+  </ul>
+
+  <p>See <a href="#/p5/setAttributes">setAttributes()</a> for ways to set the
+
+  WebGL version.</p>
+line: 466
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the current WebGL version.
+      text(webglVersion, 42, 54);
+
+      describe('The text "p2d" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Load a font to use.
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      // Create a canvas using WEBGL mode.
+      createCanvas(100, 50, WEBGL);
+      background(200);
+
+      // Display the current WebGL version.
+      fill(0);
+      textFont(font);
+      text(webglVersion, -15, 5);
+
+      describe('The text "webgl2" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Load a font to use.
+      font = loadFont('assets/inconsolata.otf');
+    }
+
+    function setup() {
+      // Create a canvas using WEBGL mode.
+      createCanvas(100, 50, WEBGL);
+
+      // Set WebGL to version 1.
+      setAttributes({ version: 1 });
+
+      background(200);
+
+      // Display the current WebGL version.
+      fill(0);
+      textFont(font);
+      text(webglVersion, -14, 5);
+
+      describe('The text "webgl" written in black on a gray background.');
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# webglVersion
diff --git a/src/content/reference/en/p5/while.mdx b/src/content/reference/en/p5/while.mdx
new file mode 100644
index 0000000000..57a3a3e021
--- /dev/null
+++ b/src/content/reference/en/p5/while.mdx
@@ -0,0 +1,66 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: while
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p><a href="#/p5/while">while</a> creates a loop that is useful for executing
+
+  one section of code multiple times.</p>
+
+  <p>With a 'while loop', the code inside of the loop body (between the curly
+
+  braces) is run repeatedly until the test condition (inside of the parenthesis)
+
+  evaluates to false. The condition is tested before executing the code body
+
+  with <a href="#/p5/while">while</a>, so if the condition is initially false
+
+  the loop body, or statement, will never execute.</p>
+
+  <p>As with any loop, it is important to ensure that the loop can 'exit', or
+  that
+
+  the test condition will eventually evaluate to false. This is to keep your
+  loop
+
+  from trying to run an infinite amount of times, which can crash your
+  browser.</p>
+
+  <p>From <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while">the
+  MDN entry</a>:
+
+  The while statement creates a loop that executes a specified statement as long
+
+  as the test condition evaluates to true.The condition is evaluated before
+
+  executing the statement.</p>
+line: 448
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // This example logs the lines below to the console
+    // 4
+    // 3
+    // 2
+    // 1
+    // 0
+    let num = 5;
+    while (num > 0) {
+      num = num - 1;
+      console.log(num);
+    }
+    </code>
+    </div>
+alt: This example does not render anything
+chainable: false
+---
+
+
+# while
diff --git a/src/content/reference/en/p5/width.mdx b/src/content/reference/en/p5/width.mdx
new file mode 100644
index 0000000000..0cc619f96c
--- /dev/null
+++ b/src/content/reference/en/p5/width.mdx
@@ -0,0 +1,83 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: width
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A numeric variable that stores the width of the drawing canvas. Its
+
+  default value is 100.</p>
+
+  <p>Calling <a href="#/p5/createCanvas">createCanvas()</a> or
+
+  <a href="#/p5/resizeCanvas">resizeCanvas()</a> changes the value of
+
+  <code>width</code>. Calling <a href="#/p5/noCanvas">noCanvas()</a> sets its
+  value to
+
+  0.</p>
+line: 750
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 42, 54);
+
+      describe('The number 100 written in black on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(50, 100);
+
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 21, 54);
+
+      describe('The number 50 written in black on a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 42, 54);
+
+      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+    }
+
+    // If the mouse is pressed, reisze
+    // the canvas and display its new
+    // width.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        resizeCanvas(50, 100);
+        background(200);
+        text(width, 21, 54);
+      }
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# width
diff --git a/src/content/reference/en/p5/winMouseX.mdx b/src/content/reference/en/p5/winMouseX.mdx
new file mode 100644
index 0000000000..f61a4e9cbf
--- /dev/null
+++ b/src/content/reference/en/p5/winMouseX.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: winMouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>The system variable winMouseX always contains the current horizontal
+  position of the mouse, relative to (0, 0) of the window.</p>
+line: 189
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let myCanvas;
+
+    function setup() {
+      //use a variable to store a pointer to the canvas
+      myCanvas = createCanvas(100, 100);
+      let body = document.getElementsByTagName('body')[0];
+      myCanvas.parent(body);
+    }
+
+    function draw() {
+      background(237, 34, 93);
+      fill(0);
+
+      //move the canvas to the horizontal mouse position
+      //relative to the window
+      myCanvas.position(winMouseX + 1, windowHeight / 2);
+
+      //the y of the square is relative to the canvas
+      rect(20, mouseY, 60, 60);
+      describe(`60-by-60 black rect y moves with mouse y and fuchsia
+        canvas moves with mouse x`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# winMouseX
diff --git a/src/content/reference/en/p5/winMouseY.mdx b/src/content/reference/en/p5/winMouseY.mdx
new file mode 100644
index 0000000000..c8f321719b
--- /dev/null
+++ b/src/content/reference/en/p5/winMouseY.mdx
@@ -0,0 +1,46 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: winMouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: |
+  <p>The system variable winMouseY always contains the current vertical
+  position of the mouse, relative to (0, 0) of the window.</p>
+line: 226
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let myCanvas;
+
+    function setup() {
+      //use a variable to store a pointer to the canvas
+      myCanvas = createCanvas(100, 100);
+      let body = document.getElementsByTagName('body')[0];
+      myCanvas.parent(body);
+    }
+
+    function draw() {
+      background(237, 34, 93);
+      fill(0);
+
+      //move the canvas to the vertical mouse position
+      //relative to the window
+      myCanvas.position(windowWidth / 2, winMouseY + 1);
+
+      //the x of the square is relative to the canvas
+      rect(mouseX, 20, 60, 60);
+      describe(`60-by-60 black rect x moves with mouse x and
+        fuchsia canvas y moves with mouse y`);
+    }
+    </code>
+    </div>
+chainable: false
+---
+
+
+# winMouseY
diff --git a/src/content/reference/en/p5/windowHeight.mdx b/src/content/reference/en/p5/windowHeight.mdx
new file mode 100644
index 0000000000..23f96cda3a
--- /dev/null
+++ b/src/content/reference/en/p5/windowHeight.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: windowHeight
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A numeric variable that stores the height of the browser's
+
+  <a href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport"
+  target="_blank">layout viewport</a>.
+
+  This viewport is the area within the browser that's available for drawing.</p>
+line: 634
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the browser's dimensions.
+      createCanvas(windowWidth, windowHeight);
+
+      background(200);
+
+      describe('A gray canvas that takes up the entire browser window.');
+    }
+    </code>
+    </div>
+alt: This example does not render anything.
+chainable: false
+---
+
+
+# windowHeight
diff --git a/src/content/reference/en/p5/windowResized.mdx b/src/content/reference/en/p5/windowResized.mdx
new file mode 100644
index 0000000000..a745f6c77e
--- /dev/null
+++ b/src/content/reference/en/p5/windowResized.mdx
@@ -0,0 +1,55 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: windowResized
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>The code in <code>windowResized()</code> is called once each time the
+  browser window
+
+  is resized. It's a good place to resize the canvas or make other
+
+  adjustments to accommodate the new window size.</p>
+
+  <p>The <code>event</code> parameter is optional. If added to the function
+  definition, it
+
+  can be used for debugging or other purposes.</p>
+line: 661
+params:
+  - name: event
+    description: |
+      <p>optional resize Event.</p>
+    type: UIEvent
+    optional: true
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+    }
+
+    function draw() {
+      background(200);
+
+      describe('A gray canvas that takes up the entire browser window. It changes size to match the browser window.');
+    }
+
+    // Resize the canvas when the
+    // browser's size changes.
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+    }
+    </code>
+    </div>
+alt: This example does not render anything.
+chainable: false
+---
+
+
+# windowResized
diff --git a/src/content/reference/en/p5/windowWidth.mdx b/src/content/reference/en/p5/windowWidth.mdx
new file mode 100644
index 0000000000..919591291a
--- /dev/null
+++ b/src/content/reference/en/p5/windowWidth.mdx
@@ -0,0 +1,38 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: windowWidth
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A numeric variable that stores the width of the browser's
+
+  <a href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport"
+  target="_blank">layout viewport</a>.
+
+  This viewport is the area within the browser that's available for drawing.</p>
+line: 607
+itemtype: property
+class: p5
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the browser's dimensions.
+      createCanvas(windowWidth, windowHeight);
+
+      background(200);
+
+      describe('A gray canvas that takes up the entire browser window.');
+    }
+    </code>
+    </div>
+alt: This example does not render anything.
+chainable: false
+---
+
+
+# windowWidth
diff --git a/src/content/reference/en/p5/year.mdx b/src/content/reference/en/p5/year.mdx
new file mode 100644
index 0000000000..289defbe14
--- /dev/null
+++ b/src/content/reference/en/p5/year.mdx
@@ -0,0 +1,32 @@
+---
+layout: '@layouts/reference/SingleReferenceLayout.astro'
+title: year
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>p5.js communicates with the clock on your computer. The <a
+  href="#/p5/year">year()</a> function
+
+  returns the current year as an integer (2014, 2015, 2016, etc).</p>
+line: 131
+itemtype: method
+class: p5
+example:
+  - |-
+
+    <div>
+    <code>
+    let y = year();
+    text('Current year: \n' + y, 5, 50);
+    describe('Current year is displayed');
+    </code>
+    </div>
+return:
+  description: the current year
+  type: Integer
+chainable: false
+---
+
+
+# year
diff --git a/src/scripts/builders/reference.ts b/src/scripts/builders/reference.ts
index 622ec00e7e..a942629a8e 100644
--- a/src/scripts/builders/reference.ts
+++ b/src/scripts/builders/reference.ts
@@ -4,7 +4,7 @@ import { remark } from "remark";
 import remarkMDX from "remark-mdx";
 import { parseLibrary } from "../parsers/reference";
 
-const prefix = `./src/pages/en/reference`;
+const prefix = `./src/content/reference/en/`;
 
 const classMethodPreviews = {};
 
@@ -31,7 +31,10 @@ export const buildReference = async () => {
 
   // Build the reference file differently
   const indexMdx = getIndexMdx();
-  await fs.writeFile(`./src/pages/en/reference/index.mdx`, indexMdx.toString());
+  await fs.writeFile(
+    `./src/content/reference/en/index.mdx`,
+    indexMdx.toString(),
+  );
 
   console.log("Done building reference docs!");
 };